...

View Full Version : Two Navigation Lists?



confusedesigner
09-19-2011, 10:37 PM
Hi everyone,

I've made a working nav menu with images.

I'm not sure if i've gone the right way about coding it...

I want something like this which i made in my mock up in photoshop.

http://postimage.org/image/22q0h5mro/

This is my current code.






ul#topnav {
margin: 0; padding: 0;
list-style: none;
float: left;
width: 200px;
position: relative;
top: 190px;
left: 470px;

}
ul#topnav li {
float: left;
margin: 0; padding: 0;

}

/*--CSS Sprites - Default State--*/
ul#topnav a {
display: block;
height: 20px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#topnav li.news a {
background-image: url(images/news_a.gif);
width: 40px;
}
ul#topnav li.music a {
background-image: url(images/music_a.gif);
width: 50px;
}
ul#topnav li.gallery a {
background-image: url(images/gallery_a.gif);
width: 70px;
}
ul#topnav li.bio a {
background-image: url(images/bio_a.gif);
width: 40px;
}


#news li.news a, /*--News Page > News Link--*/
#music li.music a, /*--Music Page > Music Link--*/
#gallery li.gallery a, /*--Gallery Page > Gallery Link--*/
#bio li.bio a, /*--Bio Page > Bio Link--*/

{
background-position: left bottom;
}

/*--BOTTOM NAV--*/

/*--CSS Sprites - Default State--*/
ul#bottomnav a {
display: block;
height: 20px; /*--Specify height of navigation--*/
text-indent: -99999px; /*--Shoot the text off the page--*/
background-position: left top;
}
/*--CSS Sprites - Hover State--*/
ul#bottomnav a:hover {
background-position: left -58px;
}
/*--Assign an image and width to each link--*/
ul#bottomnav li.videos a {
background-image: url(images/video_a.gif);
width: 59px;
}
ul#bottomnav li.events a {
background-image: url(images/events_a.gif);
width: 66px;
}
ul#bottomnav li.extras a {
background-image: url(images/extras_a.gif);
width: 60px;
}
ul#bottomnav li.buy a {
background-image: url(images/buy_a.gif);
width: 55px;
}


#videos li.videos a, /*--Videos Page > Videos Link--*/
#events li.events a, /*--Events Page > Events Link--*/
#extras li.extras a, /*--Extras Page > Extras Link--*/
#buy li.buy a, /*--Buy Page > Buy Link--*/

{
background-position: left bottom;
}

ul#bottomnav {
margin: 0; padding: 0;
list-style: none;
float: left;
width: 240px;
position: relative;
top: 215px;
left: 258px;

}
ul#bottomnav li {
float: left;
margin: 0; padding: 0;

}



<!--NAVIGATION -->


<ul id="topnav">
<li class="news"><a href="index.html">NEWS</a></li>
<li class="music"><a href="music.html">MUSIC</a></li>
<li class="gallery"><a href="gallery.html">GALLERY</a></li>
<li class="bio"><a href="bio.html">BIO</a></li>

</ul>


<ul id="bottomnav">
<li class="videos"><a href="videos.html">VIDEOS</a></li>
<li class="events"><a href="events.html">EVENTS</a></li>
<li class="extras"><a href="extras.html">EXTRAS</a></li>
<li class="buy"><a href="buy.html">BUY</a></li>

</ul>



Is there a simpler way of accomplishing this? Mine seems a bit bloated for such a simple look.

please help me!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum