Я хочу, чтобы мой значок меню, чтобы перекрывать меню

У меня есть этот значок меню на моем сайте ...Я хочу, чтобы мой значок меню, чтобы перекрывать меню

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

, что при нажатии открывает это меню sidenav ...

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

Но вместо того, чтобы использовать этот cheesy '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

вы должны просмотреть фрагмент в полном объеме, охватывает элемент пользовательского интерфейса StackOverflow в значок меню и X –

Код в фрагменте работы, я могу открывать и закрывать навигационную панель без проблем, в чем же проблема? – Xposedbones

@Xposedbones Я не хочу использовать этот дешевый «х», чтобы закрыть его, я хочу использовать тот же значок меню, который использовал, чтобы открыть его, чтобы закрыть его, но независимо от того, что я пытаюсь, 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/

Заканчивать скрипка для полного рабочего раствора.

EDIT: В качестве альтернативы, если вы хотите, чтобы заголовок оставался сверху боковой навигационной панели, вы можете оставить HTML как есть и просто добавить код переключения и добавить в заголовок z-индекс 13, как в этом fiddle: 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

Я хочу, чтобы мой значок меню, чтобы перекрывать меню

ответ

Смежные вопросы