Javascript 当下拉菜单单击mobile时，使容器保持在原位_Javascript_Jquery_Html_Css_Media Queries

Javascript 当下拉菜单单击mobile时，使容器保持在原位

javascript jquery html css

Javascript 当下拉菜单单击mobile时，使容器保持在原位,javascript,jquery,html,css,media-queries,Javascript,Jquery,Html,Css,Media Queries,每次我点击“汉堡标志”时，我的容器都会被压下几个像素，我希望“导航列表”将其自身定位在容器上方，这样当用户点击标志时，容器会保持在原位，而列表项正好漂浮在容器上方。我尝试了从“位置：绝对”到“z指数：100”的所有方法，但似乎没有任何效果。请尝试在“inspect element”中打开它，然后进入“iPhone6 plus-垂直”视图并进行测试，您将看到“open Touch”向下移动。这是我的密码：演示： html Java脚本 // document.getElementByI

每次我点击“汉堡标志”时，我的容器都会被压下几个像素，我希望“导航列表”将其自身定位在容器上方，这样当用户点击标志时，容器会保持在原位，而列表项正好漂浮在容器上方。我尝试了从“位置：绝对”到“z指数：100”的所有方法，但似乎没有任何效果。请尝试在“inspect element”中打开它，然后进入“iPhone6 plus-垂直”视图并进行测试，您将看到“open Touch”向下移动。这是我的密码：

演示：

html

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"); 
        });
    });

首先，您需要

absolute

定位菜单，以便将其从布局中删除，并且不影响其后元素的位置

其次，菜单当前位于父元素中，您已将其设置为

overflow:hidden

。这就是为什么看起来

z-index

使它显示在内容下面，而实际上它完全超出了溢出的界限

第三，

ul

具有指定的

高度为100%
和32px
，这将其缩小到容器的大小，容器的高度仅为~1个列表项高
非常感谢
<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>

            @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;
    }

}

   // 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"); 
        });
    });