jQuery Sliding Menu

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

Usually, menu bar occupies some spaces in a web page. By using sliding menu we can have more space to display the main content. In previous posts, we have seen about jQuery menu expand and collapse with the sliding effect.

We call jQuery on the click event of the menu expand/collapse icon and controls the sliding effect by using CSS styles. In this example, the sliding menu bar will be sticky on page scroll.

View Demo

HTML Code for Sliding Menu

This code shows HTML for showing sliding menu items in the page. It has content interlinked with the menu items which are focused on the click event of the corresponding menu link.

jquery-sliding-menu

<div>
	<div class="menu-list">
	<div id="close">X</div>
	<ul>
		<li class="menu-links" id ="about">About</li>
		<li class="menu-links" id ="photos">Photos</li>
		<li class="menu-links" id ="terms">Terms and Conditions</li>
		<li class="menu-links" id ="contact">Contact</a></li>

	</ul>
	</div>
	
	<div class="menu-link-target">
		<div id="expand-menu"><img src="menu.png" width="24px"/></div>
		<h4 id="about-content">About</h4>
		<p>It has survived...</p>
		<h4 id="photos-content">Photos</h4>
		<p>It is a long...</p>
		<h4 id="terms-content">Terms and Conditions</h4>
		<p>There are many variations...</p>
		<h4 id="contact-content">Contact</h4>
		<p>The standard chunk...</p>
	</div>
</div>

Sliding Sticky Menu Bar using jQuery

Sliding in and out effects are achieved by changing the absolute position of the sliding menu element using jQuery. The script is,

<script>
$("#expand-menu").on('click',function(){
    $(".menu-list").css( {"left": 0});
	$(".menu-link-target").css( {"left": 200});
	$("#expand-menu").hide();
});
$("#close").on('click',function(){
    $(".menu-list").css({"left": "-"+ $(".menu-list").width()});
	$(".menu-link-target").css( {"left": 0});
	$("#expand-menu").show();
});
$('.menu-links').click(function() { 
		var target = $(this).attr('id');
		$('html, body').animate({scrollTop: $('#'+target+'-content').offset().top}, 1000);
});
</script>

View DemoDownload

Leave a Reply

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

↑ Back to Top

Share this page