0
body {
background-color: #313449;
font-family: 'Open Sans', sans-serif;
}
#menu-toggle {
z-index: 1;
}
/* Hidden Checkbox */
#menu-toggle input {
opacity: 0;
width: 40px;
height: 40px;
z-index: 2;
/* checkbox on top */
position: absolute;
top: 0;
left: 0;
}
#menu-toggle input:checked {
transition: all 0.3s ease;
}
/* Hamburger */
#menu-toggle span {
display: block;
width: 30px;
border: #ffffff 2px solid;
margin-top: 5px;
border-radius: 2px;
transition: all 0.3s ease;
transform-origin: 0 0;
}
#menu-toggle input:checked ~ span {
/* all bars - top bar */
transform: rotate(45deg) translate(-1px, -3px);
border-color: #000000;
}
#menu-toggle input:checked ~ span:nth-child(3) {
/* middle bar */
transform: scale(0, 0);
opacity: 0;
}
#menu-toggle input ~ span:nth-child(4) {
/* bottom bar */
transform-origin: 0 100%;
}
#menu-toggle input:checked ~ span:nth-child(4) {
transform: rotate(-45deg) translate(0, 2px);
}
/* Menu Content */
#menu-toggle input:checked ~ #menu {
/* display menu */
left: 0;
}
#menu-toggle #menu {
background-color: grey;
background-color: rgba(255, 255, 255, 1);
width: 100px;
height: auto;
padding: 30px 30px;
text-align: center;
position: absolute;
top: 0;
left: -160px;
margin-top: 0;
transition: all 0.3s ease;
}
#menu-toggle li {
list-style: none;
margin: 30px 0;
}
#menu-toggle a li {
color: #000000;
text-decoration: none;
transition: color 0.3s ease;
}
#menu-toggle a li:hover {
color: red;
transition: color 0.3s ease;
}<nav role="navigation">
<div id="menu-toggle">
<input type="checkbox" />
<span></span>
<span></span>
<span></span>
<ul id="menu">
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>Contact</li>
</a>
<a href="#">
<li>Sign in</li>
</a>
</ul>
</div>
</nav>
<section>
<h1>Title</h1>
<p>
Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
<br />
<br />Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
<br />
<br />Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
<br />
<br />Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
</p>
</section>Привет,
Я борюсь с моим меню гамбургер. Он скрыт под моим #menu div, и я не могу найти причину. Я пробовал z-index для своих пролетов, но он не работает.
Что я здесь делаю неправильно?
Я также не могу понять, почему мой 2 пролета и мой третий пролет - nth-child (3) и (4)? Он работает так, но я не могу понять, почему это не (2) и (3).
Thanks;
может у пожалуйста, объясните, что это именно то, что вы хотите? – mrid
Когда вы нажимаете на гамбургер, он становится крестиком «close icon», и он идет за белым меню. Он должен оставаться впереди. – Tom
установите 'z-index: 10000' в элемент' # menu-toggle span'. это исправит проблему. Проверьте ручку [http://codepen.io/anon/pen/bBNRYg](http://codepen.io/anon/pen/bBNRYg) – Manjunath