利用JQuery实现复杂的顶部导航栏功能

今天给大家介绍一下如何利用JQuery实现复杂的顶部导航栏功能,复杂指的是导航栏选项下面显示的是文字+图片的内容。

简单的导航栏我们一般利用多个ul+li进行嵌套使用,可以实现多级的导航栏功能,可是界面相对单一,而且不能展示图片和文字混排的效果,所以今天给大家介绍的就是图片文字混排的导航栏的功能。下面看具体例子来解析:

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>导航菜单</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="wrapper"> 
	<div class="head">
		<div class="topNav">
			<div class="topNavList">
				<a href="#">关于我们</a>
				<a href="#">行业考察</a>
				<a href="#">产品中心</a>
				<a href="#">技术服务</a>
				<a href="#">新闻中心</a>
				<a href="#">联系我们</a>
				<div class="topNavSub">
					<div class="activeLeft"></div>
					<div class="activeRight"></div>
				</div>
			</div>
		</div>

		<div class="subNavWrapper">
			<div class="subNavSet">
				<div class="subNav sub0">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#">关于我们1</a> 
							<a href="#">关于我们2</a> 
							<a href="#">关于我们3</a>
						</li>
					</ul>
					<span class="features">
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>净世界,美生活。</strong></em></a></i>
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i>
					</span>
				</div>

				<div class="subNav sub1">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#">行业考察1</a> 
							<a href="#">行业考察2</a> 
							<a href="#">行业考察3</a>
						</li>
					</ul>
					<span class="features">
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i> 
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>行业的领跑者。</strong></em></a></i>
					</span>
				</div>

				<div class="subNav sub2">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#">电子功能材料</a> 
							<a href="#">高性能纤维材料</a> 
							<a href="#">净化工程</a> 
							<a href="#">超净产品</a> 
							<a href="#">医疗产品</a> 
							<a href="#">护理产品</a> 
							<a href="#">精密模具</a>
						</li>
					</ul>

					<span class="features">
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精雕细刻 巧夺天工。</strong></em></a></i>
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精益求精 无微不至。</strong></em></a></i>
					</span>
				</div>

				<div class="subNav sub3">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#">技术研发</a>
							<a href="#">专业测试</a> 
							<a href="#" >技术咨询服务</a>
						</li>
					</ul>
					<span class="features">
						<i><a href="#" ><img width="177" height="100" src="images/index1.jpg" ><em><strong>高新技术产品的研发和生产。</strong></em></a></i>
						<i><a href="#"><img width="177" height="100" src="images/index2.jpg"><em><strong>提供优质的品牌产品和服务。</strong></em></a></i>
					</span>
				</div>

				<div class="subNav sub4">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#"> 基本信息</a> 
							<a href="#">公司治理</a> 
							<a href="#">定期报告</a> 
							<a href="#"> 临时公告</a> 
							<a href="#">投资者交流</a>
							<a href="#">分析研究报告</a> 
							<a href="#"> 股息资料</a>
						</li>
					</ul>
					<span class="features">
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>沟通创造价值。</strong></em></a></i>
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>稳定和可持续发展。</strong></em></a></i>
					</span>
				</div>

				<div class="subNav sub5">
					<span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
					<ul>
						<li>
							<a href="#">人才理念</a> 
							<a href="#">人才招聘</a> 
						</li>
					</ul>
					<span class="features">
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxxxx。</strong></em></a></i>
						<i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxx。</strong></em></a></i>
					</span>
				</div>
			</div>
		</div>     
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

js代码:

