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

我是网页开发的初学者。我正尝试使用Google地图创建网站，并且我还希望在左侧滑入和滑出菜单。问题是：当菜单进入时，它将地图降低，而不是覆盖它，就像它应该。此外，使菜单滑动的CSS似乎不能正常工作，这意味着它不会“滑动”。HTML，试图在左侧创建滑动菜单（带截图）

菜单隐藏：http://imgur.com/UIiYsXf

菜单显示：http://imgur.com/3IFyJNF

我搜索了很多，尝试了非常多的东西，但我似乎无法使它发挥作用。导航菜单被称为“菜单”，包含地图的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; 
}

来源

2016-03-21 Tasos Anesiadis

~~删除的位置是：绝对的;关闭.menu，它的工作原理。~~

编辑：

#map{ z-index: -1; }

这允许地图是页眉/菜单部分的下方。

#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将帮助所有人解决问题。

来源

2016-03-21 17:33:27

谢谢，但它没有奏效。 –

@dyserone - 对不起，读错了解决方案是在编辑 –

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

给.menu类指定1的z索引，菜单将自己定位在地图的前面。

.menu { 
    z-index: 1; 
}

来源

2016-03-21 17:47:23 TcAcS

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

回答

相关问题