我刚刚找到: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>
答案 0 :(得分:8)
这只是我放在一起的演示代码,因为我无法在嵌套时让我的标记工作。我不得不将subnav项目放在另一个框中。
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
});
答案 1 :(得分:5)
这比mikevoermans发布的更清晰,更具语义性(没有冒犯)。
你可以保持你的嵌套,你不必做额外的var。另外,按索引进行定位很糟糕,因为如果您的某件商品没有subnav,那该怎么办呢。
您只需相应地指定所有内容即可。我让它在Natgeo网站上工作,但我无法链接到它,因为我们尚未启动。
HTML:
<nav id="main-nav">
<ul>
<li class="parentnav">
<a>Parent</a>
<ul class="subnav">
<li><a href="" title="">child</a></li>
<li><a href="" title="">child</a></li>
</ul>
</li>
</li>
<a>Parent</a>
</li>
<li class="parentnav">
<a>Parent</a>
<ul class="subnav">
<li><a href="" title="">child</a></li>
<li><a href="" title="">child</a></li>
</ul>
</li>
</ul></nav>
JS:
$("#main-nav").menuAim({
rowSelector: "li.parentnav",
submenuDirection: "below",
tolerance: 0,
activate: function(a){
$(a).children('.subnav').show();
},
deactivate: function(a){
$(a).children('.subnav').hide();
}
});
//方向可以是:左,右,上或下。
//更宽容=更不宽容..它向后并且错过领先,但就是这样 0意味着有很大的容忍度,所以越少越好:/
答案 2 :(得分:0)
我不知道您的css菜单目前在哪些类中工作,但为了使其工作,您应该将空的jQuery函数$ .noop替换为适用于您的类的。 以下行中的某些内容应该有效(使用nav类):
$(".nav").menuAim({
activate: function(a){$(a).addClass("submenu-visible")},
deactivate: function(a){$(a).removeClass("submenu-visible")},
});