2 dxt 9668 dxt_9668 于 2016.09.09 16:24 提问

easyui layout遮挡导航菜单下拉框

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

2个回答

showbo
showbo   Ds   Rxr 2016.09.09 16: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
dxt_9668   2016.09.09 17: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吧,麻烦您了

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
jQuery easyui下拉菜单被layout遮挡-CSDN论坛
在使用easyui-layout的时候会先想办法把边框去掉去掉之后你可能开发完了要做个登录信息什么的,像头像点击下拉菜单,这个时候你会发现下拉出来的菜单被什么东西挡住了,一般都会认为是下面的内容挡住了上面的内容,然后作死的去修改z-index,发现还是没有用,我们把边框加上就知道了为什么没有用了这个问题解决的办法只有一个,就是不用easyui-layout的头部属性data-options=&quot;re...
使用easyui layout 布局的时候部分页面遮住的解决办法
在项目里写页面用到了easyui layout 布局,查询条件增加之后 layout data-options=”region:’north’” 这个布局框不会自动计算值导致新增加的查询条件被下方datagrid遮住了,但是屏幕够宽的话是可以正确显示的,想到的解决办法是给div 设置个min-height 值,这个值是在前台调试出来的240px 之后在页面显示的样式 但是这样设置CSS之后还有个问
jquery-easyui中轻松建立下拉菜单
easyui中建立下拉菜单很简单,定义菜单栏和菜单的MARKUP,然后用jQuery让其运转起来。先看一个例子的效果图:现在来看菜单栏怎么定义:Html代码 <a title="复制代码" onclick="function onclick(){dp.sh.Toolbar.CopyToClipboard(this);return false;}" href="h
不被框架挡住的下拉菜单
框架优先级高于层,createPopup创建的窗口优先级高于框架,因此可以用它实现不被框架挡住的菜单。代码示例如下:  var oPopup = window.createPopup(); function showMenu() { var oPopBody = oPopup.document.body; oPopBody.style.backgroun
easyui中layout、accordion加tabs实现简单菜单布局实例
一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块,如下图所示,分别有:North、East、South、West、Center其中比较特殊的是Center这块区域,它是不固定的,会随着四块区域的变化而做出相应的调整。比如将West向左缩小10px,那么Center则会向West方向扩张10px。其实这个easyUI已经帮我们实现好了,我们只需要
easyui之菜单导航切换Tab
1, 主页HTML 引包 DIV设置north(上,标题)south(下)west(左,菜单)east(右)center(居中,主工作区,Tab选项卡)                                                  首页                       2, 主页JS 菜单
easyui控件与Activex控件遮挡问题
最近在开发easyui控件过程中遇到了下拉框combobx控件被activex控件遮挡的问题,在网上查找了半天都是说添加iframe(),试了半天,还是不行。最后耐着性子在页面页码和jquery.easyui.min.js源码里结合找问题。最后在两个地方加入iframe起到作用。 两个地方分别是1、combo初始化控件时 2、combo加载数据项时 如果在这两个地方分别加入iframe 就能达
easyui左侧导航菜单右侧载入百度地图项目框架
代码下载 http://pan.baidu.com/s/1cDht7K 一个左侧是导航菜单,右侧是百度地图的应用; 一 左侧菜单 使用jquery easyui框架;网上下的资源;运行后如下; 二 修改菜单 修改后如下;标注,地理要素,数据管理;这些是GIS功能; 三 jquery  easyui框架是这么用的; 单击左侧不同菜单;链接到
easyUI中两个layout之间元素的拖拽(draggable)或节点被覆盖的原因
Easy
jquery-easyui弹出对话框被ActiveX控件遮挡
jquery-easy-ui弹出对话框被ActiveX控件遮挡