Accordion Sidebar Menu with CSS and jQuery

Accordion Sidebar Menu with CSS and jQuery
Code Snippet:
Author:
Published: January 17, 2024
Last Updated: January 22, 2024
Downloads: 18,561
License: MIT
Edit Code online: CodeHim
Read More

A lightweight (near about 2KB), simple yet attractive flat design accordion sidebar menu created with CSS and jQuery. It is useful to place your website navigation links or to use as a general purpose accordion. The accordion menu uses font awesome arrow icon with expandable items.

In addition, you can fully customize this menu (with additional CSS) accordion to your needs.

Plugin Overview

Plugin: Vertical Sidenav Responsive
Author: Felix Veras
Licence: MIT Licence
Published: January 17, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version and Font Awesome 4
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 4.49 KB

How to Make Accordion Sidebar Menu

1. First of all load jQuery JavaScript library and Font Awesome CSS (for accordion arrow icons) into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Font Awesome 4-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

2. Now, also include Vertical Sidenav‘s CSS and JavaScript file (from downloaded project directory).

<!-- Sidebar Accordion CSS -->
<link rel="stylesheet" href="css/sidebar-accordion.css">

<!-- Sidebar Accordion JS -->
<script src="js/sidebar-accordion.js"></script>

3. Create HTML structure (as follows) for menu after loading all necessary assets.

	<div class="contenedor-menu">
		<!-- <a href="" class="btnMenu">Menu <i class="fa fa-bars"></i></a> -->

		<ul class="menu">
			<li><a href="#">Element 1</a></li>
			<li><a href="#">Element 2 <i class="fa fa-chevron-down"></i></a>
				<ul>
					<li><a href="#">Sub-Element #1</a></li>
					<li><a href="#">Sub-Element #2</a></li>
					<li><a href="#">Sub-Element #3</a></li>
					<li><a href="#">Sub-Element #4</a></li>
				</ul>
			</li>
			<li><a href="#">Element 3</a></li>
			<li><a href="#">Element 4 <i class="fa fa-chevron-down"></i></a>
				<ul>
					<li><a href="#">Sub-Element #1</a></li>
					<li><a href="#">Sub-Element #2</a></li>
					<li><a href="#">Sub-Element #3</a></li>
					<li><a href="#">Sub-Element #4</a></li>
				</ul>
			</li>
			<li><a href="#">Element 5</a></li>
			<li><a href="#">Element 6</a></li>
			<li><a href="#">Element 7 <i class="fa fa-chevron-down"></i></a>
				<ul>
					<li><a href="#">Sub-Element #1</a></li>
					<li><a href="#">Sub-Element #2</a></li>
					<li><a href="#">Sub-Element #3</a></li>
					<li><a href="#">Sub-Element #4</a></li>
				</ul>
			</li>
			<li><a href="#">Element 8</a></li>
		</ul>
	</div>

Tip: If you would like to make a menu trigger, remove the comment from <a href=”” class=”btnMenu”>Menu <i class=”fa fa-bars”></i></a> line.

4. If you would like to add inline CSS or customize styles, use the following.

.btnMenu {
	display: none;
	padding: 20px;
	display: block;
	background: #1abc9c;
	color: #fff;
}
.btnMenu i.fa { float: right; }

.contenedor-menu {
	width: 20%;
	min-width: 300px;
	margin: 50px;
	display: inline-block;
	line-height: 18px;
}
.contenedor-menu .menu { width: 100%; }
.contenedor-menu ul { list-style: none; }
.contenedor-menu .menu li a {
	color: #494949;
	display: block;
	padding: 15px 20px;
	background: #e9e9e9;
}
.contenedor-menu .menu li a:hover { background: #16a085; color: #fff; } 
.contenedor-menu .menu i.fa { 
	font-size: 12px; 
	line-height: 18px; 
	float: right; 
	margin-left: 10px; 
}

.contenedor-menu .menu ul { display: none; }
.contenedor-menu .menu ul li a {
	background: #424242;
	color: #e9e9e9;
}

.contenedor-menu .menu .activado > a {
	background: #16a085;
	color: #fff;
}

1 thought on “Accordion Sidebar Menu with CSS and jQuery”

  1. One problem with this is that clicking on a drop-down element closes the panel as the whole area of the ul is picked up by the
    “$(‘.menu li:has(ul)’).click” function trigger

    Reply

Leave a Comment

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

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X