A website's navigation is one of the most crucial and often telling aspects of a site design. When it comes to website navigation, the options are nearly unlimited, yet of course whichever option selected needs to work effectively both in the visual layout, and provide consistent functioning across the browsers. In this regard, no one type of navigation style is best, and in many cases more than one type of system is employed to meet a site's needs and ensure full site access to all visitors. Following is information on the different types most often used, but of course with new advancements in website scripting this list will likely change. Menu systems can either be horizontal or vertical in most cases.
Text Links
The default standard is simple text links. I know, this may seem visually boring, but it is important to consider ADA (American Disabilities Act) compliancy in any navigation system used. So in those cases where you are unsure if your navigation system will work with adaptive technology, or if someone has JavaScript disabled in their browser, then text links are the defacto option. In many cases you will see text links used at the bottom of a page. Of course text links don't need to be boring. With CSS styling they can be rendered as small-caps, the color changed on mouse-over, have an underline only on mouse-over or not at all, etc.
JQuery Menu Systems
JQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions. This allows pages to load faster, and ensures greater cross-browser and device compatibility. JQuery menu systems utilize a list menu which allows it to render even if JavaScript is turned off, and it is ADA compliant so easily read by audio readers. Another plus with JQuery is that it was designed with mobile devices and HTML5 in mind so should work properly with browser updates of the future. As with DTHML menus, the menu systems provide customizable drop-down menus, image embedding, and flash like animations such as illumination, floating button effects, and more.
Pure CSS Menu Systems
CSS menu systems rely soley on CSS code, which makes them the most compliant drop-down menu option with regard to ADA. Pure CSS Menus, those not utilizing JavaScript/JQuery, are gradually becoming more popular on websites since all the primary browsers now render "most" CSS correctly. Much as with DHTML and JQuery menus, CSS Menus provide multi-level drop-downs functionality with a customizable look in colors and styling.
Accordion Menus
Accordion Menus are menus with images that expand/contract upon mouse-over. This type of menu is becoming increasingly popular since it combines the visual benefit of using photos/images with interactivity (and effects such as "dark to light" upon expanding), and of course navigation linking. Accordion menus are most often scripted with JQuery, and provide a very nice look to contemporary styled websites.
Tabbed Menus
Tabbed Menu systems are a great way to provide a lot of text content on a page that is nicely "out of view" until selected; once a tab is selected then only that content is shown in the provided content area. This type of menu, created with JQuery, provides a clean, contemporary look that is effective with most any type of website and is often utilized both in the main content areas and on page sidebars.
Toggle to View Navigation
Toggle Navigation is a great way to bring provide additional navigation, a contact form, a questionaire, or most anything else you want available upon request. As you will see from the screenshot, the menu is mostly hidden from sight until selected, and will resume its prior placement upon release. This type of "toggle to view" is also often used on headers and footers as well (see our footer "more info" tab for a working example).
Breadcrumb Navigation / Pagination
Breadcrumb navigation is when the text links are provided at the top of the content area of a page to display the navigation path. This type of navigation is especially common on blog and CMS websites which have sub-menu pages. Pagination systems use a similar feature, yet in this case you will generally see a << back link ... more >> link. This type of navigation is most commonly used on image gallery websites.
Mega-DropDown Menus
The mega-Dropdown navigation is an advanced JQuery cross-browser compatible menu system that provides an impressive way to present multiple links in columns, images/icons, list items, background colors to just a portion or all, styled borders, etc. Do to the size of these type of menus, they require a the top-level menu links to be spaced widely apart, and the page defined for a large screen resolution is best.
Floating Menus
The Floating Menu is used on contemporary websites that want to ensure that the navigation is always in sight. Of the floating menu options, the primary types are the horizontal navigation bar that always remains in view on top to of the screen no matter how far a page is scrolled, and the vertical navigation box that always remains in view (typically at the left column area) on the page. These types of menus are different from the "often intrusive" floating Ads that now frequent the web.
Search Engines & Site-Maps
Search Engines are a popular option for large websites, and are especially useful for dynamic websites (such as blogs) where the content is often changing. For most CMS applications you can expect the search engine to be a default feature, though some will required a plugin add-on to be installed. For static websites, a search engine is still a good idea if you have lots of content that could easily be missed by a visitor. In the same regard, a Site-Map is always recommend for websites with more than 10 pages. It is well known that many visitors will immediately look for the site-map, and in addition, a good site-map will often get indexed, which in turn will improve your website's SEO ranking.
