Web Programming TutorialsLearn to implement a horizontal scroll menu in jQuery

Learn to implement a horizontal scroll menu in jQuery

In our last jQuery session we learnt about how to create a form validator in jQuery. In this tutorial, we will learn to make a horizontal scrollable menu bar. This will be done in 2 steps, First of all we have to design a HTML and CSS background and then we will implement jQuery in it.
So let’s begin coding

HTML Markup

<nav id="sub" class="clearfix">
			<div id="left_but">&lt;</div>
				<div class="base_element">
					<div class="internal_element">
						<a href="#"><div class="button">Home</div></a>
						<a href="#"><div class="button">About us</div></a>
						<a href="#"><div class="button">Technology</div></a>
						<a href="#"><div class="button">Management</div></a>
						<a href="#"><div class="button">Latest posts</div></a>
					</div>
				</div>
			<div id="right_but">&gt;</div>
		</nav>

In the above example, we made three main elements. Two buttons Left and right & many button for navigation.

CSS styling

.button
			{
				height:55px;
				line-height: 57px;
				color:white;
				float:left;
				text-decoration:none;
				text-align:center;
			}

			.button:hover {
				background:red;
			}

			.base_element
			{ 
				width:400px;
				margin-left: 10px;
				overflow-x:hidden;
				display:inline-block;
				overflow-y:hidden;
			}

			.internal_element
			{
				width:10000px;
			}

			#left_but,#right_but {
				width: 35px;
				display: inline-block;
				height: 57px;
				text-align: center;
				color: #fff;
				line-height: 57px;
				cursor: pointer;
				font-size: 24px;
			}

			#left_but {
				float:left;
			}

			#right_but {
				float:right;
			}

			nav#sub {
			  background: brown;
			}

Some mix of jQuery

$(document).ready(function(){
				var place = 0;
				var cur_place = 5;
				var winWidth = $(window).width();
				$(window).resize(function(){
					winWidth = $(window).width();
					$('.button,.base_element').width(winWidth-100);
					$('.base_element').scrollLeft((winWidth-100)*place);
				}).trigger('resize');
				$('#left_but').click(function(){
					if (place==0) {
					   place = cur_place;
					} else {
					   place--;
					}
					$('.base_element').animate({scrollLeft:((winWidth-100)*place)+'px'}, 800);
				});
				$('#right_but').click(function(){
					if (place==cur_place) {
					   place = 0;
					} else {
					   place++;
					}
					$('.base_element').animate({scrollLeft:((winWidth-100)*place)+'px'}, 800);
				});
			});

In jQuery, we have done lot of things. We have created below three variables and given those values.

	var place = 0;
	var cur_place = 5;
	var winWidth = $(window).width();

Place variable is the variable which has the very first value.
Cur_place variable has the total of our navigation element or buttons.
winWidth has a function to get the width of browser window.

It has a resize function which is show below which works when anyone resizes the browser window.

$(window).resize(function(){
		winWidth = $(window).width();
		$('.button,.base_element').width(winWidth-100);
		$('.base_element').scrollLeft((winWidth-100)*place);
	}).trigger('resize');

It changes the value of elements and adjusts some major elements according to the browser window’s updated size.

$('#left_but').click(function(){
		if (place==0) {
			 place = cur_place;
		} else {
			place--;
		}
		$('.base_element').animate({scrollLeft:((winWidth-100)*place)+'px'}, 800);
	});

This function which is shown above works when you click on the left click. If the var place value is 0, it updates the value of place variable into cur_place. But decrease the value if var place has any other value. The value of var place updates and increases by clicking to the right button. This change has made on the base element.

$('#right_but').click(function(){
		if (place==cur_place) {
			 place = 0;
		} else {
			place++;
		}
		$('.base_element').animate({scrollLeft:((winWidth-100)*place)+'px'}, 800);
	});

And the above part of script works in the exact opposite way as the left click’s script works. If you click on right button the if var place has the same value as var cur_place has, it updates the value to 0. Weather it increases the value. The change has made on the base element.

Thus we have finished this session of implementing a horizontal scroll menu in jQuery. Feel free to comment about this part of session below.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -