How to create a custom mobile friendly menu
Posted By : Vinay Tiwari | 08-Jun-2017
This blog explain us how to create a custom mobile menu with help of jquery function. This is responsive menu with multi-level of mobile menu. This feature makes your menu look good on any devices, you'll see a hamburger icon on your mobile device and a full-width list on desktops.
The images are displayed mobile view, and desktop view.
(Now we will define code structure)
HTML
CSS
/*---start-desktop-menu-css---*/
.menu {
width: 60%;
border: none;
}
.menu > ul > li ul, .menu > ul {
display: block;
border: none;
}
.menu-icon {
display: none;
}
.menu > ul > li {
margin-right: 30px;
display: inline-block;
}
.menu > ul > li ul {
position: absolute;
width: 150px;
}
/*---end-desktop-menu-css---*/
/*---start-mobile-menu-css---*/
.menu-section{
width: 100%;
}
.menu {
width: 40%;
margin: auto;
border: 1px solid #b3b3b3;
}
.menu-icon {
margin: 10px 0;
cursor: pointer;
margin-left: 20px;
}
.menu > ul {
padding: 20px;
margin: auto;
background: #5eabfd;
border-top: 1px solid #b3b3b3;
}
.menu > ul > li, .menu > ul > li > ul > li {
list-style: none;
margin-bottom: 15px;
}
.menu > ul > li:last-child, .menu > ul > li > ul > li:last-child {
margin-bottom: 0;
}
.menu > ul > li > a, .menu > ul > li > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 20px;
font-family: "Lato Regular";
}
i {
margin-left: 10px;
color: #e8e8e8;
}
.menu > ul > li ul {
padding: 20px;
background: #0693c6;
margin: 15px 0;
display: none;
}
.transform {
transform: rotate(180deg);
}
/*---end-mobile-menu-css---*/
Jquery
$(document).ready(function(){
$('.menu-icon').click(function(){
$(this) .next('.menu ul').slideToggle('slow');
});
$('.menu a i').click(function(){
$(this).closest('li').siblings('li').find('> ul').slideUp(function(){
$(this).closest('li').find('> a i').removeClass('transform');
});
$(this).closest('li').find('> ul').slideToggle('slow', function(){
$(this).closest('li').find('> a i').toggleClass('transform');
});
});
});
Explaination
In this function, Slide toggle method is triggered by clicking on the menu icon. The slideToggle() method is used to display or hide the selected elements.
Toggle class is working on click of the arrow icon. The toggleClass() method is used to add or remove a class from each element in the set of selected elements. In this function, toggleClass is working on transform class. Transform class changes the position of the arrow icon, when the menu is closed and opens.
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vinay Tiwari
Vinay is a bright UI developer, having knowledge of HTML, CSS, Bootstrap, Jquery and AngularJs. His hobbies are interacting with people, listening music etc.