Simple Sprites Menu

Menu design

29 Jan 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.

Menu design

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.

Download Sample

6 Comments
  • Boruch Rappaport
    Posted at 19:34h, 06 February Reply

    I am trying out now designing my first sprites menu from scratch. One question (meanwhile lol), the width of the graphic: if I want the final outcome to be 1024, shouldn’t it be narrower than that taking into consideration the 1 px line that the css will add between pictures? For example, if I will have 5 pictures with 4 borders in the middle, shouldn’t my graphic be 1020 px wide?

    • Yorgo Nestoridis
      Posted at 00:13h, 07 February Reply

      Now this is a really smart question!
      You are right one would think it should be 1020 px, but in fact it does not matter, since you will define the size of each field and position in CSS. Your image will be 1024 in any case.

      Then imagine: if you define the first image with coordinate 0/0 and say 198 width and 38 height, you have the space for your borders at 1 px to reach 200 x 40 ps.

      The final output size of what you show in any field or tab is defined in your CSS style.

      I like this kind of questions as they go for the real thing in comparison to basic CSS and design, thanks for this one!

      • Boruch Rappaport
        Posted at 02:32h, 07 February Reply

        Thanks for the complement. I was throughout school in the lowest 10th of the highest class, that should tell you something about me.

        But you are skipping a step in logic that I am not grasping. Let me give you an example – Lets say you create a graphic 1024 px wide, with 8 images each one 128 px, 8 x 128 = 1024. You define the first image as starting at x coordinate 0, which it does, 128 wide, and then css places it, with a 1 px border, from px #0 on the screen till #130. From 0 – 1 will be the border, 1 – 129 will be the image, and 129 – 130 will be the right border. Next you tell css to take the second image which starts at #128 (through 255), and then css “prints” it, with a 1 px border, from pixel #130 on the screen through 259, if I am not making a mistake, from 130 – 258 will be the image, and #258 till 259 will be the border. Continue in this way and you will get a graphic on the screen wider than 1024.

        • Yorgo Nestoridis
          Posted at 03:01h, 07 February Reply

          You are absolutely right Einstein ….

          but Zweistein would respond: it does not matter as I said in the comment before. If you want to can create an image 2000 wide, because your CSS defines starting point and width of what it needs and it will take from the image just what it needs.

          If it needs 198 it will take 198 from the starting point of your coordinate.

          If you add a border or one pixel, you move your starting point by that pixel and limit to what you need.

          Note: in the tutorial I started ad -1 on the x coordinate, that’s my top pixel which in the design is transparent (it could also be filled with the background but then I would miss out on my first pixel from my gradient, a problem which does not arise on the horizontal scale, since the gradient is linear and evolves vertically.

          ul#nav li.home						{ background-position: -1px -1px; border-left: 1px solid #243e3b; }

          Now that you are all dizzzzzy we will ask Dreistein to decode what I just said.

          Dreistein: Don’t worry about that pixel Boruch: the border is added by CSS irrespective of your design. Just adjust the starting coordinates and width and height of each field to add up together with the border to 1024 and the height of your intended menu.

          • Boruch Rappaport
            Posted at 19:36h, 07 February

            Understood, crystal clear. Although I don’t know why I would want to create an image of 2000 when css is only going to choose less than 1024 of them. Anyway, here’s my first crack:

            http://brapblogs.com/product-site/

            Note that every width is different. The entire width of the image was 1018. I enjoyed the exercise. Thank you.

          • Yorgo Nestoridis
            Posted at 01:44h, 08 February

            You got it! At least Vierstein!

Post A Comment