Navigation listing via CSS

A very good example of navigation listing via CSS at http://l.pr/a43f9/ (Nifty Navigation Tricks Using CSS) the site shows us how simply by using CSS the user is able to generate JavaScript free dynamic navigation menu. It generates attractive, text based menu that loads easily and faster and boosts accessibility and enhances SEO for website. It replaces old fashioned image based navigation. CSS styles the navigation menu markup (avoids standard bulleted format). CSS builds attractive rollover effects far simpler that of image based JavaScript (old fashioned). CSS creates rollover effect using the: hover pseudo-class selector, which is the same selector the user uses for styling the hover state of the link. It is worth noting that in IE 7.0 onwards the: hover pseudo-selector can be applied to any HTML element in the HTML document. Another feature of CSS styling for navigation menu is creating consistent (in appearance) sub navigation listing, adding nested list, and menu. Further one can make horizontal aligned menu listing using CSS styling. Moreover for creating boxes around links the developer needs to increase the left and right padding to the links. Further it also possible to create button like navigation system, a common occurrence in most websites, using only CSS. This is feasible by using the CSS border attributes. By assigning different colors to the border edges we create a slightly beveled effect, as for e.g. border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; as we give the left edge a slightly lighter shade than the right edge to get that effect (likewise for the top and bottom edges). Another development using this technology is creation of tabbed horizontal navigation menu (popular navigation choice) but this could be erroneous in case the user adds fresh tabs and the original navigation styling was created using a CMS, however, a small resolution the author advocates is creating a tab effect by combining background images and text styled with CSS. Thus introducing a CSS based navigation menu is a good option to increase the sites accessibility and performance sans affecting its look and feel.

<345:1816>

Reference: -

Rachel, A. the CSS Anthology: 101 Essential Tips, Tricks & Hacks, 3rd Edition, viewed 31 August 2009, http://www.sitepoint.com/article/navigation-using-css/4/