Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Mobile Dropdown Menu
<div class="container center " onclick="myFunction(this)" >
<div class="bar1"></div>
<p class="bar2">menu</p>
<div class="bar3"></div>
</div>
<ul id ="mobile-menu" class="menu-hidden">
<li><a href="">item 1</a></li>
<li><a href="">item 2</a></li>
<li><a href="">item 3</a></li>
</ul>
function myFunction(x) {
x.classList.toggle("change");
$("#mobile-menu").toggleClass("menu-hidden", 800, "easeOutQuint");
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
* {
margin: 0;
padding: 0;
}
html body {
margin: 0;
padding: 0;
min-width: 100%;
width: 100%;
max-width: 100%;
min-height: 100%;
height: 100%;
max-height: 100%;
background-color: #F4F4F4;
font-family: 'Raleway', sans-serif;
}
a{
text-decoration: none;
}
ul{
padding: none;
}
/*============================== Hamburger Menu ============================*/
.container {
display: block;
position: fixed;
text-align: center;
margin: 0 auto;
z-index: 1;
padding: .5em;
padding-left: 0em;
width:100%;
background-color: white;
}
/* Style Hamburger*/
.bar1, .bar3 {
display: inline-block;
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
.bar2{
cursor: pointer;
vertical-align: middle;
height: 5px;
font-size: 1.2em;
margin-top: -14px;
margin-bottom: 10px;
transition: 0.4s;
}
/* Rotate first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
/*========= Mobile Menu ==================*/
#mobile-menu{
position: fixed;
text-align: center;
list-style: none;
background: tomato;
width: 100%;
color: white;
padding-top: 3.9em;
box-shadow: 0 10px 20px rgba(0, 0, 0, .0), 0 6px 6px rgba(0, 0, 0, 0.1);
}
#mobile-menu ul{
margin: none !important;
}
#mobile-menu li{
margin: none !important;
}
#mobile-menu li a{
border-style: solid;
border-top: solid #FF836D;
border-left-style: none;
border-bottom: none;
display:inline-block;
padding-top: 1em;
padding-bottom: 1em;
width: 100%;
color: white;
}
#mobile-menu li a:hover{
transition: background-color 0.6s ease;
background: #D9391C;
}
.menu-hidden{
margin-top: -11em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment