jquery制作导航条
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type="image/x-icon" href="2.png">
<title>案例练习</title>
<link rel="stylesheet" href="layui/css/layui.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 100%;
height: 70px;
background: #f5f5f5;
box-shadow: 1px 1px 10px #ccc;
line-height: 70px;
position: relative;
}
form{
width: 800px;
margin: 0 auto;
position: relative;
}
input{
width: 800px;
height: 35px;
border:0;
border-radius: 4px;
padding-left: 15px;
}
form i{
font-size:28px;
position: absolute;
top: 0;
right: 10px;
}
span{
position: absolute;
width: 48px;
height: 48px;
display: block;
background: url(show.jpg) -64px 168px;
right: 0;
}
.menu{
width: 1000px;
height: 40px;
line-height: 40px;
margin:20px auto;
background: #f5f5f5;
position: relative;
}
.menu li{
float: left;
text-align: center;
width: 100px;
font-weight: bold;
}
.one li:hover{
color: #fff;
cursor: pointer;
}
.tiao{
width: 100px;
background:#ff6500;
height: 5px;
float: left;
position: absolute;
top: 40px;
}
.other:hover li{
color: black;
}
.other li:hover{
color: #ccc;
}
</style>
<body>
<div class="box">
<form action="">
<input type="text" placeholder="# 请输入一个关键词 #">
<i class="layui-icon"></i>
</form>
<span></span>
</div>
<ul class="menu one">
<li name="0"><a >要闻</a></li>
<li name="1"><a >国际</a></li>
<li name="2"><a >国内</a></li>
<li name="3"><a >社会</a></li>
<li name="4"><a >军事</a></li>
<li name="5"><a >娱乐</a></li>
<li name="6"><a >体育</a></li>
<li name="7"><a >汽车</a></li>
<li name="8"><a >科技</a></li>
<li class="other">
<a >其他</a>
<ul>
<li>自然</li>
<li>历史</li>
<li>健康</li>
</ul>
</li>
<div class="tiao"></div>
</ul>
</body>
</html>
<script>
$(function(){
$('input').focus(function(){
$(this).css('box-shadow','0 0 5px #ff6500 inset');
})
$('input').blur(function(){
$(this).css('box-shadow','');
})
$('.box').hover(
function(){
$(this).stop().animate({'top':'2px'},500);
},function(){
$(this).stop().animate({'top':'-65px'},500);
}
)
//第一个导航
$('.one>li').hover(function(){
$(this).css('background','#ff6500');
$('li:eq(9)').css('background','#f5f5f5');
$x = parseInt($(this).attr('name'));
$('.one>.tiao').stop().animate({left:100*$x+'px'},250);
},function(){
$(this).css('background','#f5f5f5');
$('li:eq(9)').css('background','#f5f5f5');
$('.one>.tiao').stop().animate({left: 0+'px'},200);
})
$('.other ul').hide();
$('.other').hover(function(){
$('.other ul').slideDown(100);
$('.one>.tiao').hide();
},function(){
$('.other ul').slideUp(100);
$('.one>.tiao').show();
})
})
</script>运行实例 »
点击 "运行实例" 按钮查看在线实例
第一步——布局前端页面
第二步——实现搜索框的隐藏与显现
$('input').focus(function(){
$(this).css('box-shadow','0 0 5px #ff6500 inset');
})
$('input').blur(function(){
$(this).css('box-shadow','');
})//选中搜索框时出现边框颜色的变化
$('.box').hover(
function(){
$(this).stop().animate({'top':'2px'},500);
},function(){
$(this).stop().animate({'top':'-65px'},500);
}//第三步——实现导航条的变色
$(this).css('background','#ff6500');第四步——实现导航条下提示条的跟随
$('.one>.tiao').stop().animate({left:100*$x+'px'},250);第五步——实现导航条的下拉菜单
$('.other ul').hide();
$('.other').hover(function(){
$('.other ul').slideDown(100);
$('.one>.tiao').hide();
},function(){
$('.other ul').slideUp(100);
$('.one>.tiao').show();
})