我希望我的菜單圖標與漢堡菜單重疊

Question

我的網站上有這個菜單圖標...

單擊該按鈕將打開此sidenav菜單...

但是我不想使用那個俗氣的“ 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>

Answer 1

將菜單圖標從標題中斷開，以便可以在標題和圖標之間分層sidenav，然后僅將圖標固定在當前位置，並為其提供比side-nav更高的z索引（至少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/

查看小提琴以獲得完整的工作解決方案。

編輯：或者，如果您希望標題保留在側面導航上方，則可以保留HTML，而只需添加切換代碼並向標題添加13的z-index，就像下面的小提琴一樣： https： //jsfiddle.net/qv12nwe8/

Answer 2

妳去 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>

我希望我的菜單圖標與漢堡菜單重疊

問題描述

2 個解決方案

解決方案1
0 已采納 2016-03-14 23:05:08

解決方案2
0 2016-03-14 23:06:42

我希望我的菜單圖標與漢堡菜單重疊

問題描述

2 個解決方案

解決方案1 0 已采納 2016-03-14 23:05:08

解決方案2 0 2016-03-14 23:06:42

解決方案1
0 已采納 2016-03-14 23:05:08

解決方案2
0 2016-03-14 23:06:42