Menu.CSS示范脚本

admin

DIV：
<div class="menu">$func_menu(pos=0,divi=none,sub=0)$</div>
<button class="navbar-toggler" type="button"></button>
CSS：
@import "../css/font-awesome.min.css";
.menu ul{display: flex; flex-flow: row nowrap; justify-content: flex-end; align-items: center;}
.menu ul li a{ display: block; padding:0 20px; line-height: 68px; font-size: 16px;}
.navbar-toggler{display: none;}
@media (max-width: 992px) {
    .navbar-toggler{ display:inline-flex; position: fixed; z-index: 2000; top:15px; right: 20px; background: #FB0B28; color: #fff; border-radius: 5px; margin: 6px; width: 50px; height: 50px; align-items: center; justify-content: center; border:0;}
    .navbar-toggler:before{ content:'\f0c9'; font-family: fontawesome; font-size: 30px;}
    .menu{display:none; width: 100%; position: fixed; top: 88px; left: 0; z-index: 3000; background:rgba(0,0,0,.9);}
    .menu ul{ flex-flow:row wrap; padding: 10px;}
    .menu ul li{ display: block; width:calc(50% - 10px); background: rgba(255,255,255, .2); margin: 2px;}
    .menu ul li a{display:block; line-height: 36px; color:#Fff;}
    .menu ul li a b{ border-left: 5px solid #fff; border-top:5px solid transparent; border-bottom:5px solid transparent;}
    .menu ul li:hover{background: #FB0B28;}
    .menu ul li ul{left:110px; top:0; padding-top:5px; padding-bottom:5px; border:1px solid #FB0B28;}
    .menu ul li ul li a{white-space:pre-wrap; line-height: 1.5em; padding:10px;}
}
@media (max-width: 576px) {
    .menu ul li{ display: block; width:100%; background: rgba(255,255,255, .2); margin: 2px;}
}

JS:
if($(window).width()<992){
        $(".navbar-toggler").click(function(){slidermenu()});
}
var slidermenu =function(){
    $(".menu").slideToggle("slow");
}

admin

DIV:
<div class="menu">$func_menu(pos=0,divi=none)$</div>
CSS:
.menu{ width:40px; height:40px; margin-top:18px; position:fixed; top:10px; right:10px; z-index:1000; background:#00579A; border-radius:6px;}
.menu:before{content:''; height:4px; width:20px; background:#fff; display:block; position:absolute; top:10px; left:10px; box-shadow:0 8px #fff, 0 16px #fff;-webkit-box-shadow:0 8px #fff, 0 16px #fff;-moz-box-shadow:0 8px #fff, 0 16px #fff; }
.menu ul{ float:right; display:none; width:280px; position:absolute; z-index:1000; top:60px; right:-10px; background:#fff; border:10px solid #00579A; padding:10px;}
.menu ul li{ float:left; width:50%;}
.menu ul li a{ display:block; font-size:16px; line-height:30px; border-bottom:1px solid #f8f8f8; text-align:center;}
.menu:hover ul{ display:block;}