​手机端导航按钮使用

手机端导航按钮使用


imageimage


html部分

 <div class="sp_nav" > 

        <span></span>

         <span></span> 

         <span></span> 

       </div>


jq部分


$(function () {              

     var windoww = $(window).width();     

         $('.sp_nav').click(function () {   

        $('.sp_nav').toggleClass('sp_nav_se');      

        $(".navu").toggle();  

          });    

      });


css部分



@media (max-width: 767px){


                .sp_nav {

                    width: 50px;

                    float: right;

                    position: relative;

                    cursor: pointer;

                    height: 30px;

                    margin-top: 10px;

                }

                .sp_nav span {

                    display: block;

                    background: #333333;

                    width: 30px;

                    height: 4px;

                    position: absolute;

                    left: 10px;

                    transition: all ease 0.35s;

                    border-radius: 2px;

                }

                .sp_nav span:nth-of-type(1) {

                    top: 0px;

                }

                .sp_nav span:nth-of-type(2) {

                    top: 10px;

                }

                .sp_nav span:nth-of-type(3) {

                    top: 20px;

                }

                .sp_nav_se span:nth-of-type(1) {

                    top: 10px;

                    transform: rotate(45deg);

                }

                .sp_nav_se span:nth-of-type(2) {

                    width: 0;

                }

                .sp_nav_se span:nth-of-type(3) {

                    top: 10px;

                    transform: rotate(-45deg);

                }


}


微信扫码咨询
建站咨询
cache
Processed in 0.008560 Second.