Last active
August 28, 2017 13:30
-
-
Save seredniy/ba6cd7b0c39225e1cb82313cc21823bc to your computer and use it in GitHub Desktop.
Мобильное меню ( toggle button menu )
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<a href="#menu" id="toggle" class="toggle"><span></span></a> | |
<nav id="menu" class="menu"> | |
<ul> | |
<li><a href="/">Menu item 1</a></li> | |
<li><a href="/">Menu item 2</a></li> | |
<li><a href="/">Menu item 3</a></li> | |
</ul> | |
</nav> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function($) { | |
$(".toggle").click(function(e) { | |
e.preventDefault(); | |
$(this).toggleClass("on"); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#toggle { | |
display: none; | |
width: 35px; | |
height: 28px; | |
padding: 14px 0 0; | |
margin: 14px 0 0; | |
z-index: 102; | |
position: relative; | |
float: right; | |
} | |
#toggle span { | |
position: relative; | |
display: block; | |
width: 100%; | |
height: 3px; | |
background-color: #ffd800; | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
#toggle span:after, | |
#toggle span:before { | |
content: ""; | |
position: absolute; | |
left: 0; | |
top: -9px; | |
} | |
#toggle span:after { | |
top: 9px; | |
width: 100%; | |
height: 3px; | |
background-color: #ffd800; | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
#toggle span:before { | |
width: 100%; | |
height: 3px; | |
background-color: #ffd800; | |
-webkit-transition: all 0.3s; | |
transition: all 0.3s; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
-webkit-border-radius: 2px; | |
border-radius: 2px; | |
} | |
/* on activation */ | |
#toggle.on span { | |
background-color: transparent; | |
} | |
#toggle.on span:before { | |
background-color: #fff; | |
-webkit-transform: rotate(45deg) translate(5px, 5px); | |
-ms-transform: rotate(45deg) translate(5px, 5px); | |
transform: rotate(45deg) translate(5px, 5px); | |
} | |
#toggle.on span:after { | |
background-color: #fff; | |
-webkit-transform: rotate(-45deg) translate(7px, -8px); | |
-ms-transform: rotate(-45deg) translate(7px, -8px); | |
transform: rotate(-45deg) translate(7px, -8px); | |
} | |
#toggle.on + #menu { | |
opacity: 1; | |
visibility: visible; | |
-webkit-transition: opacity .4s; | |
transition: opacity .4s; | |
z-index: 101; | |
} | |
@media only screen and (max-width: 992px) { | |
#toggle { | |
display: block; | |
} | |
#menu { | |
position: fixed; | |
width: 100vw; | |
min-height: 100vh; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
text-align: center; | |
background-color: rgba(44, 45, 54, 0.85); | |
opacity: 0; | |
visibility: hidden; | |
-webkit-transition: opacity .4s; | |
transition: opacity .4s; | |
z-index: -1; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-orient: vertical; | |
-webkit-box-direction: normal; | |
-webkit-flex-direction: column; | |
-ms-flex-direction: column; | |
flex-direction: column; | |
-webkit-box-pack: center; | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-align-content: center; | |
-ms-flex-line-pack: center; | |
align-content: center; | |
-webkit-box-align: center; | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
text-align: center; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment