Learn how to create an arrow design navigation bar with rollover effect using CSS & jQuery.

overlapping menu example
Browser Support»
Language»CSS3, HTML4 & jQuery
Difficulty»Intermediate
Estimated Completion Time»15 minutes.

Steps to Create the Overlapping Menu

→ Download and include jQuery
→ Create the links using Anchor tags
→ Style the links using CSS Stylesheet
→ Apply the Overlapping Effect using jQuery

→ Download & Include jQuery

jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight “write less, do more” JavaScript library.
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from  jQuery.com .

We will have to include jQuery inside the <head> tags.

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding src attribute to the script tag.
Set the value of src attribute to “http://code.jquery.com/jquery-latest.js”;

<head>

<script type="text/javascript"
src="https://code.jquery.com/jquery-latest.js">
</script>
 
</head>

→ Create the Links

We will create the most common links that can be seen on almost every website.
We will create four menu items “HOME, ABOUT US, LOGIN, CONTACT US”.

Here’s the Html code

We will create a <div with id="menu" and create all our links inside this <div id="menu">

NOTE: Add inline style to the last menu item to make is backgound color transparent.


<div id="menu">
	<a href="home.html" >		HOME		</a>
	<a href="about.html" >		ABOUT US	</a>
	<a href="login.html" >		LOGIN		</a>
	<a href="contacts.html" style="background-color:transparent"> CONTACT US </a>
</div> <!-- #menu --> 

→ Style the Links using Stylesheet

We will now add background to all the links (anchor tags) inside the <div id="menu">.
To get the overlapping effect we will use Two images .
The First image(link.png) will have a white background.
The Second image(hover.png) will have a red background that will be shown when the mouse hovers over the links.
Here are the two images .

overlapping menu image
overlapping menu image

Here’s the CSS Stylesheet code

The images have a maximum height of 30 pixels, so we will apply same height to the links <a></a> tags.

<style type="text/css">

#menu a	{
	text-decoration: none;
	background:#ffffff url(images/link.png) top right  no-repeat ;
	float: left;
	padding: 0px 30px 0 12px;
	font-size: 21px;
	line-height: 30px;
	height: 30px;
	}
#menu a:hover	{
	background:#ffffff url(images/hover.png) top right  no-repeat ;
	}
 
</style>

→ jQuery for Overlapping Effect

Here’s how it will look when jquery is not applied on the menu on a grey background color.

Overlapping menu css

With the jquery coding what we will do is change the background color of the previous menu item to red color on Mouseover event and replace the color back to white on Mouseout event.
This way it will appear as the menu is overlapping over each other.

Here’s the jQuery code


<script type="text/javascript">

$(document).ready(function(){

	$("#menu a" ).mouseover(function(){
		$(this ).prev().css({backgroundColor:'#f10'});
		});

	$("#menu a" ).mouseout(function(){
		$(this ).prev().css({backgroundColor:'#fff'});
		});

});

</script> 

The Explanation

Line 4 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

Line 6 › $("#menu a" ).mouseover(function(){
Line 10 › $("#menu a" ).mouseout(function(){
→ These are the events that gets called when the mouse hovers in and hovers out of the links.

[For changing the Background color or previous link]
Line 7 › $(this ).prev().css({backgroundColor:'#f10'});
Line 11 › $(this ).prev().css({backgroundColor:'#f10'});
→ The statement on line 7 gets called when the mouse hovers on the links.
→ The statement on line 11 gets called when the mouse hovers out of the links.
→ The jQueries prev() function selects the previous link.
→ Then it will change the background color of the previous link to red color using jQueries css() .


No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


CSS Tutorials and Resources


Pinterest