Header Menu Horizontal Expand Collapse Using jQuery

by Vincy. Last modified on July 12th, 2022.

jQuery menu expand collapse can be done by using various functions like show(), toggle() and more. In the previous tutorial, we have seen multi-level menu 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.

View Demo

Expandable Header Menu

This HTML code contains the list of header menu items.

horizontal-menu-expand

<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);
     });
});

View DemoDownload

Leave a Reply

Your email address will not be published. Required fields are marked *

↑ Back to Top

Share this page