IRREGULAR OVERLAPPING MENUS
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.Here's the code:
1 2 3 4 5
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
</head>
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";1 2 3 4 5 6 7
<head>
<script type="text/javascript"
src="http://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.
1 2 3 4 5 6 7 8
<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 .
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.1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<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.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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<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() .
Post a Comment