Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Thursday, January 28, 2010

Flyout Menus Using Only CSS

One of the things that frustrates those looking to optimize their sites is that, to really do it right, every single page needs to link to every other page in the site. This could create an enormous list of links somewhere on the page that just ain't pretty or functional. Though some sites might not mind it, there is another way. It's not, necessarily, easier, but it is prettier, more functional in more web sites and site designs, and it's still good for SEO: the hierarchial menu.

Clunky name, but they're also known as flyout menus, drop-down menus, et cetera. What happens is, when a user hovers over a link in a navigation area, it highlights like a normal link. It is, in fact, CSS-styled text in an "unordered list." Inside that main navigation, you can have sub-menus where you need them, and those can have sub-menus, and then those can have sub-menus. In all, you can have up to four levels of sub-menus wherever you need them.

There are many places on the web where you can find such a code to use; I have designed a proprietary version that I use for my clients, but, like I said, there are many of CSS flyout and dropdown menus available on the web. Some are free; some charge a small fee for commercial sites or suggest a donation for personal sites.

In any case, this linking system removes all the Flash and JavaScript from the process, making it strictly styled using CSS (linked externally, of course), and all the links as simple text on the site's actual pages.

Next time, a trip into the world of social networking!