$(document).ready(function() {
    nav();
})
var idx;
var arr_offsetX = [0, 144, 233, 345, 400, 450];
function nav() {
    $(".topNavList a").hover(function() {
        idx = $(".topNavList a").index(this);
        $(".subNavWrapper").show();
        $(".activeLeft").show();
        $(".activeRight").show();
        var offsetXArrow = $(".topNavList a").eq(idx).position().left - 125.7;
        var w = $(".topNavList a").eq(idx).width() + 22;
        $(".topNavList a").eq(idx).addClass("activeTopNav");
        $(".activeLeft").css("left", offsetXArrow+'px');
        $(".activeRight").css("left", offsetXArrow+w+'px');
        $(".subNavSet div").eq(idx).show();
        if (idx == 0 || idx == 1 || idx == 3 || idx == 5) {
            $(".subNavSet .subNav").eq(idx).find("ul").css("width", "132px");
            $(".subNavSet .features").eq(idx).css("left", "195px");
        } else {
            $(".subNavSet .subNav").eq(idx).find("ul").css("width", "392px");
            $(".subNavSet .features").eq(idx).css("left", "315px");
        };
    }, function() {
        $(".subNavWrapper").hide();
        $(".activeLeft").hide();
        $(".activeRight").hide();
        $(".topNavList a").eq(idx).removeClass("activeTopNav");
        $(".subNavSet div").eq(idx).hide();
    })

    $(".subNavSet div").hover(function() {
        $(".subNavWrapper").show();
        $(".topNavList a").eq(idx).addClass("activeTopNav");
        $(".activeLeft").show();
        $(".activeRight").show();
        $(this).show();
    }, function() {
        $(".subNavWrapper").hide();
        $(".activeLeft").hide();
        $(".topNavList a").eq(idx).removeClass("activeTopNav");
        $(".activeRight").hide();
        $(this).hide();
    })
}

css代码:

/*common start*/
* {
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	list-style-type: none;
}

em, i {
	font-style: normal;
}

a {
	color: #666;
	text-decoration: none;
}

a:hover {
	color: #066;
}

body {
	color: #666;
	font: 12px/22px "Simsun", "宋体";
	overflow-x: hidden;
}
/*common end*/

.wrapper {
	width: 100%;
	overflow: hidden;
	position: relative;
	/*left: 50%;*/
	top: 0;
	/*margin: 0 0 0 -500px;*/
	height:600px;
}

/*head start*/
.topNav {
	width: 100%;
	height: 47px;
	background: url(../images/navbg.png);
	z-index: 1;
}

.topNavList {
	width: 1000px;
	height: 47px;
	margin: 0 auto;
}

.topNavSub {
	position: relative;
}

.topNav a {
	display: block;
	float: left;
	height: 47px;
	line-height: 47px;
	color: #066;
	font: 16px/47px "Microsoft YaHei", "Simsun", "宋体";
	margin: 0 53px 0 13px;
	padding: 0 7px;
}
.activeTopNav {
	background: url(../images/navItemBg_13.png) 0 -1px;
}

.activeLeft {
	width: 8px;
	height: 51px;
	position: absolute;
	top: -1px;
	background: url(../images/navItemBg_12.png);
	display: none;
}

.activeRight {
	width: 10px;
	height: 51px;
	position: absolute;
	top: -1px;
	background: url(../images/navItemBg_14.png);
	display: none;
}


/*sub start*/
.subNavWrapper {
	width: 1000px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 44px;
	margin: 0 0 0 -495px;
	z-index: 1;
	display: none;
}

.subNavSet {
	width: 1000px;
	height: 300px;
	margin: 0 auto;
	position: relative;
}

.subNav {
	position: relative;
	display: none;
}

.subNav ul {
	width: 132px;
	height: 234px;
	position: absolute;
	left: 23px;
	top: 16px;
	color: #333;
	font: 14px/30px "Simsun", "宋体";
}

.subNav ul a {
	width: 130px;
	display: block;
	padding: 0 0 0 16px;
	float: left;
	color: #333;
	font: 14px/34px "Microsoft YaHei", "Simsun", "宋体";
	background: url(../images/arrowSub.png) left center no-repeat;
}

.subNav ul a:hover {
	color: #066;
	text-decoration: underline;
}

.sub1 {
	left: 144px;
}

.sub2 {
	left: 168px;
}

.sub3 {
	left: 262px;
}

.sub4 {
	left: 157px;
}

.sub5 {
	left: 263px;
}

.sub0 .subBgTopLeft, .sub1 .subBgTopLeft {
	width: 706px;
	height: 7px;
	display: block;
	background: url(../images/subTop0.png);
}

.sub3 .subBgTopLeft {
	width: 706px;
	height: 7px;
	display: block;
	background: url(../images/subTop3.png);
}


.sub5 .subBgTopLeft {
	width: 706px;
	height: 7px;
	display: block;
	background: url(../images/subTop5.png);
}

