请选择 进入手机版 | 继续访问电脑版

弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 3369|回复: 1

Menu.CSS示范脚本

[复制链接]
发表于 2017-5-23 08:05:12 | 显示全部楼层 |阅读模式
QQ图片20170523080439.png
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");
}

回复

使用道具 举报

 楼主| 发表于 2017-11-1 08:46:46 | 显示全部楼层

升级调整:将菜单固定在右上角,菜单每行两行。

mft.jpg
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;}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-3-29 20:36 , Processed in 0.108133 second(s), 19 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表