Question

我是网络开发的初学者。我正在尝试使用Google地图创建一个网站，我还想在左侧滑入和滑出一个菜单。问题是：当菜单进入时，它会将地图推低，而不是像它应该的那样覆盖它。使菜单滑动的CSS似乎也不能正常工作，这意味着它不会“滑动”。

我搜索了很多，尝试了很多东西，但我似乎无法使它工作。导航菜单称为“菜单”，包含地图的div称为“地图”。

任何帮助表示赞赏，请保持简单。谢谢。

这是我的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">&#9776;</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;
}

Answer 1

~~删除位置：绝对;关闭.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;
  }

这可能会导致调整地图时出现问题 - 发布JSFiddle将有助于每个人排除故障。

Answer 2

此解决方案非常简单，当您按下按钮时，菜单实际显示在正确的位置。问题是它似乎低于地图。

给.menu类一个z-index为1，菜单将自己定位在地图前面。

.menu {
    z-index: 1;
}

HTML，尝试在左侧创建一个滑动菜单（带截图）

2 个答案: