This code implements a CSS vertical accordion menu with submenus. The menu is designed to provide a hierarchical navigation structure for web design. It utilizes HTML and CSS to create a collapsible menu that expands and collapses when clicked or touched.
The main functionality of this code is to allow users to navigate through different menu items and access submenus by clicking or touching the respective caret icons. The menu items are organized in a hierarchical structure, with each submenu expanding and collapsing as needed.
How to Create CSS Vertical Accordion Menu with Submenu
1. Begin by setting up the HTML structure for the menu. Use the following code as a starting point:
<p class="note">To navigate to a destination, click / touch the <em>text</em> <br>To open a submenu, click / touch the <em>'>' caret</em> :)</p> <aside class="sidebar"> <div id="leftside-navigation"> <ul class="level-0"> <li class="parent"> <a href="#"><span>Wingardium Leviosa</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-1"> <li class="parent"> <a href="#"><span>Hermione Granger</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">Gringotts</a> </li> <li> <a href="#">Platform 9 ¾</a> </li> </ul> </li> <li> <a href="#">Rubeus Hagrid</a> </li> <li class="parent"> <a href="#"><span>Peter Pettigrew</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">Hogwarts</a> </li> <li> <a href="#">Malfoy Mansion</a> </li> </ul> </li> <li> <a href="#">Nagini</a> </li> </ul> </li> <li class="parent"> <a href="#"><span>Expecto Patronum</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-1"> <li class="parent"> <a href="#"><span>Sirius Black</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">Azkaban</a> </li> <li> <a href="#">Chamber of Secrets</a> </li> </ul> </li> <li> <a href="#">James Potter</a> </li> </ul> </li> <li class="parent"> <a href="#"><span>Stupefy</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-1"> <li class="parent"> <a href="#"><span>Bellatrix Lestrange</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">The Burrow</a> </li> <li> <a href="#">Hogsmeade</a> </li> </ul> </li> <li> <a href="#">Remus Lupin</a> </li> <li class="parent"> <a href="#"><span>Luna Lovegood</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">Number 4 Privet Drive</a> </li> <li> <a href="#">The Hog's Head Inn</a> </li> </ul> </li> <li> <a href="#">Harry Potter</a> </li> <li class="parent"> <a href="#"><span>Dobby</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">The Three Broomsticks</a> </li> <li> <a href="#">Honeyduke's Sweetshop</a> </li> </ul> </li> <li> <a href="#">Ron Weasley</a> </li> </ul> </li> <li class="parent"> <a href="#"><span>Obliviate</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-1"> <li class="parent"> <a href="#"><span>Severus Snape</span><i class="arrow fa fa-angle-right"></i></a> <ul class="level-2"> <li> <a href="#">Forest of Dean</a> </li> <li> <a href="#">Godric's Hollow</a> </li> </ul> </li> <li> <a href="#">Draco Malfoy</a> </li> </ul> </li> </ul> </div> </aside>
To populate the menu with items and submenus, modify the HTML code by adding <li> elements within the <ul class="level-0"> container. Each <li> represents a menu item. For submenus, nest another <ul> element within an <li> and add the desired submenu items within it.
Make sure to update the <span> tags with the appropriate text for your menu items. You can also add or remove menu items and submenus as needed.
2. Next, include the CSS styles required to create the vertical accordion menu. Copy and paste the provided CSS code into your stylesheet or embed it within a <style> tag in the HTML file.
@import url('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsiH0B4gaVc.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVc.ttf) format('truetype');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-stretch: normal;
src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVc.ttf) format('truetype');
}
.note {
color: #ccc;
margin: 50px 25px 75px;
}
.note em {
font-weight: bold;
font-style: normal;
color: #fff;
}
aside {
margin-left: 25px;
}
.cd__main {
display: block !important;
color: #5D5F63;
background: #293149 !important;
font-family: 'Open Sans', sans-serif;
padding: 0;
margin: 0;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.sidebar #leftside-navigation ul {
margin: 0;
padding: 0;
display: inline-block;
}
.sidebar #leftside-navigation ul li {
display: block;
width: 100%;
vertical-align: middle;
list-style-type: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sidebar #leftside-navigation ul li.open > a > i {
transform: rotate(90deg);
}
.sidebar #leftside-navigation ul li.open > a > i:not(:hover) {
color: #f3ff09;
}
.sidebar #leftside-navigation ul li a {
position: relative;
display: block;
color: #aeb2b7;
text-decoration: none;
width: 100%;
padding: 14px 60px 14px 25px;
box-sizing: border-box;
font-size: 16px;
line-height: 22px;
outline: 0;
}
.sidebar #leftside-navigation ul li a:hover {
color: #f3ff09;
}
.sidebar #leftside-navigation ul li a span {
display: inline-block;
}
.sidebar #leftside-navigation ul li a i {
top: 0;
right: 0;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
display: block;
position: absolute;
touch-action: manipulation;
}
.sidebar #leftside-navigation ul li a i:hover {
background-color: #f3ff09;
color: #000;
}
.sidebar #leftside-navigation ul li a i .fa-angle-left,
.sidebar #leftside-navigation ul li a i .fa-angle-right {
padding-top: 3px;
}
.sidebar #leftside-navigation ul ul {
display: none;
background-color: rgba(0, 0, 0, 0.2);
}
.sidebar #leftside-navigation ul ul li {
border-bottom: none;
}
3. Now, load the jQuery JavaScript library by adding the following CDN link just before closing the body element.
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
4. Finally, add the following JavaScript function between <scrip> tag just after the jQuery to activate the accordion menu.
$("#leftside-navigation .parent > a > i").click(function(e) {
e.preventDefault();
var toClose = $("#leftside-navigation ul").not($(this).parents("ul"));
toClose.slideUp();
toClose.parent().removeClass("open");
if(!$(this).parent().next().is(":visible")) {
var toOpen = $(this).parent().next()
toOpen.slideDown();
toOpen.parent().not(".open").addClass("open");
}
e.stopPropagation();
});
That’s all! hopefully, you have successfully created CSS vertical accordion menu with submenu. If you have any questions or suggestions, feel free to comment below.
