响应式导航栏

响应式导航

样式预览

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()
        }
    });

通过监听页面宽度进行变化