Sliding Door Menus

Love the look of these menus -- called sliding doors. They use CSS:

http://www.couchandassociates.com/index.php

And here are a couple sites that show how to do it...
http://www.alistapart.com/articles/slidingdoors/
(actually, this website is called "A List Apart: For People Who Make Websites" and has some cool stuff on it! His topics for many articles include:

Topics
* Code
* Content
* Culture
* Design
* Process
* User Science

CSS Drop Down Menus

Browser Version Market Share
http://marketshare.hitslink.com/report.aspx?qprid=2
Click this link to see how many people are using different brands and versions of browsers. You may want to bookmark this one or add it to your favorites to keep up with trends.

Browser Version Trend
http://marketshare.hitslink.com/report.aspx?qprid=3
Speaking of trends, this page shows market share of browser brands and trends over time. This is another good candidate for your bookmarks or favorites.

CSSPlay List of Menus
http://www.cssplay.co.uk/menus/
Here you'll find a huge collection of pure CSS horizontal and vertical menus by Stu Nichols.

The Ultimate CSS Only Drop-down Menu
http://www.cssplay.co.uk/menus/final_drop.html
Click this link for Stu Nichols' ultimate horizontal drop-down menu example.

A Flyout Menu With Four Sublevels
http://www.cssplay.co.uk/menus/flyout_4level.html
Here's another complex example from the king of CSS menus, Stu Nichols.

CSS Drop-Down Menu Tutorial Code
http://www.tanfa.co.uk/css/examples/menu/
Check out these tutorials on creating vertical and horizontal menus.

How to Create a Drop-Down Menu in Dreamweaver
http://webdesign.about.com/od/dreamweaverhowtos/ig/Dreamweaver-Drop-Down-Menus/index.htm
This link offers an alternative approach to creating drop-down menus for Dreamweaver users.

Drop-Down, Flyout, Pop-Up Navigation Menus With CSS
http://websitetips.com/css/tutorials/menus/#popupnav
Click this link for a large collection of links to different methods of creating pure CSS menus and pop-ups.

Son of Suckerfish Dropdowns
http://www.htmldog.com/articles/suckerfish/dropdowns/
Still more drop-down menus from the folks at HTML Dog

CSS Lists and Navigation Bars

Listutorial
http://css.maxdesign.com.au/listutorial/index.htm
Click this link for many tutorials on working with lists. The navigation bar at the top is the first one shown in Chapter 1 of this lesson.

Turning a List Into a Navigation Bar
http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar/
This link takes you to a site that shows the second navbar example in Chapter 1. The article also describes how the author created his navbar.

Wildly Useful Free Web Development Programs
http://c82.net/article.php?ID=19
I've included this link so you could try out the third navbar example from Chapter 1. However, the site doesn't contain any description of how the author created the navigation bar.

Standards and Accessibility - Navigation Lists
http://www.brucelawson.co.uk/index.php/2005/navigation-lists/
This page is the reason why most sites use unordered lists for navigation bars these days.

CSS Design: Taming Lists
http://alistapart.com/articles/taminglists/
Here you'll find a great tutorial on styling lists with CSS.

Links, Menus, Navigation, and Rollovers
http://websitetips.com/css/tutorials/menus/#csslists
There are links to many tutorials dealing with lists, menus, navigation, and rollovers on this site.

Setting the Current Menu State With CSS
http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
Here's an alternative way to identify the current page in a navbar, using the "body" tag rather than a class inside the navbar.

Elastic Design
http://www.alistapart.com/articles/elastic/
You'll find a few tips and tricks for creating elastic layouts here.

Dynamic Drive CSS Library
http://www.dynamicdrive.com/style/
Here's where you'll find many sample navbars. Unfortunately, most aren't elastic. Many do nothing when you change the text size in your browser.

Professional Horizontal Series
http://www.cssplay.co.uk/menus/pro_horizontal.html#nogo
Use this link to discover some advanced horizontal navbars. The code is woefully complex and would be difficult to elasticize. You can really see the problems by pressing CTRL + + and CTRL + - while viewing the page in Firefox or a similar browser.