49540 Class Links, Week 7

ZEN CSS EXAMPLES< [menu rollovers]

http://www.csszengarden.com/167/ block rollover

http://www.csszengarden.com/166/ block rollover

http://www.csszengarden.com/106/ block rollover

http://www.csszengarden.com/088/ dropdown

OTHER NAVIGATION EXAMPLES: all are CSS only

http://www.cssplay.co.uk/menus/fly_definition.html dropdown flyout definition list

http://www.cssplay.co.uk/menus/menufour.html right bar on hover

http://www.cssplay.co.uk/menus/doors.html tabbed menu

http://www.cssplay.co.uk/menus/drop_definition2.html dropdown menu

http://www.cssplay.co.uk/menus/opaque_dl.html dropdown variable width with opacity

http://www.cssplay.co.uk/menus/flyout2.html dropdown flyout menu

http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu -demo.html#expandDown Fish Eye Menu

...more at

MENUS USING LISTS

http://www.smashingmagazine.com/2009/12/11/styling-html- lists-with-css-techniques-and-resources// Tutorial on lists and dropdown menus, includes nested lists

http://css.maxdesign.com.au/listutorial/ Tutorial on lists and dropdown menus, includes nested lists

http://css.maxdesign.com.au/listamatic/index.htm Links to various menu and list styles—they are UGLY but the CSS works

http://css.maxdesign.com.au/listamatic2/vertical02.htm vertical menu, nested rollover list

http://www.noupe.com/css/css-styled-lists-20-demos- tutorials-and-best-of.html 20 List Demos: see #7, #8 [the link is very small at the bottom of the page or go to: http://www.3point7designs.com/web-design2.html], and #9

REVIEW the following in Listamatic:

http://css.maxdesign.com.au/listamatic/vertical06.htm simple separators

http://css.maxdesign.com.au/listamatic/vertical10.htm a vertical list using a border element

http://css.maxdesign.com.au/listamatic/horizontal03.htm horizontal list navbar

http://css.maxdesign.com.au/listamatic/horizontal05.htm tabbed navbar

http://css.maxdesign.com.au/listamatic/horizontal06.htm tabbed navbar

http://css.maxdesign.com.au/listamatic/vertical13.htm 3D buttons

To create equally sized buttons you must use float instead of display:inline. Remember to also float the UL parent so that the parent doesn't collapse down and clear the float further down.

To create menubars that are horizontally centered, you must use display:inline

http://www.smashingmagazine.com/2009/03/24/designing- drop-down-menus-examples -and-best-practices/ Best Practices for dropdown menus

EXAMPLES OF TABBED MENUS; see LIST MENUS from HTMLDog

http://www.htmldog.com/examples/ Scroll down to 'Lists' Tabs [1 throught 6] for other examples of nice tabbed menus

We saw this example in Week 5 [CSS3 rounded corners applied to list items]

CONTINUED, for REVIEW

CASCADE, INHERITANCE, SELECTORS

Inheritance and Specificity

http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/ Taming Advanced Selectors

http://webdesignfromscratch.com/html-css/css-inheritance -cascade.php Inheritance, Cascade, Specificity

http://www.smashingmagazine.com/2007/07/27/css- specificity-things-you-should- know/ CSS specificity from Smashing Magazine

http://www.communitymx.com/content/article.cfm?page=1& cid=2795D Inheritance, Cascade Specificity

http://monc.se/kitchen/38/cascading-order-and- inheritance-in-css Inheritance, Cascade Specificity

http://reference.sitepoint.com/css/inheritancecascade Inheritance, Cascade Specificity

hhttp://www.brainjar.com/css/using/default3.asps Inheritance, Cascade Specificity

PERFECT layouts

'perfect' layouts Perfect/%/non-breaking layouts • BE SURE TO READ THIS•

'perfect' floats layout Adaptable floats • BE SURE TO READ THIS•

http://jontangerine.com/log/2007/09/the- incredible-em-and-elastic-layouts-with-css More on em-based layout • BE SURE TO READ THIS•

Design for the Web 2

49540 FALL 2009

Week 7