When I was designing my blog with the mobile first approach I decided to keep my sidebar navigation menu separate at the right bottom so that there is no need for a sticky header and user can read everything in full height.
This is the simple version of how my mobile menu looks.
Here is how you can create your own responsive sidebar navigation menu.
Overview
Before we move on to designing the menu, let us imagine what components we need.
- A hamburger ๐ button which will show/hide the sliding menu.
- Animation on hamburger button to represent the current state of menu.
- A side navigation menu.
As the side navigation menu will toggle on the click of the hamburger menu we can keep them together in a single container.
Dependencies
<!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I like to use jQuery for DOM manipulation as it reduces the amount of code i need to write.
Hamburger button
HTML structure
There is a simple trick to create the hamburger menu.
We are going to use a <div> with a .hamburger class to create the hamburger button wrapper and then we will place three <span> to create the layers of the hamburger.
<div class="hamburger"> <span></span> <span></span> <span></span> </div>
Designing the hamburger button
Now the HTML structure for our button is ready we need to design it to make it look like hamburger. While designing we need to keep in mind that we have to provide the animation for open & close when the user clicks on it.
.hamburger{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99999999;
width: 48px;
height: 36px;
background: #e91e63;
cursor: pointer;
padding: 5px;
overflow: hidden;
}
.hamburger > span{
position: absolute;
width: 80%;
height: 5px;
left: 10%;
background-color: #000;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.hamburger > span:nth-child(2){
top: 16px;
}
.hamburger > span:nth-child(3){
top: 27px;
}
As we are creating fixed dimension hamburger button we are going to provide a fixed dimensions to the wrapper.
- We have created a fixed parent
.hamburger{position:fixed}to place it wherever we want on the screen. - Then we have designed all the
<span>as small rectangular boxes withposition:absolute. - As we need to show three different strips we have changed the top position of 2nd span
.hamburger > span:nth-child(2){ top: 16px; }& 3rd span.hamburger > span:nth-child(3){ top: 27px; }. - We have also provided
transition: all .25s ease-in-out;to all the spans so that change of their property should be smooth.
Opening & Closing hamburger button with jquery
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass('open');
});
});
Whenever the hamburger button is clicked it will toggle a open class to it. We can now use this class to add the opening & closing effect.
.hamburger.open > span:nth-child(2){
transform: translateX(-100%);
opacity: 0;
}
.hamburger.open > span:nth-child(1){
transform: rotateZ(45deg);
top:16px;
}
.hamburger.open > span:nth-child(3){
transform: rotateZ(-45deg);
top:16px;
}
.hamburger.open > span:nth-child(2){ transform: translateX(-100%); opacity: 0;} will slide the middle strip of the hamburger to the left and make it transparent.
.hamburger.open > span:nth-child(1){ transform: rotateZ(45deg); top:16px; } & .hamburger.open > span:nth-child(2){ transform: rotateZ(-45deg); top:16px; } will bring the first and last span to the same top position and rotate them to make a X.
Kudos ๐ we have our hamburger ๐ button ready lets create the side navigation now.
Responsive side navigation menu
HTML structure
We will create a simple navigation menu.
<!-- Nav sldier-->
<nav>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Learn</a></li>
<li><a href="javascript:void(0)">Examples</a></li>
<li><a href="javascript:void(0)">Blog</a></li>
</ul>
</nav>
We used a nav element for creating the navigation menu and placed the links in ul.
Designing the navigation menu
nav {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 100%;
background: #ffe8ec;
transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.mobile-menu > nav > ul{
list-style-type: none;
padding: 10px;
text-align: center;
}
.mobile-menu > nav > ul > li {
padding: 10px 0;
}
.mobile-menu > nav > ul > li > a{
text-decoration: none;
font-size: 1.4em;
color: #292627;
}
I have created a full-screen side menu, you can change the dimension according to your need. We are using > selector to avoid overwriting the style of other elements.
Now we have our navigation menu and hamburger button ready we can wrap them inside a wrapper to make them functional.
Sliding navigation menu
HTML structure
<!--Mobile nav menu-->
<div class="mobile-menu">
<!-- Hamburger menu-->
<div class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<!-- Nav sldier-->
<nav>
<ul>
<li><a href="javascript:void(0)">Home</a></li>
<li><a href="javascript:void(0)">Learn</a></li>
<li><a href="javascript:void(0)">Examples</a></li>
<li><a href="javascript:void(0)">Blog</a></li>
</ul>
</nav>
</div>
We have placed hamburger button and navigation menu inside the .mobile-menu wrapper.
Desinging the sliding navigation menu
* { box-sizing: border-box; }
.mobile-menu{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99999999;
width: 48px;
height: 36px;
background: #e91e63;
}
/*Hamburger button*/
.hamburger{
position: relative;
height: 100%;
z-index: 1;
cursor: pointer;
padding: 5px;
overflow: hidden;
}
.hamburger > span{
position: absolute;
width: 80%;
height: 5px;
background-color: #000;
left: 10%;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
}
.hamburger > span:nth-child(2){
top: 16px;
}
.hamburger > span:nth-child(3){
top: 27px;
}
/*Menu*/
.mobile-menu > nav {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 100%;
background: #ffe8ec;
transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
}
.mobile-menu > nav > ul{
list-style-type: none;
padding: 10px;
text-align: center;
}
.mobile-menu > nav > ul > li {
padding: 10px 0;
}
.mobile-menu > nav > ul > li > a{
text-decoration: none;
font-size: 1.4em;
color: #292627;
}
We have updated the design a little by providing some property of the .hamburger to .mobile-menu making it fixed and made .hamburger relative to keep the <span> design same.
As there can be multiple nav we have updated all the selectors .mobile-menu > nav as well to make sure we are pointing to the required elements only.
Making sidebar menu functional with jquery
$(document).ready(function(){
$(".hamburger").click(function(){
$(this).parent().toggleClass('open');
});
});
We now add our .open class to the .mobile-menu so that we can handle both hamburger button and sliding menu with single change.
Our CSS for the animation is also updated accordingly.
/*Hamburger button*/
.mobile-menu.open > .hamburger > span:nth-child(2){
transform: translateX(-100%);
opacity: 0;
}
.mobile-menu.open > .hamburger > span:nth-child(1){
transform: rotateZ(45deg);
top:16px;
}
.mobile-menu.open > .hamburger > span:nth-child(3){
transform: rotateZ(-45deg);
top:16px;
}
/*Sliding menu*/
.mobile-menu.open > nav {
left: 0;
}
Well done ๐๐๐ we covered up everything.