我希望我的菜單圖標重疊的菜單

menu-icon http://i64.tinypic.com/2dqvr12.png

，單擊時打開此sidenav菜單...

sidenav http://i67.tinypic.com/2ytsp60.png

但是我不想用那個芝士'x'來關閉它，我想用相同的圖標來打開它，所以我想要做的就是在它彈出時代替sidenav與圖標重疊時重疊sidenav，但是我只是不知道如何。

/* General */ 
 
body{ 
 

 
    background-color: #555; 
 
    margin: 0; 
 
    padding: 0; 
 

 
} 
 

 
img{ 
 
    max-width: 100%; 
 
    height: auto; 
 
    width: auto; 
 
} 
 

 
@font-face{ 
 
    font-family: selfish; 
 
    src: url(assets/SELFISH_.TTF); 
 
} 
 

 
a { 
 
    font-family: selfish; 
 
} 
 

 
/* Header */ 
 
#main #header { 
 
    position: fixed; 
 
    background-color: #333; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    vertical-align: top; 
 
    /*height: 105px;*/ 
 
    /*height: 15%;*/ 
 

 
    /*box-shadow: 10px 0px 5px black;*/ 
 
} 
 

 
#main #header .header-logo{ 
 
    padding-bottom: 10px; 
 
    position: relative; 
 
    display: block; 
 
    margin-right: 50%; 
 
    margin-left: 40%;; 
 
    float: left; 
 
    
 
} 
 

 
    /*header menu icon*/ 
 
    #main #header .menu-icon div{ 
 
     width: 30px; 
 
     height: 3px; 
 
     background-color: white; 
 
     margin: 6px 0; 
 
     
 
     } 
 
    #main #header .menu-icon{ 
 
     margin-left: auto; 
 
     margin-right: 20px; 
 
     margin-top: 20px; 
 
     display: block; 
 
     width: 30px; 
 
     height: 36px; 
 
     
 
     position: relative; 
 
     
 
     cursor: pointer; 
 
    } 
 
    
 
/* Side navigation */ 
 
.sidenav { 
 
    height: 100%; 
 
    width: 0; 
 
    position: relative; 
 
    z-index: 12; 
 
    top: 0; 
 
    float: right; 
 
    margin-left: auto; 
 
    margin-right: 0; 
 
    background-color: #111; 
 
    overflow-x: hidden; 
 
    transition: 0.5s; 
 
    padding-top: 60px; 
 
    padding-bottom: 100%; 
 
    display: block; 
 
} 
 

 
.sidenav a { 
 
    padding: 8px 8px 8px 32px; 
 
    text-decoration: none; 
 
    font-size: 40px; 
 
    color: white; 
 
    display: block; 
 
    transition: 0.3s 
 
} 
 

 
.sidenav a:hover, .offcanvas a:focus{ 
 
    color: #A42626; 
 
} 
 

 
.closebtn { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 25px; 
 
    font-size: 60px !important; 
 

 
} 
 

 
@media screen and (max-height: 450px) { 
 
    .sidenav {padding-top: 15px;} 
 
    .sidenav a {font-size: 18px;} 
 
}

<body> 
 

 

 
<div id="mySidenav" class="sidenav"> 
 
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">x</a> 
 
    <a href="#">Home</a> \t \t 
 
    <a href="#">Ballroom</a> \t \t 
 
    <a href="#">Restaurant</a> 
 
     <a href="#" style="margin-left: 35px; font-size: 25px;">Menu</a> \t \t 
 
    <a href="#">Catering</a> \t \t \t 
 
    <a href="#">Contact</a> \t \t \t 
 
</div> 
 
    
 
<div id="main"><!--Start main div_____________________________--> 
 
    <!--Header--> 
 
    <div id="header"> 
 
     <img class="header-logo" src="images/header-logo_png_checkered-compressed-short.png"/> 
 
     <div class="menu-icon" onclick="openNav()"> 
 
       <div></div> 
 
       <div></div> 
 
       <div></div>     
 
     </div> 
 

 
    </div> 
 

 

 
    
 
    
 
    
 
</div> <!--End of main div______________________________--> 
 

 
    
 

 
<script> 
 
function openNav() { 
 
    document.getElementById("mySidenav").style.width = "250px"; 
 
} 
 

 
function closeNav() { 
 
    document.getElementById("mySidenav").style.width = "0"; 
 
} 
 
</script> 
 

 
</body>

來源

2016-03-14 Julian Hernandez

你要全屏觀看的片段，計算器的UI元素覆蓋菜單圖標和X –

片段中的代碼有效，我可以在沒有問題的情況下打開和關閉導航欄，問題到底是什麼？ – Xposedbones

@Xposedbones我不想用那個便宜的'x'來關閉它，我想用同樣的菜單圖標來打開它關閉它，但無論我嘗試什麼，sidenav總是重疊圖標 –

打破菜單圖標出了頭，讓您可以疊加的標題和圖標之間的sidenav，那麼就解決目前它是該圖標，並給它一個更高z-index比side-nav（至少13）。最後更新你的JS切換而不是隻是打開。

var navOpen = false; 

function toggleNav() { 
    if (navOpen) { 
    closeNav(); 
    navOpen = false; 
    } else { 
    openNav(); 
    navOpen = true; 
    } 
} 

function openNav() { 
    document.getElementById("mySidenav").style.width = "250px"; 
} 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
}

https://jsfiddle.net/pv9f2qwm/

退房搗鼓了完整的工作方案。

編輯：或者，如果您希望標題停留在側邊導航欄頂部，您可以保持原樣，並且只需添加切換代碼並將13的z索引添加到標題中，就像這樣小提琴： https://jsfiddle.net/qv12nwe8/

來源

2016-03-14 23:05:08

你走了。 https://jsfiddle.net/jwtf6fad/1/

使用相同的代碼存在於頭:)

.menu-icon div{ 
    width: 30px; 
    height: 3px; 
    background-color: white; 
    margin: 6px 0; 

    } 
.menu-icon{ 
    margin-left: auto; 
    margin-right: 20px; 
    margin-top: 20px; 
    display: block; 
    width: 30px; 
    height: 36px; 

    position: relative; 

    cursor: pointer; 
} 
#mySidenav .menu-icon{ 
    margin-top: 0; 
    position: absolute; 
    right: 0; 
    top: 14px; 
}

和重用的代碼位

<div class="menu-icon" onclick="closeNav()"> 
    <div></div> 
    <div></div> 
    <div></div>     
</div>

來源

2016-03-14 23:06:42 Xposedbones

我希望我的菜單圖標重疊的菜單

回答

相關問題