<head>
<link href="https://fonts.googleapis.com/css?family=Playfair+Display|Raleway" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
</head>
<body>
<header>
<div class="hamburger-menu">
<div class="bar"></div>
</div>
<nav class="mobile-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li class="has-children">About <span class="icon-arrow"></span>
<ul class="children">
<li><a href="submenu1.html">Submenu #1</a></li>
<li><a href="submenu2.html">Submenu #2</a></li>
<li><a href="submenu3.html">Submenu #3</a></li>
</ul>
</li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div class="main">
<div class="text">
<h1>Mobile Menu with Hamburger</h1>
<p>This is a mobile navigation menu with slide-in effect, hover effects and rotating arrow element for submenus.</p>
</div>
</div>
</body>
body {
font-family: 'Raleway', sans-serif;
font-size: 18pt;
}
h1 {
font-family: 'Playfair Display', serif;
font-size: 30pt;
}
.main {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.text {
position:absolute;
text-align: center;
top: 30px;
}
/*---------------------
HAMBURGER MENU
----------------------*/
.hamburger-menu {
position: fixed;
top: 0;
left: 0;
padding-top: 20px;
padding-left: 15px;
width: 100%;
height: 43px;
cursor: pointer;
z-index: 9998;
background:#EBEBEB;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.bar,
.bar:after,
.bar:before {
width: 30px;
height: 3px;
}
.bar {
position: relative;
transform: translateY(10px);
background: black;
transition: all 0ms 300ms;
}
.bar.animate {
background: rgba(255, 255, 255, 0);
}
.bar:before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
background: black;
transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar:after {
content: "";
position: absolute;
left: 0;
top: 10px;
background: black;
transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:after {
top: 0;
transform: rotate(45deg);
transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.bar.animate:before {
bottom: 0;
transform: rotate(-45deg);
transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
/*---------------------
Mobiles Menu
----------------------*/
/*---------------------
Mobiles Menu - Design
----------------------*/
.mobile-menu ul {
margin: 0;
padding: 0;
}
.mobile-menu li {
font-size: 20px;
line-height: 30px;
margin: 0;
overflow: hidden;
padding: 5px;
position: relative;
text-align: left;
text-transform: uppercase;
padding-left:15px;
}
.mobile-menu li:first-child {
margin-top: 70px;
}
.mobile-menu li:hover {
background: #CCCCCC;
}
.mobile-menu li a {
text-decoration: none;
color: black;
}
/*---------------------
Mobiles Menu - Slide IN
----------------------*/
.mobile-menu {
top: 0;
max-width: 250px;
left: -100%;
width: 100%;
background: #EBEBEB;
color: black;
height: 100%;
position: fixed;
z-index: 9997;
overflow-y: auto;
-webkit-transform: translate3d(0, 0, 205px);
-moz-transform: translate3d(0, 0, 205px);
transform: translate3d(0, 0, 205px);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
.mobile-menu.active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
/*---------------------
Mobiles Menu - Dropdown Submenu
----------------------*/
.has-children:hover{
cursor:hand;
}
.children {
display:none;
}
.mobile-menu .children li:first-child {
margin-top: 0px;
}
.icon-arrow {
position: absolute;
display: block;
font-size: 0.7em;
color: black;
top: 5px;
right: 10px;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transition: .6s;
-webkit-transition: .6s;
-moz-transition: .6s;
}
.icon-arrow:after {
content: "\25BC";
}
.icon-arrow.open {
transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
transition: .6s;
-webkit-transition: .6s;
-moz-transition: .6s;
}
View Compiled
(function () {
$('.hamburger-menu').on('click', function() {
$('.bar').toggleClass('animate');
$('.mobile-menu').toggleClass('active');
return false;
})
$('.has-children').on ('click', function() {
$(this).children('ul').slideToggle('slow', 'swing');
$('.icon-arrow').toggleClass('open');
});
})();
This Pen doesn't use any external CSS resources.