响应式导航
样式预览
pc端的样式
移动端的样式
html部分
<div class="navbg">
<div class="col960 parentWrap">
<button class="navbtn" type="button"></button>
<ul id="navul" class="navul">
<li class="menuGroup">
<a href="#" class="groupTitle">CSS</a>
<ul>
<li><a href="#">CSS入门</a></li>
<li><a href="#">CSS工具</a></li>
<li><a href="#">CSS技巧</a></li>
<li><a href="#">CSS实例</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">CSS hack</a></li>
<li><a href="#">CSS2.0 手册</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">网页特效</a>
<ul>
<li><a href="#">导航菜单</a></li>
<li><a href="#">表单按钮</a></li>
<li><a href="#">表格图层</a></li>
<li><a href="#">图片特效</a></li>
<li><a href="#">滚动特效</a></li>
<li><a href="#">文字特效</a></li>
<li><a href="#">时间日期</a></li>
<li><a href="#">窗口特效</a></li>
<li><a href="#">鼠标特效</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">前端资讯</a>
<ul>
<li><a href="#">用户体验</a></li>
<li><a href="#">前端观察</a></li>
<li><a href="#">职业生涯</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">前端技巧</a>
<ul>
<li><a href="#">布局技巧</a></li>
<li><a href="#">网页字体</a></li>
<li><a href="#">flash</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">杂七杂八</a>
<ul>
<li><a href="#">帝国cms</a></li>
<li><a href="#">电脑技巧</a></li>
<li><a href="#">随笔杂谈</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">Javascript</a>
<ul>
<li><a href="#">Jquery</a></li>
<li><a href="#">Js学习</a></li>
<li><a href="#">Js教程</a></li>
</ul>
</li>
<li class="menuGroup">
<a href="#">网站优化</a>
<ul>
<li><a href="#">SEO杂谈</a></li>
<li><a href="#">站长工具</a></li>
<li><a href="#">经验分享</a></li>
</ul>
</li>
<div class="search">
<div class="row">
<div class="">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</div>
</ul>
</div>
</div>
</nav>
### css部分
#navs{
z-index: 99998;
background-color: #333333;
height: 35px;
z-index: 999;
max-width: 1200px;
margin: 0 auto;
position: relative;
// 这里是小于585的样式
@media(max-width:585px) {
// @media screen and (max-width: 768) {
#navul{
display: none;
}
.navbg .navbtn{
display: block;
width: 100%;
height: 40px;
background: #333333;
}
.parentWrap {
width: 100%;
text-align: center;
.navul{
.menuGroup{//li
// border: 1px solid #999;
background-color: #e0ecff;
a{//a
&:hover{
background: red;
}
height: 40px;
line-height: 40px;
font-weight: 400;
display: block;
font-size: 16px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul{
background-color: white;
li{
height: 40px;
line-height: 40px;
font-weight: 400;
font-size: 16px;
&:hover{
background: red;
}
}
}
}
}
}
.search{
padding-top: 2px;
width: 100%;
margin:3px 0;
box-sizing: border-box;
margin-right: 20px;
height: 40px;
line-height: 40px;
font-weight: 400;
display: block;
font-size: 16px;
background-color: #e0ecff;
border-bottom: 1px solid #ccc;
// padding: 0;
margin: 0;
}
.search .input-group{
width: 100%;
display: flex;
}
.search .input-group input{
margin:0 0 0 10px;
flex: 7;
outline:none;
border: 0px;
}
.search .input-group span{
flex: 3;
margin-right: 10px
}
.search .input-group button{
width: 100%;
height: 100%;
max-width: 100px;
outline:none;
border: 0;
margin: 0;
padding: 0;
}
}
// 这里是大于585的时候的样式
@media(min-width: 585px){
.navbg{height:40px;width:100%;background:#333333;box-shadow:1px 1px 7px #999;position:absolute;z-index:99;left:0;}
#navul{display: block; height: 37px;margin-left: 20px}
#navul li{
float:left;
margin-right:1px;
// width: 98px;
// height:40px;
padding: 0 10px;
position:relative;
// text-align:center;
line-height:40px;
}
#navul .menuGroup{
border-radius:5px 5px;
}
#navul .menuGroup:hover{
background:#ffffff;
}
#navul .menuGroup:hover a{
color: #000000;
}
#navul li a:link{color: #000000}
#navul li a:visited{color:red;}
#navul li ul{width: 200px;
display:none;
position:absolute;
z-index:10000;top:38px;
left:-1px;
background:#ffffff;
// border:#004E6C 1px solid;
border-bottom:none;
box-shadow: 1px 5px 8px #333333;
border-radius:0px 5px 5px 5px ;
}
#navul li ul li{
display:block;
width:100%;
float:none;
margin-right:0px;
height:30px;
position:relative;
line-height:30px;
// border-bottom:#004E6C 1px solid;
font-size:14px;
border-radius:5px 5px 5px 5px ;
}
#navul li ul li:hover{
background: #dddddd
}
#navul li ul li a{
color: #000000
}
.search{
width: 200px;
float: left;
border: 0;
}
.search input{
height:100%;
background-color: rgba(255, 255, 255, 0.1);
color: #fff;
outline:none;
}
.search button{
height:100%;
background-color: #333333;
color: rgba(255, 255, 255, 0.7);
outline:none;
}
.navbg{
.search{
width: 200px;
float: right;
margin-right: 20px;
@media(max-width: 900px){
margin-top: 40px;
z-index:99;
position: absolute;
top: 0;
right: 20px;
height: 1000px;
input{
height:100%;
background-color: rgba(255, 255, 255, 0.1);
color: #fff
}
button{
height:100%;
background-color: #333333;
color: rgba(255, 255, 255, 0.7)
}
}
}
}
}
}
.navbtn{
display: none;
}
js部分
$(".navbg .navbtn").click(function(){
$(this).siblings('ul').toggle()
})
$('.navbg .navul>.menuGroup').mouseenter(function () {
$(this).children('ul').show().parent().siblings('li').children('ul').hide();
$(this).siblings('div').children('ul').children('li').children('ul').show()
$('.navbg .navul').mouseleave(function () {
$(this).children('li').children('ul').hide();
})
})
$(window).resize(function() {
if (document.body.clientWidth>585) {
$('.navbg .navul').show()
}else{
$('.navbg .navul').hide()
}
});