Better navigation....?
We are all clear that navigation on a site should be done with List Items... they extend better and end up being a better solution; however there being like 50 ways to skin a cat; I've found that my favorite way to achieve this is as follows:
<div id="page-navigation">
<ul>
<li><a href="" class="home">Home</a></li>
<li><a href="" class="settings">Settings</a></li>
<li><a href="" class="exit">Exit</a></li>
</ul>
</div>
<ul>
<li><a href="" class="home">Home</a></li>
<li><a href="" class="settings">Settings</a></li>
<li><a href="" class="exit">Exit</a></li>
</ul>
</div>
Then on the stylesheet; I do this:
<style media="screen">
#page-navigation { margin: 0px; padding: 0px; clear: both;}
#page-navigation ul { list-style-type: none; margin:0px; padding: 0px; }
#page-navigation ul li {list-style-type: none; margin:0px; padding: 0px; display: inline; }
#page-navigation ul li a { display: inline-block; padding: 5px; text-decoration: none; background-color: #FFF; color: black; margin-left: 3px; }
#page-navigation ul li a.home { padding-left: 22px; background-image: url(images/icons/navigation/house.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a.settings { padding-left: 22px; background-image: url(images/icons/navigation/application_edit.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a.exit { padding-left: 22px; background-image: url(images/icons/navigation/power.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a:hover { background-color: #CCC;}
</style>
#page-navigation { margin: 0px; padding: 0px; clear: both;}
#page-navigation ul { list-style-type: none; margin:0px; padding: 0px; }
#page-navigation ul li {list-style-type: none; margin:0px; padding: 0px; display: inline; }
#page-navigation ul li a { display: inline-block; padding: 5px; text-decoration: none; background-color: #FFF; color: black; margin-left: 3px; }
#page-navigation ul li a.home { padding-left: 22px; background-image: url(images/icons/navigation/house.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a.settings { padding-left: 22px; background-image: url(images/icons/navigation/application_edit.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a.exit { padding-left: 22px; background-image: url(images/icons/navigation/power.png); background-position: left; background-repeat: no-repeat; }
#page-navigation ul li a:hover { background-color: #CCC;}
</style>
Notice the "page-navigation ul li a" area above for the display setting... this allows me to create a full button that anywhere you click will work.. in addition, adding sub clases will ensure that each one can have an icon and a different feel... what are your thoughts... Do you handle the same way?
Comments
[Add Comment]
[Subscribe to Comments]
I didn't use to do it this way, but once I tried it, I really haven't looked back. It's simple and very clean.
# Posted By Chris
| 12/2/08 2:29 PM
Yeah, I'm finding that this is definitely the way to go... Its showing good benchmark testing too and it's pretty to look at (which is always a plus) :)
# Posted By Pablo Varando
| 12/2/08 7:16 PM
[Add Comment]
