我刚刚发现:http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown ,我想在我的网站上实现它,但坦白说我不知道如何实现。
我看了文档,内容如下:
但是我不确定我应该做什么。
应该是jQuery
代码位于 index.html
<script>
中的页面标签?
此外,我知道我应该这样使用它:
$("#menu").menuAim({
activate: $.noop, // fired on row activation
deactivate: $.noop, // fired on row deactivation
});
但是我怎么知道应该使用哪个类?
我的菜单代码如下:
<h3 class="demo-panel-title">Menu</h3>
<div class="row demo-row">
<div class="span9">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse">
<ul class="nav">
<li>
<a href="#">
Menu Item
<span class="navbar-unread">1</span>
</a>
</li>
<li class="active">
<a href="#">
Messages
<span class="navbar-unread">1</span>
</a>
<ul>
<li><a href="#">Element One</a></li>
<li>
<a href="#">Sub menu</a>
<ul>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
<li><a href="#">Element Three</a></li>
<li>
<a href="#">Sub menu</a>
<ul>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
<li><a href="#">Element One</a></li>
<li><a href="#">Element Two</a></li>
<li><a href="#">Element Three</a></li>
</ul> <!-- /Sub menu -->
</li>
</ul> <!-- /Sub menu -->
</li>
<li>
<a href="#">
About Us
<span class="navbar-unread">1</span>
</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
最佳答案
这只是我放在一起的演示代码,因为我的标记在嵌套时无法正常工作。我必须将子导航项放在不同的框中。
http://codepen.io/mikevoermans/pen/EtKxp
HTML
<ul id="main_nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
<div id="flyouts">
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
</ul>
<ul class="sub-menu">
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
</ul>
</div>
<!-- /#flyouts -->
JS
$("#main_nav").menuAim({
activate: function(a){
var idx = $(a).index();
$('#flyouts ul').eq(idx).show();
}, // fired on row activation
deactivate: function(a){
var idx = $(a).index();
$('#flyouts ul').eq(idx).hide();
} // fired on row deactivation
});
关于jquery - 使用 jQuery 菜单目标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15259950/