我是网络开发的初学者。 我正在尝试使用谷歌地图创建一个网站，我还想要一个在左侧滑入和滑出的菜单。 问题是:当菜单进入时，它会将 map 推低，而不是像它应该的那样覆盖它。此外，使该菜单滑动的 CSS 似乎无法正常工作，这意味着它不会“滑动”。
隐藏的菜单:http://imgur.com/UIiYsXf
我搜索了很多，尝试了很多东西，但我似乎无法让它发挥作用。 导航菜单称为“菜单”，包含 map 的 div 称为“ map ”。
感谢任何帮助，请保持简单。谢谢。
这是我的 HTML 代码:
<% @page_title = "Main Page" %>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<title>Google Map Demo</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" id="menuToggle"> <label for="menuToggle" class="menu-icon">☰</label>
<div id = "qne_header"> TITLE</div>
<nav class="menu" >
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">WORK</a></li>
<li><a href="#">INSPIRATION</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
<div id="map"></div>
<script>
var resize_flag=true;
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 40.53, lng: 22.88},
zoom: 8,
disableDefaultUI: true
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCyRSefwx9vuhCMEOLrxXsinO2efTsf4K4&callback=initMap"
async defer></script>
</body>
</html>
这是我的 CSS 代码:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
#qne_header{
height : 5%;
background-color: #b3e6ff;
text-align: center;
font-size: 200%;
}
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
a {
text-decoration: none; color:#00a5cc;
}
nav {
width:10%;
text-align:center;
}
nav a {
display:block; padding: 15px 0; border-bottom: 1px solid #C3AA6E; color:#F0EADC;
}
nav a:hover {
background:#E5DAC0; color :#FFF;
}
nav li:last-child a {
border-bottom:none;
}
.menu-icon {
padding:10px 20px;
background:#FFFFFF; color:#987D3E;
cursor:pointer;
float:left;
margin-top:4px;
border-radius:5px;
margin-top: 5px;
}
#test{
position:relative;
}
#menuToggle { display:none; }
#menuToggle:checked ~ .menu {
position:absolute;
left:0px;
}
.menu {
width: 240px;
left: -240px;
position:absolute;
background:#FFFFFF;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
li {
list-style-type:none;
}
最佳答案
移除position:absolute;离开 .menu 就可以了。
编辑:
#map{ z-index: -1; }
这允许 map 位于标题/菜单部分下方。
#map {
position:absolute;
height: 99%;
width: 100%;
margin: auto;
transition: all .3s ease-in-out;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
z-index: -1;
}
这可能会导致调整 map 时出现问题——发布 JSFiddle 将帮助大家解决问题。
关于javascript - HTML，试图在左侧创建一个滑动菜单(附截图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36137222/