[分享]简单实用的JQuery下拉菜单
在前端设计中,常用到下拉类的玩意,今儿就分享一下JQuery版的下拉菜单,简单实用!
先上个示例图:
Html 代码段:
<ul id="nav"> <li><a href="https://yangjunwei.com/" target=_blank>网站首页</a> <ul> <li><a href="https://yangjunwei.com/" target=_blank>杨俊伟博客</a></li> <li><a href="http://www.nuodou.com" target=_blank>诺豆网</a></li> <li><a href="http://s.nuodou.com" target=_blank>诺豆搜索</a></li> </ul> </li> <li><a href="http://www.nuodou.com/t" target=_blank>玩玩微博</a> <ul> <li><a href="http://www.nuodou.com/t" target=_blank>诺豆微博</a></li> <li><a href="http://t.qq.com/haibor" target=_blank>腾讯微博</a></li> <li><a href="http://weibo.com/87005971" target=_blank>新浪微博</a></li> </ul> </li> <li><a href="http://idc.nuodou.com/" target=_blank>主机域名</a> <ul> <li><a href="http://idc.nuodou.com/" target=_blank>诺豆主机</a></li> <li><a href="http://zitian.nuodou.com/" target=_blank>紫田主机</a></li> </ul> </li> <li><a href="https://yangjunwei.com/about" target=_blank>关于我</a> <ul> <li><a href="https://yangjunwei.com/about" target=_blank>关于杨俊伟</a></li> <li><a href="http://www.nuodou.com/about" target=_blank>关于诺豆网</a></li> </ul> </li> </ul>
JS 代码段:
$(document).ready(function() { // Setup the nav drop-downs $('#nav').nmcDropDown({ show: {height: 'show', opacity: 'show'} }); });
具体可以看演示:演示Demo