经验分享程序开发文档资料数据资源其它资源

jquery红色商城导航下拉菜单特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery红色商城导航下拉菜单特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery红色商城导航下拉菜单特效代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery红色商城导航下拉菜单</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.1.4.4.js"></script>
<script type="text/javascript">

$(document).ready(function(){

	var navstr = '';
	
	for (c in vars = '0'.split(',')) {
		$('#menu_' + vars[c]).addClass('selected');
	}
	
	$('#wrap-nav ul.menu > li').hover(function() {
		$(this).find('.children').show();
		if ($(this).find('.children').length) $(this).addClass('hover');
	},function() {
		$('.children').hide();
		$(this).removeClass('hover');
	});
	
	$('#wrap-nav ul.menu h3, #wrap-nav ul.menu ul.children > li, #wrap-cats h3').hover(function() {
		$(this).addClass('hover');
	},function() {
		$(this).removeClass('hover');
	});
	
});
   
</script>

</head>
<body>

<div id="wrap-nav">
	<ul class="menu ul">
		<li><h3 class="selected"><a href="#" class="depth_1">网站首页</a></h3></li>
		<li><h3><a href="#" class="depth_1">我的</a></h3></li>
		<li>
			<h3 id="menu_01"><a href="#" class="depth_1">设计素材</a></h3>
			<ul id="children_01" class="children">
				<li>
					<h3 id="menu_01a"><a href="#" class="depth_2"><span class="icon10"></span>高清图片</a></h3>
					<ul id="children_01a">
						<li><a href="#" class="depth_3">创意</a></li>
						<li><a href="#" class="depth_3">风景</a></li>
						<li><a href="#" class="depth_3">物品</a></li>
						<li><a href="#" class="depth_3">花卉</a></li>
						<li><a href="#" class="depth_3">饮食</a></li>
						<li><a href="#" class="depth_3">建筑/室内</a></li>
						<li><a href="#" class="depth_3">旅行</a></li>
						<li><a href="#" class="depth_3">人物</a></li>
						<li><a href="#" class="depth_3">运动</a></li>
						<li><a href="#" class="depth_3">生活</a></li>
						<li><a href="#" class="depth_3">交通</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01b"><a href="#" class="depth_2"><span class="icon10"></span>矢量</a></h3>
					<ul id="children_01b">
					<li><a href="#" class="depth_3">潮流</a></li>
					<li><a href="#" class="depth_3">传统</a></li>
					<li><a href="#" class="depth_3">花纹</a></li>
					<li><a href="#" class="depth_3">花边</a></li>
					<li><a href="#" class="depth_3">图标</a></li>
					<li><a href="#" class="depth_3">节庆</a></li>
					<li><a href="#" class="depth_3">人物</a></li>
					<li><a href="#" class="depth_3">运动</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01c"><a href="#" class="depth_2"><span class="icon10"></span>PSD分层</a></h3>
					<ul id="children_01c">
						<li><a href="#" class="depth_3">风景</a></li>
						<li><a href="#" class="depth_3">金融</a></li>
						<li><a href="#" class="depth_3">背景</a></li>
						<li><a href="#" class="depth_3">植物</a></li>
						<li><a href="#" class="depth_3">创意</a></li>
						<li><a href="#" class="depth_3">潮流</a></li>
						<li><a href="#" class="depth_3">卡通</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01d"><a href="#" class="depth_2"><span class="icon10"></span>图标</a></h3>
					<ul id="children_01d">
						<li><a href="#" class="depth_3">网页常用</a></li>
						<li><a href="#" class="depth_3">交通/建筑</a></li>
						<li><a href="#" class="depth_3">系统/软件</a></li>
						<li><a href="#" class="depth_3">卡通/游戏</a></li>
						<li><a href="#" class="depth_3">节庆</a></li>
						<li><a href="#" class="depth_3">表情</a></li>
						<li><a href="#" class="depth_3">人物</a></li>
						<li><a href="#" class="depth_3">家电/数码/科技</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01e"><a href="#" class="depth_2"><span class="icon10"></span>字体</a></h3>
					<ul id="children_01e">
						<li><a href="#" class="depth_3">像素</a></li>
						<li><a href="#" class="depth_3">手写</a></li>
						<li><a href="#" class="depth_3">书法</a></li>
						<li><a href="#" class="depth_3">图形</a></li>
						<li><a href="#" class="depth_3">其他</a></li>
						<li><a href="#" class="depth_3">复古</a></li>
						<li><a href="#" class="depth_3">正规</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01f"><a href="#" class="depth_2"><span class="icon10"></span>音效素材</a></h3>
					<ul id="children_01f">
						<li><a href="#" class="depth_3">结合交替</a></li>
						<li><a href="#" class="depth_3">片头</a></li>
						<li><a href="#" class="depth_3">打斗</a></li>
						<li><a href="#" class="depth_3">恐怖</a></li>
						<li><a href="#" class="depth_3">街头</a></li>
						<li><a href="#" class="depth_3">舞曲</a></li>
						<li><a href="#" class="depth_3">摇滚</a></li>
						<li><a href="#" class="depth_3">轻松</a></li>
						<li><a href="#" class="depth_3">韵律</a></li>
						<li><a href="#" class="depth_3">网站应用</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01g"><a href="#" class="depth_2"><span class="icon10"></span>PPT幻灯片</a></h3>
					<ul id="children_01g">
						<li><a href="#" class="depth_3">背景</a></li>
						<li><a href="#" class="depth_3">商务</a></li>
						<li><a href="#" class="depth_3">风景</a></li>
						<li><a href="#" class="depth_3">主题</a></li>
						<li><a href="#" class="depth_3">教育</a></li>
						<li><a href="#" class="depth_3">行业</a></li>
						<li><a href="#" class="depth_3">科技</a></li>
						<li><a href="#" class="depth_3">运动</a></li>

					</ul>
				</li>
				<li>
					<h3 id="menu_01h"><a href="#" class="depth_2"><span class="icon10"></span>3D素材</a></h3>
					<ul id="children_01h">
						<li><a href="#" class="depth_3">游戏角色</a></li>
						<li><a href="#" class="depth_3">场景</a></li>
						<li><a href="#" class="depth_3">人物</a></li>
						<li><a href="#" class="depth_3">室内/建筑</a></li>
						<li><a href="#" class="depth_3">家具</a></li>
						<li><a href="#" class="depth_3">电器</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_01i"><a href="#" class="depth_2"><span class="icon10"></span>Flash文件</a></h3>
					<ul id="children_01i">
						<li><a href="#" class="depth_3">其他</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		
		<li>
			<h3 id="menu_02"><a href="#" class="depth_1">佳作欣赏</a></h3>
			<ul id="children_02" class="children">
				<li>
					<h3 id="menu_02a"><a href="#" class="depth_2"><span class="icon10"></span>高清图片</a></h3>
					<ul id="children_02a">
						<li><a href="#" class="depth_3">创意</a></li>
						<li><a href="#" class="depth_3">风景</a></li>
						<li><a href="#" class="depth_3">物品</a></li>
						<li><a href="#" class="depth_3">花卉</a></li>
						<li><a href="#" class="depth_3">饮食</a></li>
						<li><a href="#" class="depth_3">建筑/室内</a></li>
						<li><a href="#" class="depth_3">旅行</a></li>
						<li><a href="#" class="depth_3">人物</a></li>
						<li><a href="#" class="depth_3">运动</a></li>
						<li><a href="#" class="depth_3">生活</a></li>
						<li><a href="#" class="depth_3">交通</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_02b"><a href="#" class="depth_2"><span class="icon10"></span>矢量</a></h3>
					<ul id="children_02b">
						<li><a href="#" class="depth_3">潮流</a></li>
						<li><a href="#" class="depth_3">传统</a></li>
						<li><a href="#" class="depth_3">花纹</a></li>
						<li><a href="#" class="depth_3">花边</a></li>
						<li><a href="#" class="depth_3">图标</a></li>
						<li><a href="#" class="depth_3">节庆</a></li>
						<li><a href="#" class="depth_3">人物</a></li>
						<li><a href="#" class="depth_3">运动</a></li>
						<li><a href="#" class="depth_3">生活</a></li>
						<li><a href="#" class="depth_3">交通</a></li>
						<li><a href="#" class="depth_3">科技</a></li>
					</ul>
				</li>
				<li>
					<h3 id="menu_02c"><a href="#" class="depth_2"><span class="icon10"></span>PSD分层</a></h3>
					<ul id="children_02c">
						<li><a href="#" class="depth_3">其他</a></li>
					</ul>
				</li>
			</ul>			
		</li>
		<li><h3><a href="#" class="depth_1">原创作品</a></h3></li>
		<li><h3><a href="#" class="depth_1">经验分享</a></h3></li>
		<li><h3><a href="#" class="depth_1">设计趋势</a></h3></li>
	</ul>
