[英]How to turn this menu into a MultiLevel one?
I just found this cool horizontal drop down menu: 我刚刚发现了这个很酷的水平下拉菜单:
http://css-tricks.com/examples/DiggHeader/# http://css-tricks.com/examples/DiggHeader/#
And I would love to use it, but I require multilevel. 我很想使用它,但是我需要多层的。 But not a clue how to do it.
但是却不知道如何去做。 I have searched for tutorials on how to create multilevel menu, but can only find downloads and demo previews.
我已经搜索了有关如何创建多级菜单的教程,但是只能找到下载内容和演示预览。 :-S
:-S
Can anyone offer any suggestions on how I would go about making the menu above multilevel? 谁能提供任何建议,使我将菜单制作成多层以上?
Thank you 谢谢
You can check out a minimalistic navigation plugin I made for jQuery. 您可以查看我为jQuery制作的简约导航插件 。 You can probably get it to work just like that link by changing the css to use relative and absolute positioning of the
ul
lists. 通过更改css以使用
ul
列表的相对和绝对位置,您可能可以使它像该链接一样工作。
I love CSS-Tricks, this can be done in a few ways. 我喜欢CSS-Tricks,这可以通过几种方式完成。 Here is a quick example how I suggest you go about this.
这是一个简单的示例,我建议您进行此操作。
HTML MarkUp; HTML标记;
<div id="nav">
<ul>
<li>
<a href="...">Technology</a>
<ul>
<li><a href="...">Apple</a>
<ul>
<li><a href="...">iPhone</a></li>
</ul>
</li>
<li><a href="...">Design</a></li>
</ul>
</li>
</ul>
</div>
Notice the <ul>
within the next to <a href="...">Apple</a>
. 注意
<a href="...">Apple</a>
旁边的<ul>
。
CSS Only method; CSS Only方法;
<style>
#nav ul li ul{
display:none;
}
#nav ul li:hover>ul{
display:block;
}
</style>
This CSS will hide elements not needed to be shown until a user hover's over an element. 在用户将鼠标悬停在某个元素上之前,此CSS将隐藏不需要显示的元素。 then will Show on hover.
然后会悬停显示。
This element hover can be done in JavaScript, if you wish to change the effect. 如果您想更改效果,可以使用JavaScript完成此元素的悬停。
jQuery Method; jQuery方法;
<style>
#nav ul li ul{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
$("#nav ul li").each(function(){
$(this).mouseenter(function(){
$(this).find("ul:first").show();
}).mouseleave(function(){
$(this).find("ul:first").hide();
});
})
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.