导航条
Posted humility
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了导航条相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jquery meizu-nav</title>
<meta charset="utf-8" />
<style>
/*********************reset css*********************/
html, body, div, span, h1, h2, h3, p, em, strong, dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
font-size: 100%;
}
em, strong, i {
font-style: normal;
}
h1, h2, h3 {
font-weight: normal;
}
body {
line-height: 1;
font-size: 14px;
font-family: "Microsoft Yahei";
color: #333;
background-color: #2D2D2D; }
ul, ol {
list-style: none;
}
a {
color: #ffffff;
text-decoration: none;
}
input, button {
padding: 0;
border: none;
outline: none;
background: none;
}
img {
vertical-align: top;
}
/*************************************/
header{
position:relative;
left:0;
top:0;
width:100%;
height:62px;
z-index:2;
}
header .container{
width:1240px;
padding:0 20px;
margin:0 auto;
}
.container .logo{
float:left;
}
.container .logo a{
width:245px;
height:55px;
/*display:block;*/
background:url("images/logo.png") no-repeat;
}
.nav{
float:right;
}
.nav li{
float:left;
position:relative;
}
.nav li a{
padding:20px 20px 0;
height:42px;
line-height:42px;
color:rgb(0, 148, 255);
}
.nav li a:hover{
color:rgb(128, 128, 128);
}
.subWarp{
overflow:hidden;
position:absolute;
left:0;
/*top:62px;*/top:0;
/*padding-top:62px;*/
width:100%;
background-color:#fff;
}
.sub_nav{
position:absolute;
left:0;
top:62px;
display:none;
}
.clearfix:after{
display:block;
content:"";
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
.sub_nav[data-link="nav_u"]{
padding-left:350px;
}
.sub_nav[data-link="nav_card"]{
padding-left:350px;
}
.sub_nav[data-link="nav_line"]{
padding-left:650px;
}
.clearfix{zoom:1;}
.sub_nav a{
float:left;
width:140px;
padding-top:14px;
text-align:center;
color:#666;
}
.sub_nav a:hover{
color:#111;
}
.sub_nav a img{
display:inline-block;
height:80px;
}
.sub_nav a span{
display:block;
padding-top:18px;
font-size:12px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1 class="logo"><a href="#"></a></h1>
<ul class="nav">
<li><a href="#">关于我们</a></li>
<li data-subnav="nav_u"><a href="#">手机U盘</a></li>
<li data-subnav="nav_card"><a href="#">读卡器</a></li>
<li data-subnav="nav_line"><a href="#">读卡线</a></li>
<li><a href="#">支持与下载</a></li>
<li><a href="#">新闻资讯</a></li>
</ul>
</div>
</header>
<div class="subWarp">
<div class="sub_nav" data-link="nav_u">
<a href="#">
<img src="images/iDragon-U0033.png" alt="iDragon-U003"/>
<span>iDragon-U003</span>
</a>
<a href="#">
<img src="images/iDragon-U0033.png" alt="iDragon-U003" />
<span>iDragon-U003</span>
</a>
</div>
<div class="sub_nav" data-link="nav_card">
<a href="#">
<img src="images/iDragon-R003.jpg" alt="iDragon-R003" />
<span>iDragon-R003</span>
</a>
<a href="#">
<img src="images/iDragon-R004.jpg" alt="iDragon-R004" />
<span>iDragon-R004</span>
</a>
<a href="#">
<img src="images/iDragon-R005.jpg" alt="iDragon-R005" />
<span>iDragon-R005</span>
</a>
<a href="#">
<img src="images/iDragon-R006.jpg" alt="iDragon-R006" />
<span>iDragon-R006</span>
</a>
<a href="#">
<img src="images/iDragon-R007.jpg" alt="iDragon-R007" />
<span>iDragon-R007</span>
</a>
</div>
<div class="sub_nav" data-link="nav_line">
<a href="#">
<img src="images/iDragon-RC001.jpg" alt="iDragon-RC001" />
<span>iDragon-RC001</span>
</a>
<a href="#">
<img src="images/iDragon-RC002.jpg" alt="iDragon-RC002" />
<span>iDragon-RC002</span>
</a>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.js" type="text/javascript"></script>
<script>
$(function () {
var nav_item = $(".container").find("[data-subnav]");//获取有子菜单的li
var sub_warp = $(".subWarp"); //获取子菜单的div外层
var sub_nav = sub_warp.find(".sub_nav");//获取子菜单层
var timer = null;
nav_item.hover(function(){
clearTimeout(timer);
hoverChange();
var getVal = $(this).attr("data-subnav");//获取属性data-sub_nav的值
var subnav_cur = $(".sub_nav[data-link=" + getVal + "]");//获取当前的subnav
var cur_imgs = subnav_cur.find(‘a‘);
showSub(subnav_cur);
showImg(cur_imgs);
}, function(){
timer = setTimeout(function(){
outChange();
}, 100);
});
sub_warp.hover(function() {//经过sub_warp时
clearTimeout(timer);
}, function () {
timer = setTimeout(function() {
outChange();
}, 100);
});
function hoverChange(){
sub_warp.animate({ height: 199 });
}
function outChange(){
sub_warp.animate({ height: 0 });
}
function showSub(subnav_cur) {//展示当前的subnav
sub_nav.hide(); //其它subnav隐藏
subnav_cur.show();//显示当前li下的subnav
}
function showImg(aImg) {//图片出现的动画特效
var num = 0;
var timer = null;
aImg.css({ opacity: 0, marginLeft: 30 });
for (var i = 0; i < aImg.length;i++){
aImg.eq(i).animate({ marginLeft: 0, opacity: 1 }, 500);
if(aImg===aImg.length-1)
{
clearInterval(timer);
}
}
aImg.hover(function () {
$(this).css({ opacity: 1 }).siblings().css({ opacity: 0.7 });
}, function () {
aImg.css({ opacity: 1 });
});
}
});
</script>
</body>
</html>
以上是关于导航条的主要内容，如果未能解决你的问题，请参考以下文章