Header Menu Horizontal Expand Collapse Using jQuery

jQuery menu expand collapse can be done by using various functions like show(), toggle() and more. In 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.

horizontal-menu-expand

View Demo

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

View DemoDownload

This jQuery code tutorial was published on February 10, 2015.

↑ Back to Top