</div>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";background:#EEEEEE;}
a{outline:none;}
a:link{color:#434343;text-decoration:none;}
a:visited{color:#838383;text-decoration:none;}
a:hover{color:#CC0000;text-decoration:none;}
/* ------------------------------ * wrap-nav * ------------------------------ */
#wrap-nav,#wrap-nav li,#wrap-nav h3,#wrap-nav h3 a{background:url("../images/sprite.gif") no-repeat scroll left -9999px;}
#wrap-nav{height:40px;line-height:40px;background-repeat:repeat-x;background-position:0 0;background-color:#CC0000;width:960px;margin:40px auto 0 auto;}
#wrap-nav ul.menu li{position:relative;float:left;padding:0 5px;background-position:0 -40px;}
#wrap-nav ul.menu li h3{padding:0 15px 0 0;font-size:1.2em;}
#wrap-nav ul.menu li h3 a.depth_1{padding:0 0 0 15px;display:inline-block;color:#FFFFFF;}
#wrap-nav ul.menu li h3.hover,#wrap-nav ul.menu li h3.selected{background-position:right -80px;}
#wrap-nav ul.menu li h3.hover a.depth_1,#wrap-nav ul.menu li h3.selected a.depth_1{background-position:left -80px;color:#CC0000;}
#wrap-nav ul.menu li.hover h3{background-position:right -120px;}
#wrap-nav ul.menu li.hover h3 a.depth_1{background-position:left -120px;color:#CC0000;}
#wrap-nav ul.menu li ul.children{position:absolute;left:2px;top:40px;z-index:19;display:none;width:393px;padding:6px 7px 5px 6px;border:3px solid #990000;border-top:0px;background:#FFFFFF;}
#wrap-nav ul.menu li ul.children li{width:393px;padding:0 0 1px 0;background:none;}
#wrap-nav ul.menu li ul.children li.nosub{width:130px;overflow:hidden;}
#wrap-nav ul.menu li ul.children li h3{}
#wrap-nav ul.menu li ul.children li h3 a.depth_2{width:120px;line-height:25px;display:block;font-weight:normal;font-size:9pt;color:#900;}
#wrap-nav ul.menu li ul.children li h3 a.depth_2 span.icon10{margin:10px 3px 0 5px;background-position:-60px -380px;}
#wrap-nav ul.menu li ul.children li h3.selected{background:#FFEFEF;}
#wrap-nav ul.menu li ul.children li.hover{z-index:20;}
#wrap-nav ul.menu li ul.children li.hover h3 a.depth_2{background:#FFCFCF;font-weight:bold;}
#wrap-nav ul.menu li ul.children li.hover ul{background:#FFEFEF;border-color:#FFBFBF;height:auto;z-index:20;}
#wrap-nav ul.menu li ul.children li.hover ul li a.depth_3{color:#333;}
#wrap-nav ul.menu li ul.children li.hover ul li a.depth_3:hover{color:#900;}
#wrap-nav ul.menu li ul.children ul{position:absolute;top:0;left:120px;padding:0 0 0 10px;width:263px;height:25px;overflow:hidden;background:#F4F8F9;border-left:2px solid #D8E2EC;}
#wrap-nav ul.menu li ul.children ul li{width:auto;padding:0;float:left;}
#wrap-nav ul.menu li ul.children ul li a.depth_3{margin:0 15px 0 0;line-height:25px;display:block;color:#666;white-space:nowrap;}
#wrap-nav ul.menu li ul.children ul li a.depth_3:hover{text-decoration:underline;}
#wrap-nav ul.menu li ul.children ul li a.selected{background:none;color:#900;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
31.73 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
31.73 KB
立即下载
辛娟
了解
打赏作者 鼓励作者
Html Js 菜单导航特效3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章