This tutorial will guide you through the process of creating a Bootstrap Vertical Menu With Submenu On Click. We’ll cover the necessary HTML structure, CSS styling, and JavaScript functionality to achieve this interactive menu.
Setting Up the Project
Include Header Assets
To begin, you need to include necessary header assets like Font Awesome. Add the following to the <head> section of your HTML document:
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
Creating the HTML Structure
HTML Structure
Now, create the basic HTML structure for the vertical menu. This involves using <nav>, <ul>, and <li> elements to define the menu and its submenus.
<nav class='animated bounceInDown'> <ul> <li><a href='#profile'>Profile</a></li> <li><a href='#message'>Messages</a></li> <li class='sub-menu'><a href='#settings'>Settings<div class='fa fa-caret-down right'></div></a> <ul> <li><a href='#settings'>Account</a></li> <li><a href='#settings'>Profile</a></li> <li><a href='#settings'>Secruity & Privacy</a></li> <li><a href='#settings'>Password</a></li> <li><a href='#settings'>Notification</a></li> </ul> </li> <li class='sub-menu'><a href='#message'>Help<div class='fa fa-caret-down right'></div></a> <ul> <li><a href='#settings'>FAQ's</a></li> <li><a href='#settings'>Submit a Ticket</a></li> <li><a href='#settings'>Network Status</a></li> </ul> </li> <li><a href='#message'>Logout</a></li> </ul> </nav>
Styling with CSS
CSS Styling
Next, style the menu using CSS to achieve the desired appearance. This includes setting background colors, padding, and hover effects. This CSS will give the menu a vertical layout and handle the appearance of the submenus.
body {
background-color: #fff;
font-size: 14px;
}
nav {
position: relative;
margin: 50px;
width: 360px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
/* Sub Menu */
}
nav ul li a {
display: block;
background: #ebebeb;
padding: 10px 15px;
color: #333;
text-decoration: none;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
nav ul li a:hover {
background: #f8f8f8;
color: #515151;
}
nav ul li a .fa {
width: 16px;
text-align: center;
margin-right: 5px;
float:right;
}
nav ul ul {
background-color:#ebebeb;
}
nav ul li ul li a {
background: #f8f8f8;
border-left: 4px solid transparent;
padding: 10px 20px;
}
nav ul li ul li a:hover {
background: #ebebeb;
border-left: 4px solid #3498db;
}
Adding JavaScript Functionality
JavaScript Function
To enable the submenu click functionality, add the following JavaScript code. This code uses jQuery to toggle the visibility of submenus and change the caret icon when a menu item is clicked.
$('.sub-menu ul').hide();
$(".sub-menu a").click(function () {
$(this).parent(".sub-menu").children("ul").slideToggle("100");
$(this).find(".right").toggleClass("fa-caret-up fa-caret-down");
});
With the HTML structure, CSS styling, and JavaScript functionality in place, you’ve successfully created a Bootstrap Vertical Menu With Submenu On Click.