.sub0 .subBgBotLeft, .sub1 .subBgBotLeft, .sub3 .subBgBotLeft, .sub5 .subBgBotLeft {
	width: 706px;
	height: 206px;
	display: block;
	background: url(../images/subBot0.png);
}

.sub2 .subBgTopLeft {
	width: 832px;
	height: 7px;
	display: block;
	background: url(../images/subTop2.png);
}

.sub4 .subBgTopLeft {
	width: 832px;
	height: 7px;
	display: block;
	background: url(../images/subTop4.png);
}

.sub2 .subBgBotLeft, .sub4 .subBgBotLeft {
	width: 832px;
	height: 206px;
	display: block;
	background: url(../images/subBot2.png);
}

.features {
	position: absolute;
	left: 195px;
	top: 19px;
}

.features i {
	width: 174px;
	display: block;
	float: left;
	margin: 0 40px;
}

.features a:hover img {
	border: 1px solid #448c8c;
}

.features i img {
	display: block;
	float: left;
	border: 1px solid #d7d8d8;
	margin-bottom: 12px;
}

.features i em {
	width: 174px;
	display: block;
	float: left;
	line-height: 20px;
}
/*sub end*/

运行截图:

实现思路:

1.首先用css实现对整体导航栏的布局,然后将下级菜单隐藏起来。

2.然后利用js实现对下级菜单显示位置的控制。

3.利用JQuery实现对界面的展示和隐藏操作。

如果对文章有什么疑义或者有啥问题都可以找我交流QQ:208017534 欢迎打扰!!!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏PPV课数据科学社区

【信息图】剁手族,你以世界杯名义网购了啥?

面对四年一度的世界杯,“剁手族”还有时间网购吗?整体来看,在足球的诱惑下,男人有点分心了。然而,女人誓与世界杯抢男人的决心,简直令人受宠若惊! 快跟小编来一探究...

2739
来自专栏罗超频道

用Apple Watch上陌陌是什么体验?竟然约不了!

Apple Watch上市后,中国科技公司还是蛮兴奋的,搜狗、百度、高德、支付宝什么的,都争先恐后开发了Apple Watch版本,就连跟手表实在没啥关系的优酷...

36211
来自专栏机器人网

即将在今年上市的10款最酷无人机

DJI Phantom系列无人机拥有很高的知名度,第三代产品拥有两个版本,分别为1080P及4K摄像头版。虽然它的外形设计看上去与前作很相似,但集成了新 的传感...

2536
来自专栏机器人网

构建变革制造业的焊接系统

ES200D(左)、MS210(右)的外观 机器人开发背景 点焊是汽车生产线必不可少的焊接方法之一。使用数量虽因产量而有所不同,但为成功组装汽车车身,平均每条生...

2696
来自专栏西枫里博客

被方正字体投诉侵权说起

事情还得从几年前的订单说起。在早些年,还没有日益强调版权,著作权的时候,网络上各种免费的资源算是取之不尽用之不竭,所以在网站开发过程中,很多前端的内容都可以在网...

471
来自专栏VRPinea

宏碁Next@Acer发布会放大招,VR占据半壁江山

28510
来自专栏FreeBuf

记一次从《延禧攻略》扯出的微信灰色产业链事件

这部爱奇艺独播的网剧自7月19日上映以来,收视长虹累计播放92.2亿,爱奇艺评分8.0。该剧共70集,笔者写此稿时更新至56集,在爱奇艺平台每周二至周日20点更...

604
来自专栏Sign

月千之夜

这个是2012年做的一个游戏。 ======== 主角的控制方式: 右键移动, 按Q键角色会朝鼠标方向冲刺,冲刺位移距离大,但是冲刺过程不是无敌的,且伤害一般...

26611
来自专栏VRPinea

Pico Goblin VR测评:价格公道实惠,但仍有一定上升空间

2494
来自专栏Renderbus云渲染农场

Blender、Maya、C4D哪个最适合做3D动画?

写在前面:关于哪个软件更容易学,其实把其中的一个学专学精了都会比较吃香,建议初学者先考虑清楚今后要从事的职业和发展方向,再有针对性的精修;

2050

扫码关注云+社区