Copyright © 2011
Yorgo Nestoridis. Visit the original article at
http://yorgonestoridis.com/web-design/simple-sprites-menu/.
How to build a fading Navigation with Sprites
To build a navigation bar using sprites we need an image (menu design), some CSS code to style the menu area and some HTML code to link the menu to target. Finally we drive the feature with a jQuery.
1. Design the Menu
For best design use Photoshop.
- Create a new transparent image with the width of your navigation bar and double the height of the visible menu. In my case, the bar is 1024 pixels wide and 68 pixles high, my new image is thus 1024×137 (I add 1 pixel to the hight which I leave unused).
- Design your Tabs and ad text on the normal view.
- Do the same on the Hover view.
- Save your file.
2. Create your CSS Style Sheet
I start by resetting CSS (import reset style sheet) and then add some general page styles before styling the fading navigation:
@charset "utf-8";
/*
Imports
*/
@import url("resets.css");
/*
General Page Style
*/
body { background: #ffffff; }
#page-wrap { margin: 0 auto; width:1024px; }
h2 { color: #fff; font: 30px Arial, Helvetica, sans-serif; margin: 20px 0 40px 0; }
/*
Basic Elements
*/
#content { width: 1024px; position: absolute; top: 224px; }
/*
Nav / Menu Fade
*/
ul#nav li, ul#nav li a { background: url(../images/nav8.png) no-repeat left top; height: 67px; width: 192px; }
ul#nav li { float: left; border: 1px solid #666666; border-left: none;}
ul#nav li a { display: block; text-indent: -9999px; }
ul#nav li.home { background-position: -1px -1px; border-left: 1px solid #243e3b; }
ul#nav li.about { background-position: -194px -1px; }
ul#nav li.contact { background-position: -387px -1px; }
ul#nav li.portfolio { background-position: -580px -1px; }
ul#nav li.development { background-position: -772px -1px; width: 250px;}
ul#nav li.home a { background-position: -1px -69px; }
ul#nav li.about a { background-position: -194px -69px; }
ul#nav li.contact a { background-position: -387px -69px; }
ul#nav li.portfolio a { background-position: -580px -69px; }
ul#nav li.development a { background-position: -772px -69px; width: 250px; }
The important part is to position your background properly for each menu tab or field. Use the ruler in Photoshop to measure the distances and translate them to x and y values.Please note that the normal view maintains the y value at -1 pixel while the hover view is constant at -69 pixels. The x values increase in function of the width of each tab.
3. Embed your menu with HTML
To display the menu, we need to embed it in our HTML page using some code snippet similar to the following:
<body>
<div id="page-wrap">
<div id="content">
<h2>Sprites Menu</h2>
<ul id="nav">
<li class="home"><a href="#">Blog</a></li>
<li class="about"><a href="#">About</a></li>
<li class="contact"><a href="#">Contact</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="development"><a href="#">Development</a></li>
</ul>
</div>
</div>
</body>
To make the whole thing work with the fade effect we call for a jQuery in the header of the document:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul#nav li a").css({"opacity" : 0}).hover(function(){
$(this).stop().animate({"opacity" : 1}, 600); //Change fade-in speed
}, function(){
$(this).stop().animate({"opacity" : 0}, 1200);//Change fade-out speed
});
});
</script>
Note: Change fade-in and fade-out speed from the java script as indicated; the values are in milliseconds.
Done!
To make your life easier, you may download my sample files which include the CSS reset and the PSD file of the featured menu.
Related posts:
- Simple Shopping Cart for your Blog
- Web Design Backgrounds
- Web Design Workshop 16 – Scroll over Background
- Transparent WordPress Semiomantics XO
- Transparent WordPress Theme Design
