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，試圖在左側創建滑動菜單（帶截圖）

回答

相關問題