Creating a Hamburger Menu
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Example: Building a hamburger menu</h1>
<div class="top">
<a href="#" class="menu_icon"><i class="material-icons">dehaze</i></a>
</div>
</header>
<nav class="menu">
<a href="#" class="item_menu">home</a>
<a href="#" class="item_menu">about</a>
<a href="#" class="item_menu">products</a>
<a href="#" class="item_menu">services</a>
<a href="#" class="item_menu">contact</a>
</nav>
<main>
Content of the website.
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
CSS Styles
* { margin: 0 auto; font-family: sans-serif; }
body { margin: 0 auto; }
header {
height: 70px;
background-color: #3e739d;
border-bottom: 1px solid #494949;
display: flex;
align-items: center;
justify-content: center;
}
header > h1 {
width: calc(100% - 160px);
text-align: center;
font-size: 20px;
color: white;
}
header > .top {
position: absolute;
left: 20px;
}
header > .top a.menu_icon i {
color: #000;
font-size: 40px;
padding-top: 5px;
transition: .2s ease;
}
header > .top a.menu_icon:hover i {
color: #fff;
}
nav.menu {
width: 300px;
min-height: calc(100vh - 121px);
background-color: #03a9f4;
position: absolute;
left: -300px;
transition: .3s all;
}
nav.menu > a {
display: block;
padding: 5px;
margin: 15px 0 0px 20px;
color: #494949;
text-transform: uppercase;
}
main {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
footer {
height: 50px;
background-color: #494949;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
position: fixed;
width: 100%;
}
.menu_show {
left: 0!important;
}
@media screen and (max-width: 425px) {
header h1 {
font-size: 16px;
}
}
@media screen and (max-width: 360px) {
nav.menu {
width: 100%;
left: -100%;
}
}
To enable the menu, showing or hiding the navigation list when the button is clicked, jQuery library is used. Here is the click event of the button with the top class and the toggleClass function of jQuery, adding or removing the menu_show class from the menu to make it visible or invisible.
$(document).ready(function() {
$("body").on('click', '.top', function() {
$("nav.menu").toggleClass("menu_show");
});
});