Question

我的网站上有这个菜单图标...

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

单击时会打开此sidenav菜单...

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

但不是使用那种俗气的＆＃39; x＆＃39;要关闭它，我想使用相同的图标打开它，所以我想要做的是当它弹出时重叠sidenav而不是sidenav重叠图标，但我不知道如何。

＆＃13;

/* 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;}
}

＆＃13;

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

＆＃13;

Answer 1

将标题中的菜单图标分开，以便您可以在标题和图标之间对sidenav进行分层，然后只需将图标固定在当前位置，并为其提供比侧边导航更高的z-index（at至少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 个答案: