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!

Page Heirarchies & Stuctures

The most commonly pictured graph of a hierarchy is probably the "management" or "chain-of-command" type hierarchy, where all the different areas branch off downward from one main area, with the bottom rows never in contact with the main starting point. The image to the left is an illustration of this kind of structure.

With a web site, the main area (your index page) needs to be connected to every other page of your site directly, or within one degree of it. The picture to the right over there kind of illustrates what I am talking about.

More than that, though, each page of your site has to be directly connected to each other. Imagine each of your pages connected by little lines, something like this:

See how it's starting to look more like a spider's web rather than a traditional kind of hierarchial structure? They call it the World Wide Web for a reason. More than that, though, this kind of structure increases the chances that every page in your site gets indexed by seacrh engine spiders that get on your little "web" there, looking for content.

It's a lot like linking to a site from your site: when you link to another site that you think your users/customers might find useful, you are, in effect, creating a spider's thread from your page to the resource, not only for spiders to follow, but for your users, too. It works conversely, too: when you've got great content that people link to, they create a thread from their page to yours, increasing your relevance to Google, in particular, thus helping your SEO.

To break it down: your index page should link to every other section of your site, and so should every other page in the site. A page without links to the other sections of your site or with only one way into it is pretty useless for both your customers and for search engine spiders (though I'm sure there are arguments for "orphaned" or "semi-orphaned" pages like that, though I can't imagine what they are).

In our next few installments, we'll discuss how to built a functional navigation system for your site that won't hurt its SEO (no Java or scripts?!?!), and effectively using linking to keep your social networks up-to-date and relevant.