jQuery+css3多级导航菜单下拉列表特效代码下载


jQuery+css3多级导航菜单下拉列表特效代码下载
jQuery+css3多级导航菜单下拉列表特效代码下载以及多级导航菜单、下拉列表等js/jquery网页特效代码下载。

1. 引入JS

<script src="script/jquery-1.8.3.min.js"></script>

2. HTML代码

<h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;">多级CSS3动画下拉菜单</h1>
<div id="menu-wrap">
	<ul id="menu">
		<li><a href="" target="_blannk">首 页</a></li>
		<li> <a href="">分 类</a>
			<ul>
				<li> <a href="">页面重构</a>
					<ul>
						<li><a href="">HTML</a></li>
						<li><a href="">CSS</a></li>
						<li><a href="">Photoshop</a></li>
					</ul>
				</li>
				<li> <a href="">编程语言</a>
					<ul>
						<li><a href="">JavaScript</a></li>
						<li><a href="">PHP</a></li>
						<li><a href="">Java</a></li>
						<li><a href="">Python</a></li>
						<li><a href="">NodeJS</a></li>
					</ul>
				</li>
				<li> <a href="">调试工具</a>
					<ul>
						<li><a href="">Firebug</a></li>
						<li><a href="">Web Developer Toolbar</a></li>
						<li><a href="">IETester</a></li>
						<li><a href="">YSlow</a></li>
					</ul>
				</li>
				<li> <a href="">浏览器</a>
					<ul>
						<li><a href="">IE</a></li>
						<li><a href="">Firefox</a></li>
						<li><a href="">Chrome</a></li>
						<li><a href="">Safari</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li> <a href="">链 接</a>
			<ul>
				<li> <a href="">门户</a>
					<ul>
						<li> <a href="">百度</a>
							<ul>
								<li><a href="">百度知道</a></li>
								<li><a href="">百度音乐</a></li>
								<li><a href="">百度百科</a></li>
								<li><a href="">百度贴吧</a></li>
							</ul>
						</li>
						<li> <a href="">腾讯</a>
							<ul>
								<li><a href="">腾讯网</a></li>
								<li><a href="">QQ空间</a></li>
								<li><a href="">QQ音乐</a></li>
							</ul>
						</li>
						<li> <a href="">新浪</a>
							<ul>
								<li><a href="">新浪首页</a></li>
								<li><a href="">新浪微博</a></li>
								<li><a href="">新浪博客</a></li>
							</ul>
						</li>
						<li> <a href="">网易</a>
							<ul>
								<li><a href="">163首页</a></li>
								<li><a href="">163邮箱</a></li>
								<li><a href="">网易科技</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li> <a href="">新闻</a>
					<ul>
						<li><a href="">搜狐新闻</a></li>
						<li><a href="">腾讯新闻</a></li>
						<li><a href="">新浪新闻</a></li>
						<li><a href="">网易新闻</a></li>
					</ul>
				</li>
				<li> <a href="">社交</a>
					<ul>
						<li> <a href="">社交1</a>
							<ul>
								<li><a href="">社交1-1</a></li>
								<li><a href="">社交1-2</a></li>
								<li><a href="">社交1-3</a></li>
							</ul>
						</li>
						<li> <a href="">社交2</a>
							<ul>
								<li><a href="">社交2-1</a></li>
								<li><a href="">社交2-2</a></li>
								<li><a href="">社交2-3</a></li>
							</ul>
						</li>
						<li> <a href="">社交3</a>
							<ul>
								<li><a href="">社交3-1</a></li>
								<li><a href="">社交3-2</a></li>
								<li><a href="">社交3-3</a></li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="">关 于</a></li>
		<li><a href="">联 系</a>
			<ul>
				<li><a href="">微博</a></li>
				<li><a href="">微信</a></li>
				<li><a href="">E-mail</a></li>
			</ul>
		</li>
	</ul>
</div>
<script>
$(function() {
	if ($.browser.msie && $.browser.version.substr(0,1) < 7){
	$('li').has('ul').mouseover(function(){
		$(this).children('ul').css('visibility','visible');
		}).mouseout(function(){
		$(this).children('ul').css('visibility','hidden');
		});
	}
	/* Mobile */
	$('#menu-wrap').prepend('<div id="menu-trigger">Menu</div>');
	$("#menu-trigger").on('click', function(){
		$("#menu").slideToggle();
	});
	// iPad
	var isiPad = navigator.userAgent.match(/iPad/i) != null;
	if (isiPad) $('#menu ul').addClass('no-transition');
});
</script>

相关推荐

发表评论

相关文章