dxt_9668
一锅小青蛙
采纳率70.4%
2016-09-09 08:24 阅读 2.3k
已采纳

easyui layout遮挡导航菜单下拉框

3

如题,我把导航条放入了easyui latout north中,但导航条中的下拉菜单不能漂浮出div层,发现原因就是加了region=“north”,该怎么解决?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2016-09-09 08:38

    layout布局的容器都增加了overflow:hidden,超出范围就会被隐藏,要单独给north版块容器设置overflow auto

     $(function(){
     //注意如果layout容器不是body修改选择器
    $(document.body).layout('panel','north').parent().css('overflow','auto')
    });
    

    上代码放到easyui框架下,不能放前面,同时你的z-index要设置大一些,至少10以上

    点赞 评论 复制链接分享
  • dxt_9668 一锅小青蛙 2016-09-09 09:00
     <body class="easyui-layout">
        <!-- header -->
        <div class="header_full w_100" region="north" >
             <script>
                 $(function () {
                    //注意如果layout容器不是body修改选择器
                     $(document.body).layout('panel', 'north').parent().css('overflow', 'auto');
                 });
             </script>
            <div class="header">
                <!-- top_left | logo -->
                <div class="logo f_l"> </div>           
                <!-- top_right -->
                <div class="top_right f_r">
                    <!-- menu -->
                    <div class="nav_bar">
                        <ul class="nav clearfix">
    
                            <!-- 单一菜单 | end -->
                            <li class="m">
                                <h3><a href="#" >首页</a></h3>
                            </li>
                            <li class="s">|</li>
    
                            <li class="m">
                                <h3><a target="_blank" href="#">查询统计</a></h3>
                                <ul class="sub">
                                <li ><a href="#">设备查询</a> </li>
                                </ul>
                            </li>
                            <li class="s">|</li>
    
                            <li class="m">
                                <h3><a target="_blank" href="#" >基础数据</a></h3>
                                <ul class="sub">
                                 <li ><a href="#">设备添加</a> </li>
                                 <li ><a href="#">设备绑定</a> </li>
                                 </ul>
                            </li>
                            <li class="block"></li><!-- 滑动块 -->
    
                        </ul>
                    </div>
                    <!-- menu | end -->
                </div>
            </div>
        </div>
        <!-- header | end -->
        <div region="center" style="width:200px">sadaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    </body>
    
     .header_full{height:47px; border-bottom:1px solid #51AACA;}
            .header{width:x;}
                /* left */
                .logo{width:210px; padding-top:27px; padding-left:66px;}
                .logo360{width:81px; padding-top:27px;}
                /* right */
                .top_right{width:748px;}
                    /* top_link */
                    .top_link{padding-top:24px; height:26px; line-height:26px; padding-right:35px; text-align:right;}
                        .top_link i{color:#686868;}
                        .top_link span,.top_link a{color:#46AAFE;}
                        .top_link a{font-size:13px;}
                        .top_link a:hover{text-decoration:underline;}
                    /*  nav */
                    .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
                        .nav_bar{position:relative; z-index:999; height:32px; line-height:42px; color:#333;padding-top:5px;}
                            .nav{position:relative; width:748px; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px;}
                                .nav a{color:#333;}
                                .nav h3{font-size:100%; font-weight:normal;}
                                    .nav h3 a{display:block; width:120px; text-align:center; font-size:14px;}
                                .nav .m{float:left; position:relative; z-index:1;}
                                .nav .s{float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px;}
                                .nav .sub{display:none; position:absolute; left:-3px; top:42px; z-index:999; width:128px; border:1px solid #E6E4E3; border-top:0;  background:#fff;}
                                    .nav .sub li{text-align:center; padding:0 8px; margin-bottom:-1px;}
                                    .nav .sub li a{display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;}
                                    .nav .sub li a:hover{color:#1E95FB;cursor:pointer;}
                                    .nav .block{height:3px; width:126px; background:#1E95FB; position:absolute; left:0; top:39px; overflow:hidden;}
    
                                    /* 重用类样式 */
    .f_l{float:left !important;}
    .f_r{float:right !important;}
    .no_margin{margin:0px !important;}
    .no_border{border:0px !important;}
    .no_bg{background:none !important;}
    .clear_both{clear:both !important;}
    .display_block{display:block !important;}
    .text_over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding: url('ellipsis.xml#ellipsis');}
    
    
    /* 重用自定义样式 */
    .w_100{width:100%;}
    .w_95{width:95%;}
    .indextx{width:980px;margin:0 auto; margin-top:10px; background:#FFFFFF;}
    .w_min_width{min-width:1200px;}
    .w_1200{width:1200px;}
    .w_1067{width:1067px;}
    .w_980{width:980px;}
    

    求大神帮忙再看看,我这里还是不行。而且我这里最后显示效果如下图
    图片说明
    图片说明

    是有scrolling的,好像不是overflow:hidden吧,麻烦您了

    点赞 评论 复制链接分享

相关推荐