Bootstrap Vertical Menu with Submenu on Click

Bootstrap Vertical Menu with Submenu on Click
Code Snippet: Vertical Dropdown Menu
Author: Bülent Sakarya
Official website: Go to website
Published: 3 weeks ago
Views: 278

This lightweight CSS code snippet helps you to create a custom vertical menu with submenu on click in Bootstrap projects. This vertical menu is quite compatible with Bootstrap 3/4/5  CSS and also works without it. It uses the jQuery toggle function to collapse the submenu on the click event.

How to Create Bootstrap Vertical Menu with Submenu

1. Load the jQuery and Bootstrap CSS in the head tag of your HTML page. Basically, Bootstrap CSS is optional, the menu works well without it. Anyhow, the menu uses the Bootstrap color classes.

   <!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
   <!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. After that, create the HTML nav element and arrange navigation links in unordered list. Use the nested list to make the submenus that will open on click.

<nav class='animated bounceInDown bg-dark'>
	<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>

3. Now, style the menu by adding the following CSS styles into your project.

nav {
	position: relative;
	margin: 50px;
	width: 360px;
    background: 
}
nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav ul li {
  /* Sub Menu */
}
nav ul li a {
	display: block;
	padding: 10px 15px;
	color: #fff;
	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: #1d4f71;
	color: #fff;
}
nav ul li a .fa {
	width: 16px;
	text-align: center;
	margin-right: 5px;
	float:right;
}
nav ul ul {
	background: rgba(0, 0, 0, 0.2);
}
nav ul li ul li a {
	
	border-left: 4px solid transparent;
	padding: 10px 20px;
}
nav ul li ul li a:hover {

	border-left: 4px solid #3498db;
}

4. Finally, add the following jQuery function that toggles the sub-menu on the click event.

<script>
      $('.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");
});
 </script>

That’s all! hopefully, you have successfully created vertical menu with submenu on click for Bootstrap 3/4/5. If you have any questions or suggestions let me know by comment below.

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.