Content slide on menu hover using jquery

Hi everyone, Most of the web clients dont like the page loading to see the content. They want it to be very user friendly and without the page loading. So Today we will slide the content of each page on mouse over using jquery. We use jquery mouse over effect to slide the content of each menu. It will be very useful for all kind of web applications.

So how we do it?

I have implemented both horizontal and vertical menu in demo with some additional styles. And we will focus on horizontal menu in this tutorial. At first we create a menu with some content. The code will look like the following,

<div id="container">
	<h2>Menu with mouse over content slide using jquery</h2>
	<div id="content-tab">
	  <ul id="menu">
	    <li><a href="#">Home</a></li>
	    <li><a href="#">About</a></li>
	    <li><a href="#">Services</a></li>
	    <li><a href="#">Clients</a></li>
	  </ul>
		<!-- All tab content goes here-->
		<div id="tab">
			<h4>Home</h4>
	Vivamus quis lectus ut tellus elementum aliquam. Praesent fermentum adipiscing ligula;
		</div>
		<div id="tab">
			<h4>About</h4>
			Duis nisl risus, ultricies ac iaculis fringilla, ultricies ac nisi.
		</div>
		<div id="tab">
			<h4>Services</h4>
	Nulla hendrerit pellentesque feugiat. In adipiscing orci at nunc laoreet
		</div>
		<div id="tab">
			<h4>Clients</h4>
			Donec ac arcu sit amet libero mollis feugiat non non tellus.
		</div>
	</div>
</div>

Here we have created a menu with four links, and the content of each link available in each tab respectively. Now we apply some styles to make it look like a menu with some content. the css will look like,

body {
	background: #eeeeee;
}
#container {
	width: 630px;
	margin: 0 auto;
}
#menu {
	padding: 0;
	width:630px;
}
#menu li {
	display: inline;
}
#menu li a {
	font-family: Arial;
	font-size:11px;
	text-decoration: none;
	float:left;
	padding: 10px 18px 10px 17px;
	background-color: #2175bc;
	color: #fff;
}
#menu li.selected a {
	background-color: #2586d7;
	margin-top:-2px;
	padding-bottom:12px;
}
#content-tab {
    margin: auto;
    width: 480px;
    height: 100%;
		float: left;
}
#content-tab ul li.selected {
    background: url("../images/arrow.png") no-repeat scroll 0 -2px transparent;
    border: medium none;
    position: relative;
    z-index: 10;
    color: #ffffff;
}
#content-tab div#tab {
	float: left;
	height: 212px;
	padding: 12px;
	width: 537px;
	z-index: 9;
	border: 1px solid #2175bc;
	min-height: 200px;
}

Now our menu with its content is ready. we add jquery now to apply mouse over effect. Mouse over on a menu link will be show it’s content in the content area. The jquery will look like,

    <!-- Jquery package -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <!-- content slide script on mouse over -->
    <script type="text/javascript">
        $(function() {
            var $items = $('#content-tab ul li');
            $items.mouseover(function() {
                $items.removeClass('selected');
                $(this).addClass('selected');
                var index = $items.index($(this));
                $('#content-tab div#tab').hide().eq(index).show();
            }).eq(1).mouseover();
        });
    </script>

We have added the jquery package and the script to slide the content. The script will find the mouse over menu item and adds a class “selected”. “selected” class is used to highlight that particular link. Then the script hides all other links and shows only the mouse over menu link content. Thats it very simple. check out the demo and download it.