每次点击“汉堡徽标”时，我的容器都会被按下几个像素，我希望“导航列表”将其自身定位在容器上方，这样当用户点击徽标时，容器就会停留在原位而列表项只是漂浮在它们之上。我尝试了从“position：absolute”到“z-index：100”的所有内容，似乎没有任何效果。 请尝试在“检查元素”中打开它并转到“iPhone 6 plus -vertical”视图并测试，您将看到“Open Touch”向下移动。 这是我的代码：
演示：
<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&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>
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;
}
}
的CSS
// 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");
});
});
Java脚本
.val()答案 0 :(得分：0)
首先，您需要 <ul class="nav side-menu">
<li <?php if($this->uri->segment(2)=='dashboard'){echo 'class="active"';}?>><a><i class="fa fa-dashboard"></i> Dashboard<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu"<?php if($this->uri->segment(2)=='dashboard'){echo 'style="display-block"';}?> >
<li><a href="<?php echo base_url();?>admin/dashboard">Dashboard </a></li>
</ul>
</li>
<li <?php if($this->uri->segment(2)=='document' || $this->uri->segment(2)=='field' ){echo 'class="active"';}?>><a><i class="fa fa-check-square"></i> Application<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu" <?php if($this->uri->segment(2)=='document' || $this->uri->segment(2)=='field' ){echo 'style="display:block"';}?>>
<li><a href="<?php echo base_url();?>admin/document">Applicant List</a></li>
<li><a href="<?php echo base_url();?>admin/document/add">New Case Entry</a></li>
<li><a href="<?php echo base_url();?>admin/document/uploadbulk">Bulk Data Upload</a></li>
</ul>
</li>
</ul>
定位菜单，以便从布局中移除它，而不会影响其后元素的位置。
其次，菜单当前位于您已设置absolute的父元素中。这就是为什么看起来overflow:hidden正在让它显示在内容之下，而实际上它只是完全超出溢出范围。
第三，z-index有一个ul和height的指定100%缩小到容器的大小，只有大约1个列表项。