响应式菜单栏： bootstrap + jQuery

2023-11-08 11:57•python•阅读 1331

bootstrap库能够很方便的实现PC和移动上的响应式操作。

jQuery库大大的简化了脚本的开发；

html:

<html>
<body>
<div class='main_content'>
        <div class='nav_list'>
                {include file="admin@public/nav"}
                <a href="#" class="js-yw-nav-toggle yw-nav-toggle"><i></i></a>                  <!-- fixed  left bottom -->
        </div>
        <div class='manager_content '>
                {block name="content"}{/block}  
        </div>
</div>
</body>
</html>

css:

.yw-nav-toggle i::before, .yw-nav-toggle i::after {
        content: '';
        width: 30px;
        height: 2px;
        background: #000;
        position: absolute;
        left: 0;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s;
}

.yw-nav-toggle i::before {
        top: -7px;
}

.yw-nav-toggle i::after {
        bottom: -7px;
}

.yw-nav-toggle:hover i::before {
        top: -10px;
}

.yw-nav-toggle:hover i::after {
        bottom: -10px;
}

.yw-nav-toggle:active i::before {
        top: 0px;
        -webkit-transform: rotateZ(45deg);
        -moz-transform: rotateZ(45deg);
        -ms-transform: rotateZ(45deg);
        -o-transform: rotateZ(45deg);
        transform: rotateZ(45deg);
}

.yw-nav-toggle:active i::after {
        bottom: 0px;
        -webkit-transform: rotateZ(-45deg);
        -moz-transform: rotateZ(-45deg);
        -ms-transform: rotateZ(-45deg);
        -o-transform: rotateZ(-45deg);
        transform: rotateZ(-45deg);
}

.nav_list {
        position: fixed;
        width: 150px;
        border: 1px solid #0d5c57;
        margin-left: 2px;
        margin-top: 10px;
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
        -moz-transform: translateX(0px);
        -webkit-transition: 0.5s;
        -o-transition: 0.5s;
        transition: 0.5s;
}

@media screen and (max-width: 768px) {
        .yw-nav-toggle {
                opacity: 1;
                visibility: visible;
        }
        .nav_list {
                width: 150px;
                -moz-transform: translateX(-150px);
                -webkit-transform: translateX(-150px);
                -ms-transform: translateX(-150px);
                -o-transform: translateX(-150px);
                transform: translateX(-150px);
                -moz-transform: translateX(-150px);
        }
}


body.nav_offscreen .nav_list{
        width: 150px;
        -moz-transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
}

jQuery:

//click;
        var nav_off = function() {
                $('.js-yw-nav-toggle').on('click', function(event) {
                        event.preventDefault();
                        var $this = $(this);

                        if ($("body").hasClass("nav_offscreen")) {
                                $("body").removeClass("nav_offscreen");
                                $this.removeClass("active");
                        } else {
                                $("body").addClass("nav_offscreen");
                                $this.addClass("active");
                        }

                });
                
                $(Window).scroll(function(){                    
                        if ($("body").hasClass("nav_offscreen")) {
                                $("body").removeClass("nav_offscreen");
                                $(".js-yw-nav-toggle").removeClass("active");
                        } 
                });
        }
        


        var menuOutClick = function() {
                $(document).click(
                                function(e) {
                                        var container = $(".nav_list, .js-yw-nav-toggle");
                                        if (!container.is(e.target)
                                                        && container.has(e.target).length === 0) {
                                                if ($("body").hasClass("nav_offscreen")) {
                                                        $("body").removeClass("nav_offscreen");
                                                        $(".js-yw-nav-toggle").removeClass("active");
                                                }
                                        }
                                });
        }