CSS Text based navigation bar with images
— Although navigation bars can be styled very pretty using only text and CSS sometimes circumstances might require them to be image based. The problem this brings is that it’s not good at all to have the navigation’s markup to be actually made of linked images, being one of it’s biggest issue that search engines and screenreaders wouldn’t be able to pick up the text in those images. And it gets even worst if its have to be animated as most of the solutions for that would require Javascript. Having that said, in this short article I will hopefully show you how I create these animated imaged based, navigation bars in an clean and accessible way using images and CSS.
Preparing the XHTML:
Ok, lets pretend we need to have the following buttons: Home, Services, About Us and Contact Us. We will use a list to create the navigation bar, as navigation bars are a list of links, so they should be marked up as such:
<ul id="topnav">
<li id="topnav_1"><a href="home.html" title="Home">Home</a></li>
<li id="topnav_2"><a href="services.html" title="Services">Services</a></li>
<li id="topnav_3"><a href="about-us.html" title="About Us">About Us</a></li>
<li id="topnav_4"><a href="contact-us.html" title="Contact Us">Contact Us</a></li>
</ul>
» Continue reading: CSS Text based navigation bar with images…
