我希望我的菜单图标重叠的菜单

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

我希望我的菜单图标重叠的菜单

回答

相关问题