Saturday, February 14, 2009

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.

No comments:

Post a Comment