How it works
At first this example might not seem very different from other navigation experiments. But the most interesting part is hidden in the code and the methodology. My example is called navigation matrix because it actually loads a matrix to display the correct graphics for the menu items. Below I included the image that is downloaded — just once.As you can see it contains all the different states required for the navigation to function properly. In essence it’s based on the method to shift background positions, which of course works faster than shifting individual images. By assigning a specific id to each body tag in individual pages I can target the list elements and set their respective backgrounds. The only thing I need to do is make sure that the background is in the right position for each element.
The first 4 rows are used for the different
ul backgrounds. As you can see they perfectly match with the hover states on the individual pages. The other two rows include the other states I need for the navigation to function properly. Of course some tabs are included more than once, but this is needed because I need the entire row to display as the ul background, instead of just individual elements. The size in kilobytes is exactly the same as the previous matrix.
The HTML is given below
<body id="welcome">
<div id="header">
<ul id="nav">
<li id="wel"><a href="welcome2.html">welcome</a></li>
<li id="pro"><a href="products2.html">products</a></li>
<li id="sup"><a href="support2.html">support</a></li>
<li id="con"><a href="contact2.html">contact</a></li>
</ul>
</div>
</body>
The css is
body {
background: #f1efe2;
}
#header {
margin: 0 auto 0 auto;
width: 650px;
padding: 0;
border: 5px solid #fff;
height: 120px;
background: #666 url(header.png) no-repeat left top;
}
ul#nav {
position: relative;
top: 68px;
left: 188px;
width: 346px;
margin: 0;
height: 22px;
list-style-type: none;
overflow: hidden;
}
body#welcome ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 0; }
body#products ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -22px; }
body#support ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -44px; }
body#contact ul#nav
{ background: transparent url(nav_f_2.png) no-repeat 0 -66px; }
ul#nav li a {
position: absolute;
top: 0;
width: 84px;
text-indent: -9000px;
text-decoration: none;
padding: 22px 0 0 0;
overflow: hidden;
height: 0px !important;
height /**/:22px; /* IE5/Win */
background: transparent url(nav_f_2.png) no-repeat;
}
body#welcome li#wel a
{ background-position: 0 0; width: 94px; left: 0; }
body#welcome li#wel a:hover
{ background-position: 0 0; }
body#welcome li#pro a
{ background-position: -94px -88px; left: 94px; }
body#welcome li#pro a:hover
{ background-position: -94px 0px; }
body#welcome li#sup a
{ background-position: -178px -88px; left: 178px; }
body#welcome li#sup a:hover
{ background-position: -178px 0; }
body#welcome li#con a
{ background-position: -262px -88px; left: 262px; }
body#welcome li#con a:hover
{ background-position: -262px 0; }
body#products li#wel a
{ background-position: 0 -110px; width: 94px; left: 0; }
body#products li#wel a:hover
{ background-position: 0 -22px; }
body#products li#pro a
{ background-position: -94px -22px; left: 94px; }
body#products li#pro a:hover
{ background-position: -94px -22px; }
body#products li#sup a
{ background-position: -178px -88px; left: 178px; }
body#products li#sup a:hover
{ background-position: -178px 0; }
body#products li#con a
{ background-position: -262px -88px; left: 262px; }
body#products li#con a:hover
{ background-position: -262px 0; }
body#support li#wel a
{ background-position: 0 -88px; width: 94px; left: 0; }
body#support li#wel a:hover
{ background-position: 0 -44px; }
body#support li#pro a
{ background-position: -94px -110px; left: 94px; }
body#support li#pro a:hover
{ background-position: -94px -44px; }
body#support li#sup a
{ background-position: -178px -44px; left: 178px; }
body#support li#sup a:hover
{ background-position: -178px -44px; }
body#support li#con a
{ background-position: -262px -88px; left: 262px; }
body#support li#con a:hover
{ background-position: -262px 0; }
body#contact li#wel a
{ background-position: 0 -88px; width: 94px; left: 0px; }
body#contact li#wel a:hover
{ background-position: 0 -44px; }
body#contact li#pro a
{ background-position: -94px -88px; left: 94px; }
body#contact li#pro a:hover
{ background-position: -94px 0; }
body#contact li#sup a
{ background-position: -178px -110px; left: 178px; }
body#contact li#sup a:hover
{ background-position: -178px -66px; }
body#contact li#con a
{ background-position: -262px -66px; left: 262px; }
body#contact li#con a:hove
r { background-position: -262px -66px; }
p { text-align: center; }
p a
{ color: #666; text-decoration: none; font: 11px/1.5 tahoma, arial, verdana, sans-serif; }
p a em
{ font-style: normal; border-bottom: 1px solid #999; }
p a:hover em
{ color: #333; border-bottom: 0; }
you can see the navigation tab here
1 comment:
TY for this, been looking for this CSS sprite example since i saw in the delinked:
https://www.webpagefx.com/blog/web-design/30-exceptional-css-navigation-techniques/
Post a Comment