Header Menu Horizontal Expand Collapse Using jQuery
by Vincy. Last modified on April 4th, 2024.
jQuery menu expand collapse can be done by using various functions like show(), toggle() and more. In a previous tutorial, we have seen multilevel dropdown to expand collapse submenu items.
In this tutorial, we are using jQuery toggle() by passing direction parameter. This parameter controls the direction of menu toggling animation.
Expandable Header Menu
This HTML code contains the list of header menu items.
<div class="header-menu-list">
<div class="btn-expand"></div>
<div class="collapsible">
<ul>
<li>Home</li>
<li>About</li>
<li>Product</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
and the styles are,
.header-menu-list {
background: #EBEBEB;
padding: 10px;
overflow: hidden;
}
.header-menu-list .btn-expand {
float: right;
background: url("expand.png") center no-repeat;
width: 32px;
height: 32px;
cursor: pointer;
}
.collapsible {
position: absolute;
right: 50px;
top: 25px;
display: none;
}
.collapsible ul {
list-style: none;
padding: 0px;
margin: 0px;
float: right;
}
.collapsible ul li {
list-style: none;
display: inline-block;
padding-right: 15px;
}
jQuery Toggle Effect to Expand/Collapse
This jQuery script uses toggle() function with direction to expand and collapse header menu right to left.
$(document).ready(function (e) {
$(".header-menu-list .btn-expand").click(function (e) {
$('.collapsible').toggle("slide", {
direction: "right"
}, 2000);
});
});
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.