当手机上点击下拉菜单时，将容器保持在原位

每次点击“汉堡徽标”时，我的容器被推下几个像素，我希望“nav-list”将自己放在容器上方，以便当用户点击徽标时，容器保持原位，而列表项只浮在顶部。我尝试了从“position：absolute”到“z-index：100”的所有内容，似乎没有任何效果。请尝试在“检查元素”中打开它并转到“iPhone 6 plus -vertical”视图并进行测试，您将看到“Open Touch”向下移动。这里是我的代码：当手机上点击下拉菜单时，将容器保持在原位

演示：

http://codepen.io/anon/pen/xqMrRy

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
     <title>Open Touch</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&amp;subset=latin" rel="stylesheet"> 

     <link href="https://fonts.googleapis.com/css?family=Nunito:700" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Baloo" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 


     <link rel="stylesheet" type="text/css" href="magicstyle.css"> 

     </head>  
     <body> 
      <!-- Section for Jobs Popup --> 
      <div id="top-bar"> 
        <a id="burger-nav"></a> 
        <ul id="nav-menu" class="blah"> 
        <li id="job" class="testAgain">Jobs</li> 
        <li id="contact" class="testAgain">Contact</li> 
        <li id="press" class="testAgain">Press</li> 
        <li id="legal" class="testAgain">Legal</li> 
        <li id="support" class="testAgain">Support</li> 


       </ul> 
       </div> 

      <div id="container"> 


       <div id="name-div"> 
       <h1 id="name">Open Touch</h1> 
       </div> 


      </div> 



     </body> 





</html>

的CSS

  @font-face{ 
       font-family: 'custom'; 
       src: url('HelveticaNeue.ttf'); 
      } 
      #top-bar{ 
       width:100%; 
       min-height: 5px; 
       background-color: #FFFFFF; 
       position: relative; 
       z-index: 3; 
       z-index: 101; 
       overflow: hidden; 

      } 
      #nav-menu{ 
       width: 100%; 
       height: 32px; 
       min-height: 5px; 
       list-style: none; 
       overflow: hidden; 
      } 
      #nav-menu li{ 
       float: left; 
       padding-right: 100px; 
       font-size: 1.2em; 
       position: relative; 
       top:0.6vh; 
       left:14%; 
       vertical-align: middle; 
       display: inline-block; 
       cursor: pointer; 
       -webkit-user-select: none; 
       -ms-user-select: none; 
       -moz-user-select: none; 
       -o-user-select: none; 

      } 

      #container{ 
       width: 100%; 
       height: 100vh; 
       background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%); 
       position: absolute; 
       left:0; 
       right:0; 
       overflow: hidden; 

      } 
      body { 
       width: 100%; 
       height: 100vh; 
       margin: 0; 
       padding: 0; 
       color:#262626; 
       overflow-y: hidden; 
       overflow-x: hidden; 
       font-family: 'custom'; 
      } 
      #name-div{ 
       margin-left:auto; 
       margin-right:auto; 
       width:80%; 
       position: relative; 
       top:27%; 
       z-index: 10; 
       -webkit-user-select: none; 
       -ms-user-select: none; 
       -moz-user-select: none; 
       -o-user-select: none; 

      } 
/* Start of Job css for popup and animation ------------------------------------------------------------------------------------------------------------- */ 
     #name{ 
       color:white; 
       font-size: 7em; 
       word-wrap: break-word; 
       z-index: 10; 
       text-align: center; 

      } 

@media screen and (max-width: 414px) { 
     #burger-nav{ 
     display: block; 
     width: 100%; 
     height: 40px; 
     background: url(burgerlogo.png) no-repeat 98% center; 
     background-size: 30px 30px; 
     background-color: white; 

    } 
    #burger-nav.show{ 
     background-color: #f97072; 
    } 
    #nav-menu{ 
     background-color: white; 
     margin: 0; 
     padding:0; 
     width: 100%; 
     height:100%; 
     overflow: hidden; 
     display: none; 


    } 
    #nav-menu.open{ 
     display: block; 
     z-index: 100; 
    } 

    #nav-menu li{ 
     float: none; 
     padding: 10px; 
     position: relative; 
     text-align: right; 
     top:0; 
     left:0; 
     cursor: pointer; 
     border-bottom: 0.1px solid #f8f9fb; 
     display: block; 
     font-weight: bold; 

    } 
    #nav-menu li:hover { 
     background-color: #f8f9fb; 
    } 
    #name-div{ 
     position: absolute; 
     top: 40%; 
     left: 0%; 
     z-index: 10; 
     -webkit-user-select: none; 
     -ms-user-select: none; 
     -moz-user-select: none; 
     -o-user-select: none; 

      } 
    #name{ 
     font-size: 4em; 
    } 
    #name.show{ 
     position: relative; 
     bottom: 40px; 
    } 

}

Java脚本的

// document.getElementById("burger-nav").onclick = function() { 
     // var menu = document.getElementById("nav-menu"); 
     //menu.classList.toggle("open"); 
    //} 

    $("document").ready(function() { 


     document.getElementById("burger-nav").onclick = function() { 
      var menu = document.getElementById("nav-menu"); 
       menu.classList.toggle("open"); 
     } 
     $(".testAgain").click(function() { 
      $("#burger-nav").css("background-color", "#f97072"); 
      $(".blah").removeClass("open"); 
     }); 
    });

来源

2017-04-02 Jagr

首先，您需要absolute位置菜单，它将从布局中移除并且不会影响其后的元素位置。

其次，该菜单当前位于您已设置的父元素overflow:hidden。这就是为什么它看起来像z-index正在使内容显示在内容的下面，实际上它只是完全超越了溢出。

第三，ul具有100%指定height AND 32px即它收缩到其仅〜1列表项高的容器的大小。

http://codepen.io/anon/pen/jBdwva

来源

2017-04-02 06:40:59 Charlie

非常感谢你 – Jagr

当手机上点击下拉菜单时，将容器保持在原位

回答

相关问题