Question

我尝试为我的移动网站创建一个所谓的“汉堡菜单”。我对下面代码的唯一问题是，当我点击按钮时，只有部分导航菜单可见，其余部分隐藏在div id="topnav-mobile"后面。

我认为使用z-index会有效，但显然我做错了。我应该在下面的代码中添加或删除哪些内容才能使其正常工作？

HTML

<div id="upper">    
    <div class="upper-mobile">
        <div class="upper-mobile-logo">
            <div class="mobile-nav">
                <div class="menu-btn" id="menu-btn">
                <div></div>
                <span></span>
                <span></span>
                <span></span>
                </div>

                <div class="responsive-menu">
                    <ul>
                        <li>Object 1</li>
                        <li>Object 2</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="upper-mobile-name">
            <img src="/images/logo-large.png"/>
        </div>
    </div>
</div>

<div id="topnav-mobile">         
    <div id="topnav-left-mobile">
        <div class="topnav-left-mobile-title">
            <a class="topnav-left-mobile-link" href="/"><b>HOME</b></a>
        </div>
        <div class="topnav-left-mobile-title">
            <a class="topnav-left-mobile-link" href="/nav2"><b>Nav2</b></a>
        </div>
    </div>
</div>

CSS：

#upper  { width:100%; height:auto; float:left; overflow:inherit; position:relative; }

.upper-mobile   { display:inherit; width:100%; float:left; overflow:hidden; position:relative; }
.upper-mobile-logo      { float:left; position:absolute; }
.upper-mobile-logo img  { float:left; position:relative; }
.upper-mobile-name      { float:left; }
.upper-mobile-name img  { position:relative; text-align:center; }

.menu-btn div   { position:absolute; left:100%; top:64%; padding-right:8px; margin-top:-0.50em; line-height:1.2; font-size:18px; font-weight:200; vertical-align:middle; z-index:99; }
.menu-btn span  { display:block; width:19px; height:3px; margin:4px 0; background:#F00; z-index:99; }
.responsive-menu{ display:none; position:relative; z-index:101; }
.expand         { display:block !important; position:relative; z-index:101; }

#topnav-mobile      { display:inherit; width:100%; float:left; position:relative; z-index:-1; }
#topnav-left-mobile     { display:inherit; width:100%; float:left; position:relative; z-index:-1;}
#topnav-left-mobile a:link  { position:relative; z-index:-1;}
#topnav-left-mobile a:visited   { position:relative; z-index:-1;}
#topnav-left-mobile a:hover     { position:relative; z-index:-1;}
#topnav-left-mobile a:active    { position:relative; z-index:-1;}
#topnav-left-mobile a:focus     { position:relative; z-index:-1;}
.topnav-left-mobile-title       { position:relative; z-index:-1;}
.topnav-left-mobile-link        { display:block; position:relative; z-index:-1;}

JS：

<script type="text/javascript">
    jQuery(function($){
         $( '.menu-btn' ).click(function(){
         $('.responsive-menu').toggleClass('expand')
         })
    })
</script>

Answer 1

.upper-mobile {
    display: inherit;
    width: 100%;
    float: left;
    padding: 0 0 0 0;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #000;
    overflow: hidden;
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    position: relative;
    height: 200px; // You need to add a height, your code is all over the place
}

您的上部手机不足以显示您的所有元素。我添加了一些高度来展示它。你的代码有点遍布，所以我的建议是清理它并减少它。

移动下拉菜单：部分隐藏在其他div后面：使用z-index不起作用

1 个答案: