• Register

[分享]简单实用的JQuery下拉菜单

在前端设计中,常用到下拉类的玩意,今儿就分享一下JQuery版的下拉菜单,简单实用!

先上个示例图:

Html 代码段:

<ul id="nav">
	<li><a href="http://yangjunwei.com/" target=_blank>网站首页</a>
		<ul>
			<li><a href="http://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="http://yangjunwei.com/about" target=_blank>关于我</a>
		<ul>
			<li><a href="http://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

版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/918.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 

我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册