HTML，尝试在左侧创建一个滑动菜单(带有屏幕截图）

HTML, trying to create a sliding menu on the left (with screenshots)

本文关键字：一个 菜单 屏幕截图 创建 HTML      更新时间：2023-09-26

我是Web开发的初学者。我正在尝试使用谷歌地图创建一个网站，我还想要一个菜单在左侧滑入和滑出。问题是：当菜单进入时，它会将地图推得更低，而不是像它应该的那样覆盖它。此外，使该菜单滑动的CSS似乎无法正常工作，这意味着它不会"滑动"。

菜单隐藏：https://i.stack.imgur.com/0wiY3.jpg

菜单显示： https://i.stack.imgur.com/a9SNb.jpg

我搜索了很多，尝试了很多东西，但我似乎无法让它工作。导航菜单称为"菜单"，包含地图的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;
}

删除位置：绝对; 关闭 .菜单，它可以工作。

编辑：

#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 将有助于每个人进行故障排除。

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

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

.menu {
    z-index: 1;
}
相关文章：