Ruby's Louvre

每天学习一点点算法

导航

二级菜单(avalon+jquery动画)

<!DOCTYPE html> <html> <head> <title>by 司徒正美</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery.js"></script><!--jquery必须放在前面--> <script src="avalon.js"></script> <script> var vm = avalon.define({ $id: "test", array: [ { name: 111111, child: [ {name: 1.1}, {name: 1.2}, {name: 1.3}, ] }, { name: 22222, child: [ {name: 2.1}, {name: 2.2}, {name: 3.3}, ] }, { name: 33333, child: [ {name: 3.1}, {name: 3.2}, {name: 3.3} ] } ], selectedIndex: 0 }) $(function () { $(document).on("click", ".first-menu li", function () { $(".show .second-menu").css("margin-left", -200) $(".show").removeClass("show").width(0) var _this = this setTimeout(function () { $(_this).addClass("show").find(".second-menu").animate({ width: 200 }, 500) $(".second-menu", _this).animate({ marginLeft: 0 }, 500) }) }) }) </script> <style> .first-menu, .second-menu { padding: 0px; margin: 0px; list-style: none; } .first-menu, .second-menu-wrap { position: relative; background: #666; } .first-menu > li, .second-menu > li{ width:200px; height:30px; line-height: 2; color: #fff; border-bottom: 1px solid #333; } .first-menu{ width:200px; } .second-menu-wrap{ background: red; position: absolute; top: 0px; left: 200px; overflow: hidden; } .second-menu-wrap ul{ margin-left:-200px; } .second-menu-wrap.show ul{ margin: 0px; } </style> </head> <body> <div ms-controller="test"> <ul class="first-menu"> <li ms-repeat="array" > {{el.name}} <div class="second-menu-wrap"> <ul class="second-menu"> <li ms-repeat-elem="el.child"> {{elem.name}} </li> </ul> </div> </li> </ul> </div> </body> </html>
机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年

posted on 2015-11-18 16:54  司徒正美  阅读(1530)  评论(0编辑  收藏  举报