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

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

 找回密码
 立即注册
查看: 2809|回复: 9

MenuList.CSS示范脚本

[复制链接]
发表于 2014-8-4 09:10:10 | 显示全部楼层 |阅读模式
示范脚本一:模板39样式,菜单HOVER时与当前下拉菜单同色
.menu{ background:url(bgmenu.gif) repeat-x; height:40px; border-bottom:5px solid #000;}
.menu ul li{ float:left; display:block; height:40px; width:136px; text-align:center; position:relative;}
.menu ul li:hover{ background:#000; color:#fff;}
.menu ul li:hover a{ color:#fff;}
.menu ul li a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px;}
.menu ul li ul{ display:none;}
.menu ul li ul .li1{ border-left:0;}
.menu ul li ul li a{ background:#000; color:#fff;}
.menu ul li ul li a:hover{ background:#333;}
.menu #split{ width:1px; overflow:hidden; background:#ccc;}
.menu #split1,.menu #split2{ display:none;}
.menu .Li0,.menu .li1{ border-left:1px solid #ccc;}
.menu .sela,.menu a:hover{ background:#000; color:#fff;}
菜单代码:
<div class="menu"><div class="bar">$func_menu(pos=0,divi=null,sub=yes)$</div></div>
<script type="text/javascript">
  jQuery(function(){
   jQuery(".menu ul li").hover(function(){
  jQuery(this).children("ul").show();
   },function(){
  jQuery(this).children("ul").hide();
   })
  })
</script>
注解:勿忘调用jquery.js,否则会无法显示下拉效果。

弘帝框架改进版本,须载入hondy框架,实现单行下拉菜单,鼠标Hover变色,小于992px自动切换成右上部固定菜单按纽,自适应各分辨率显示设备。
DIV:
<div class="menu">
    <div class="container">$func_menu(pos=0,divi=none,sub=1)$</div>
</div>
<button class="navbar-toggler" type="button"></button>
CSS:
.menu{background-color:#3385ff}
.menu ul li a{color:#fff;text-align:left}
.menu ul .on a,.menu ul li a:hover{background-color:#2e78e7}
.menu ul li:hover{background:#2e78e7}
.menu ul li:hover a{color:#fff}
.menu ul ul{background:#2e78e7}
.menu ul ul li a{padding-left:0;padding-right:0}
.menu ul ul li a:hover{background:#3385ff}
@media (max-width:992px){
.navbar-toggler{display:inline-flex;position:fixed;z-index:2000;top:25px;right:20px;background:#3385ff;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:column wrap;padding:10px}
}
JS:
$(function () {    if ($(window).width() < 992) {
        $(".menu ul").find("ul").remove();
        $(".navbar-toggler").click(function () {
            slidermenu();
        });
    }
    var slidermenu = function () {
        $(".menu").slideToggle("slow");
    }
    var o = $(".menu ul .on");
    $(function () {
        $(".menu ul li").hover(function () {
            o.removeClass();
            $(this).children("ul").slideDown()
        }, function () {
            o.addClass("sela");
            $(this).children("ul").slideUp()
        })
    })
}
回复

使用道具 举报

 楼主| 发表于 2014-8-19 19:08:35 | 显示全部楼层

示范二:透明下拉方案:
弘帝ZHG
<div class="menu"><div class="bar">$func_menu(pos=0,divi=null,sub=yes)$</div></div>
配合弘帝JS,实现下拉效果。
<script type="text/javascript">
  jQuery(function(){
          jQuery(".menu ul li").hover(function(){
                jQuery(this).children("ul").show();
          },function(){
                jQuery(this).children("ul").hide();
          })
  })
</script>
弘帝CSS
.menu{ background:url(bgmenu.jpg) repeat-x; height:40px;}
.menu ul li{ float:left; display:block; height:40px; width:136px; text-align:center; position:relative;}
.menu ul li:hover{ background:url(menuhover.jpg) no-repeat center top; color:#fff;}
.menu ul li:hover a{ color:#fff;}
.menu ul li a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px; color:#fff;}
.menu ul li ul{ display:none;}
.menu ul li ul li a{ background:#005c93; color:#fff; filter:alpha(opacity=90); opacity:0.9;}
.menu ul li ul li a:hover{ background:#000;}
.menu #split{ width:1px; background:url(split.png) no-repeat;}
.menu #split1,.menu #split2{ display:none;}
.menu .sela,.menu a:hover{ background:url(menuhover.jpg) no-repeat center top;}
通过IE,Chrome浏览器,只需调整透明度,背景,宽度,即可实现千变万化的,五颜六色的下拉菜单。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-10-16 19:37:43 | 显示全部楼层
未标题-1.jpg
示范三:不等宽度透明下拉方案,模板39
.menu{ background:url(bgmenu.jpg) repeat-x; height:40px;}
.menu ul .menutop{ float:left; display:block; height:40px; width:118px; text-align:center; position:relative;}
.menu ul .menutop:hover{ background:url(menuhover.jpg) no-repeat center top; color:#fff;}
.menu ul .menutop:hover a{ color:#fff;}
.menu ul .menutop a{ font-size:14px; font-weight:bold; display:block; line-height:40px; height:40px; color:#fff;}
.menu ul .menutop ul{ display:n1one;}
.menu ul .menutop ul li a{ background:#005c93; color:#fff; filter:alpha(opacity=90); opacity:0.9;}
.menu ul .menutop ul li a:hover{ background:#ff0; color:#000}
.menu #split{ float:left; display:block; width:1px; background:url(split.png) no-repeat;}
.menu #split1,.menu #split2{ display:none;}
.menu .sela,.menu a:hover{ background:url(menuhover.jpg) no-repeat center top;}
.menu ul .li3{ width:139px;}
.menu ul .li4{ width:99px;}
.menu ul li ul .li3,.menu ul li ul .li4{ width:auto;}
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-1-16 23:23:49 | 显示全部楼层
menu1.jpg
方案四:带外框的三级下拉菜单
DIV:$func_menu(pos=0,divi=null,sub=yes,border=3)$
JS:
<script type="text/javascript">jQuery(function(){jQuery(".menu .menutop li").hover(function(){jQuery(this).children(".SubMenu1").slideDown();},function(){jQuery(this).children(".SubMenu1").slideUp();})})</script>
CSS:
.menu{ height:47px;}
.menu ul{ display:inline-block; position:relative;}
.menu ul li{ float:left; display:block; height:47px;}
.menu ul li a{ display:inline-block; padding:10px 25px; font-size:14px;}
.menu ul li .SubMenu1{ display:none; position:absolute; top:47px; left:0; width:700px; min-height:160px;}
.menu ul li .SubMenu1 .Content1{ display:block; background:url(bgmenu.jpg) repeat-x; border-left:1px solid #E6E7EB; border-right:1px solid #E6E7EB; min-height:100px; padding-bottom:10px;}
.menu ul li .SubMenu1 .MenuBottom1{ display:block; background:url(menubtm.png) repeat-x bottom; height:10px;}
.menu ul li .SubMenu1 .Margin1{ margin:0 20px;}
.menu ul li:hover{ background:#E6E7EB;}
.menu ul li:hover .SubMenu1{ display:inline-block;}
.menu ul li .SubMenu1:hover li{ background:none;}
.menu ul li .SubMenu1 li{ float:left; display:block; height:auto; margin:5px 10px;}
.menu ul li .SubMenu1 li a{ display:block; height:25px; padding:0; margin:10px 0; color:#800; font-weight:bold;}
.menu ul li .SubMenu1 li a:hover{ text-decoration:underline;}
.menu ul li .SubMenu1 .SubMenu2{ display:block; position:relative; width:auto; clear:both;}
.menu ul li .SubMenu1 .SubMenu2 li{ display:block; clear:both; margin:0; text-indent:12px; background:url(0481.gif) no-repeat 0 7px;}
.menu ul li .SubMenu1 .SubMenu2 li a{ font-size:12px; color:inherit; font-weight:inherit; margin:0;}
.menu #split1,.menu #split2{ display:none;}
解说:border为数字值,目前最大值为3,未来陆续增加,用以生成带底部边框风格的菜单。
参考:模板(info)案例(blunt)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-6-19 15:47:22 | 显示全部楼层
绿色(Green107)示范脚本:
greenmenu.jpg
DIV:
<div class="menubar">$func_menu(css=Menu,pos=0,divi=null,sub=yes)$</div>
JS:
<script type="text/javascript">jQuery(function(){jQuery("#Menu ul li").hover(function(){jQuery(this).children("ul").slideDown();},function(){jQuery(this).children("ul").slideUp();})})</script>
CSS:
.menubar{ display:block; background:url(bgmenu.gif) repeat-x left top; height:38px;}
#Menu{ display:block; margin:0 auto; width:1000px; height:38px;}
#Menu ul{ display:block; padding-left:60px;}
#Menu ul li{ float:left; display:block; height:38px; position:relative}
#Menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; color:#fff; line-height:38px; font-weight:bold;}
#Menu ul li a:hover,#Menu ul li:hover,#Menu ul .sela{ background:url(menuhover.gif) repeat-x;}
#Menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#006633; text-align:left; position:absolute; z-index:99; top:38px; left:0; width:96px;}
#Menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0}
#Menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#fff; padding:0; margin:0; white-space:nowrap; padding-left:22px;}
#Menu .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none;}
#Menu .SubMenu2,#Menu .SubMenu2 li{ display:none;}
#Menu .SubMenu1 #split1{ height:0; line-height:0; font-size:0;}

改造效果:
hdgy.jpg
DIV2:
<div class="menu">$func_menu(pos=0,divi=null,sub=yes)$</div>
CSS2:
.menu{ float:left; display:block; margin:0 auto; position:absolute; bottom:0px; height:49px;}
.menu ul li{ float:left; display:block; height:45px; position:relative; border-top:4px #fff solid;}
.menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; height:45px; line-height:40px; font-weight:bold; border-left:1px solid #fff; border-right:1px solid #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sel a{ border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu ul li:hover,.menu ul .sel{ border-top:4px solid #060;}
.menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#063; text-align:left; position:absolute; z-index:10; top:45px; left:0; width:98px;}
.menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0; border:0;}
.menu .SubMenu1 li:hover,.menu ul li:hover .SubMenu1 li a{ border:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#fff; padding:0; margin:0; white-space:nowrap; padding-left:22px; border-left:1px solid #063; border-right:1px solid #063;}
.menu ul li:hover .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}
.menu .SubMenu1 #split1{ display:none;}

改造效果2:
未标题-1.jpg
.menu{ float:left; display:block; margin:0 auto; position:absolute; bottom:0px; height:49px;}
.menu ul li{ float:left; display:block; height:45px; position:relative; border-top:4px #fff solid;}
.menu ul li a{ float:left; display:block; padding:0 20px; font-size:14px; height:45px; line-height:40px; font-weight:bold; border-left:1px solid #fff; border-right:1px solid #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sel a{ border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu ul li:hover,.menu ul .sel{ border-top:4px solid #060;}
.menu .SubMenu1{ display:none; padding:5px 0 10px 0; background:#fff; text-align:left; position:absolute; z-index:10; top:45px; left:0; width:98px; border-bottom:5px solid #023B70;}
.menu .SubMenu1 li{ float:none; display:block; height:25px; line-height:25px; margin:0; padding:0; border:0;}
.menu .SubMenu1 li:hover,.menu ul li:hover .SubMenu1 li a{ border:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; padding:0; margin:0; white-space:nowrap; padding-left:22px; border-left:1px solid #eee; border-right:1px solid #eee;}
.menu ul li:hover .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}
.menu .SubMenu1 #split1{ display:none;}
回复 支持 反对

使用道具 举报

 楼主| 发表于 2015-6-20 08:16:56 | 显示全部楼层
红色三级菜单示例:
wuhucq.jpg
DIV:
<div class="menubar">$func_menu(css=Menu,pos=0,divi=null,sub=yes)$</div>
JS:
<script type="text/javascript"> jQuery(function(){jQuery(".menubar ul li").hover(function(){jQuery(this).children(".SubMenu1").slideDown();},function(){jQuery(this).children(".SubMenu1").slideUp();})})</script>
CSS:
#Menu{ text-align:center; height:32px; display:block;}
#Menu ul{ float:left; list-style-type:none; margin:0px; padding:0px; display:block;}
#Menu ul li{ float:left; display:block; height:32px; line-height:32px; position:relative;}
#Menu ul li a{ float:left; display:block; min-width:70px; padding:0px 20px; text-align:center; height:32px; line-height:32px; color:#FFF; font-size:15px; font-weight:bold;}
#Menu ul li a:hover{ background:url(btn.jpg) no-repeat center; color:#000;}
#Menu .sela{ background:url(btn.jpg) no-repeat center; color:#3b3939;}
#Menu #split{ width:3px; background:url(split.jpg) no-repeat center;}
#Menu .SubMenu1{ display:none; padding:10px; width:980px; background:#990002; text-align:left; position:absolute; z-index:99; left:-360px; top:32px; margin:0;}
#Menu .SubMenu1 li{ display:block; height:25px; width:980px; line-height:25px; margin:0; padding:0; clear:both; border-bottom:1px solid #800;}
#Menu .SubMenu1 li:hover{ background:#900000;}
#Menu .SubMenu1 li a{ display:block;; text-align:left; font-size:12px; height:25px; line-height:25px; color:#ff0; padding:0; margin:0; white-space:nowrap; padding-left:22px;}
#Menu .SubMenu1 li a:hover{ display:block; background:#000; color:#fff; text-decoration:none;}
#Menu  #split1,#Menu  #split2{ display:none;}
#Menu #Plus{ float:left; display:block; width:20px; height:32px;}
#Menu .SubMenu2{ display:inline;}
#Menu .SubMenu2 li{ float:left; display:block; clear:none; width:auto; border-bottom:0;}
#Menu .SubMenu2 li a{ font-weight:normal; color:#fff;}

参考:模板(cq)案例(wuhucqcomcn)
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-1-6 12:17:42 | 显示全部楼层
安瑞(anray)风格菜单
未标题-2.jpg
DIV:
<div class="menubar">
<div class="menu">$func_menu(pos=0,sub=1),divi=none$</div>
</div>

JS:
jQuery(function(){jQuery(".menu ul li").hover(function(){jQuery(this).children("ul").slideDown();},function(){jQuery(this).children("ul").slideUp();})})

CSS:
.menubar{background:#033689; background: linear-gradient(to bottom, #048FCB 0%,#033689 100%); background:-webkit-gradient(linear, left top, left bottom, from(#048FCB), to(#033689), color-stop(0.5, #1B438D)); text-align:center;}
.menu{ margin:0 auto; width:1000px; height:50px;}
.menu ul{ display:block; padding-left:60px;}
.menu ul li{ float:left; display:block; height:50px; position:relative; margin:0 5px;}
.menu ul li:hover,.menu ul .sel{ margin-top:5px; z-index:10; position:relative;}
.menu ul li a{ display:block; padding:0 30px; font-size:16px; color:#fff; line-height:50px;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul .sela{ background:#fff; color:#000; border-top-left-radius:4px; border-top-right-radius:4px;}
.menu .SubMenu1{ display:none; padding:0 0 20px 0; background:#FFF; text-align:left; position:relative; z-index:99; opacity:.9;}
.menu .SubMenu1 li{ float:none; display:block; height:30px; line-height:30px; margin:0; padding:0}
.menu .SubMenu1 li:hover{ margin:0;}
.menu .SubMenu1 li a{ float:none; display:block;; text-align:left; font-size:14px; height:30px; line-height:30px; color:#000; padding:0; margin:0; white-space:nowrap; padding-left:30px;}
.menu .SubMenu1 li a:hover{ background:#033689; color:#fff; border-radius:0;}
.menu .SubMenu2,.menu .SubMenu2 li{ display:none;}


回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-11-30 12:38:44 | 显示全部楼层

红色风格弹出一级子菜单

whstjs.jpg
DIV:
<div class="menu">$func_menu(pos=0,sub=1,divi=none)$</div>

CSS:
.menu{ height: 45px; text-align: center; background: #3A5396; border-bottom: 6px solid #DB402A;}
.menu .MenuCenter{ display: inline-block; margin-bottom: -3px;}
.menu ul li{ float:left;position: relative;}
.menu ul li a{ display: block; line-height: 45px; font-size: 14px; padding: 0 30px; color: #fff;}
.menu ul li a:hover,.menu ul li:hover a,.menu ul li .sela{background: #DB402A;}
.menu ul ul{display: none;position:absolute; z-index: 100;top: 45px;background: #DB402A; padding-bottom: 10px; border-bottom: 2px solid #FF0;}
.menu ul ul li{float: none;}
.menu ul ul li a{line-height: 38px;}
.menu ul ul li a:hover{background: #c00;}

JS1:当前菜单颜色随鼠标移动
$(function(){var o=jQuery(".menu ul li .sela");$(function(){$(".menu ul li").hover(function(){o.removeClass();$(this).children("ul").slideDown()},function(){o.addClass("sela");$(this).children("ul").slideUp()})})});
JS2:当前菜单颜色不随鼠标移动
$(function(){$(".menu ul li").hover(function(){$(this).children(".SubMenu1").slideDown();},function(){$(this).children(".SubMenu1").slideUp();})})
回复 支持 反对

使用道具 举报

 楼主| 发表于 2017-12-26 12:33:55 | 显示全部楼层

xyql菜单模板

xinyiql.jpg
DIV:
<div class="menu">$func_menu(pos=0,divi=none)$</div>
CSS:
.menu{float: left; width: 800px; text-align: right;}
.menu ul{display: inline-block; font-size: 0;}
.menu ul li{float: left;}
.menu ul li a{display: block; font-size: 16px; width: 96px; text-align: center; line-height: 60px;}
.menu .sel:after,.menu li:hover:after{ float: left; content: ""; width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #005A92;border-left:10px solid transparent;left: 50%;margin-left: -10px;position:relative;}
JS:
var o=$(".menu .sel");
$(function(){
"use strict";
$(".menu li").hover(function(){o.removeClass();},function(){o.addClass("sel");});
});
回复 支持 反对

使用道具 举报

 楼主| 发表于 2018-4-21 21:40:45 | 显示全部楼层

.bg-navyblue-tb

海蓝色导航:
<div class="bg-navyblue-tb"><div class="container">$func_menu(pos=0,divi=none,sub=yes)$</div></div>
dwhx.jpg
  1. .bg-navyblue-tb{background: linear-gradient(to bottom, #125792 0%,#05417f 50%,#04457b 100%); color: #fff;}
  2. .bg-navyblue-tb ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
  3. .bg-navyblue-tb ul li{ display: inline; position: relative; color:#fff;}
  4. .bg-navyblue-tb ul li.active{ background:#EB4000;}
  5. .bg-navyblue-tb ul li a{padding: 0 30px; line-height: 60px; color:inherit;}
  6. .bg-navyblue-tb ul li a b{display:inline-block; margin-left:8px; border-top: 5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent;}
  7. .bg-navyblue-tb ul li ul{display: none; background: #05417f; position: absolute; top:60px; z-index:2000; padding:0px 5px 15px 5px;}
  8. .bg-navyblue-tb ul li ul li{ display: block; color: #fff;}
  9. .bg-navyblue-tb ul li ul li a{ display: block; line-height: 40px; white-space: nowrap; border-bottom:1px solid #054688;}
  10. .bg-navyblue-tb ul li ul li a:hover{ background: #04376C;}
  11. .bg-navyblue-tb ul li:hover ul{ display: block;}
复制代码
模板:dw 案例:dwhx

响应式改进设计,建议Bootstrap环境
DIV:
<div class="bg-navyblue-tb">
<div class="container">
  <div class="menu col-lg-12">$func_menu(pos=0,divi=none,sub=yes)$</div>
  <button class="navbar-toggler" type="button"><span class="icon-reorder icon-x"></span></button>
</div>
</div>

CSS:
.bg-navyblue-tb{ background: linear-gradient(to bottom, #125792 0%,#05417f 50%,#04457b 100%); color: #fff;}
.bg-navyblue-tb ul{ display: flex; flex-flow: row nowrap; justify-content: center;}
.bg-navyblue-tb ul li{ display: inline; position: relative; color:#fff;}
.bg-navyblue-tb ul li.active{ background:#EB4000;}
.bg-navyblue-tb ul li a{padding: 0 30px; line-height: 60px; color:inherit; white-space: nowrap;}
.bg-navyblue-tb ul li a b{display:inline-block; margin-left:8px; border-top: 5px solid #fff; border-left:5px solid transparent; border-right:5px solid transparent;}
.bg-navyblue-tb ul li ul{display: none; background: #05417f; position: absolute; top:60px; z-index:2000; padding:0px 5px 15px 5px;}
.bg-navyblue-tb ul li ul li{ display: inline; color: #fff;}
.bg-navyblue-tb ul li ul li a{ display: block; line-height: 40px; border-bottom:1px solid #054688;}
.bg-navyblue-tb ul li ul li:last-child a{ border-bottom: 0;}
.bg-navyblue-tb ul li ul li a:hover{ background: #04376C;}
.bg-navyblue-tb ul li:hover ul{ display: block;}
.icon-reorder{ color: #fff;}
.link a{ padding: 0 10px; }
.menu{display:flex; flex-flow: row nowrap; justify-content: space-between;}
.navbar-toggler{display: none;}
@media (max-width: 1200px){
    .navbar-toggler{ display:block; position: fixed; z-index: 2000; top:5px; right: 20px; background: #05417f; border-radius: 5px; margin: 6px;}
    .menu{display:none; position: fixed; top: 50px; left: 0; z-index: 2000; background:#05417f;}
    .menu ul{ flex-flow:column wrap; }
    .menu ul li a{line-height: 40px;}
    .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: #05417f;}
    .menu ul li ul{left:110px; top:0; padding-top:5px; padding-bottom:5px; border:1px solid #054688;}
    .menu ul li ul li a{white-space:pre-wrap; line-height: 1.5em; padding:10px;}
}

JS:
$(function(){
    if($(window).width()<1200){
        $(".navbar-toggler").touch(function(){slidermenu()});
    }
})

var slidermenu =function(){
    $(".menu").slideToggle("slow");
}

存在的设计缺隐:dwhx
1、未实现touch,即手机hover功能
2、当菜单过长时,不能滚动菜单,导致无法显示所有的菜单项。
回复 支持 反对

使用道具 举报

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

本版积分规则

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

GMT+8, 2021-9-18 06:10 , Processed in 0.111006 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

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