我希望我的菜单图标与汉堡菜单重叠
[英]I want my menu icon to overlap the hamburger menu
问题描述
I have this menu icon on my site... 
我的网站上有这个菜单图标...
that when clicked opens this sidenav menu... 单击该按钮将打开此sidenav菜单...
But instead of using that cheesy 'x' to close it, I want to use the same icon to open it, so what I want to do is have it overlap the sidenav when it pops out instead of the sidenav overlapping the icon, but i just cant find out how. 但是我不想使用那个俗气的“ 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> <a href="#">Ballroom</a> <a href="#">Restaurant</a> <a href="#" style="margin-left: 35px; font-size: 25px;">Menu</a> <a href="#">Catering</a> <a href="#">Contact</a> </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>
2 个解决方案
解决方案1
0 已采纳 2016-03-14 23:05:08
Break the menu icon out of the header so that you can layer the sidenav between the header and the icon, then just fix the icon where it currently is, and give it a higher z-index than the side-nav (at least 13). 将菜单图标从标题中断开，以便可以在标题和图标之间分层sidenav，然后仅将图标固定在当前位置，并为其提供比side-nav更高的z索引（至少13） 。 Lastly update your JS to toggle instead of just open. 最后，更新您的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/ https://jsfiddle.net/pv9f2qwm/
Check out the fiddle for the full working solution. 查看小提琴以获得完整的工作解决方案。
EDIT: Alternatively, if you want the header to stay on top of the side nav you can leave the HTML as is, and just add the toggle code and add a z-index of 13 to the header, like in this fiddle: https://jsfiddle.net/qv12nwe8/ 编辑：或者，如果您希望标题保留在侧面导航上方，则可以保留HTML，而只需添加切换代码并向标题添加13的z-index，就像下面的小提琴一样： https： //jsfiddle.net/qv12nwe8/
解决方案2
0 2016-03-14 23:06:42
There you go. 妳去 https://jsfiddle.net/jwtf6fad/1/ https://jsfiddle.net/jwtf6fad/1/
Use the same code that is present in the header :) 使用标题中存在的相同代码：)
.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;
}
and reuse that bit of code 并重用那段代码
<div class="menu-icon" onclick="closeNav()">
<div></div>
<div></div>
<div></div>
</div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.