Pure CSS2 Drop-down menus / Interviews - WebReference Update - 030527 | WebReference

Pure CSS2 Drop-down menus / Interviews - WebReference Update - 030527

WebReference Update: May 27, 2003

This week we've got a special treat for you. Stuart Robertson, and others, have taken CSS2 menus to their logical conclusion. Thanks to the flexibility of the :hover pseudo-class they've created JavaScript-free drop-down menus, hierarchical menus, and tabs. We sum up the current state of the art.

In other voices this week, two interviews with Net luminaries, one with Lou Rosenfeld of info architecture fame, and another with Steve Pemberton of (X)HTML fame. Finally, the big news this week in the web-dev world is the release of Acrobat 6, from Adobe.

https://www.webreference.com*- link to us today
https://www.webreference.com/new/*- newsletter home
https://www.webreference.com/new/submit.html*- submit article

New this week on WebReference.com and the Web:

1. BOOK EXCERPT:  XSLT Cookbook: Chapter 8, Pt. 2
2. FEATURE:  Pure CSS2 Drop-down Menus
3. OTHER VOICES: 
4. NET NEWS: 

Like what you see? Spread the word! Feel free to send a copy of this newsletter to your friends and colleagues, and while you're at it, snap a link to WebReference.com.

1. BOOK EXCERPT: XSLT Cookbook: Chapter 8, Pt. 2

This week, we continue our series of excerpts from Chapter 8 of the XSLT Cookbook. Today's portion begins is about Creating Frames and Data Driven Style Sheets. By O'Reilly.

https://www.webreference.com/programming/xslt/chap8/2

2. FEATURE: Pure CSS2 Drop-down Menus

Ever since the :hover pseudo-class came around, authors have wondered about creating various effects with this versatile CSS feature. Rollover menus, link highlights, transparent GIF show- throughs, all and more have been transformed by this lightweight, standards-based technique. But until now, drop-down menus still required JavaScript.

Here's a site that uses lists, CSS, and some JavaScript to create sleek drop-down menus:

https://www.gazingus.org

The holy grail of course would be to create a drop-down menu using no JavaScript to turn on and off the visibility of hidden elements. Stuart Robertson of designmeme.com, has done just that:

https://www.designmeme.com/articles/csspulldownmenu.shtml

The technique uses a contextual selector, and the hover pseudo- class on a list element, like this:

.menu li ul {
display: none;
}

.menu li:hover ul {
visibility: visible;
display: block;
position:absolute;
z-index:1;
width:7em;
border:1px solid black;
}

Stuart reports that this technique works for Mozilla, Netscape 6+, Opera 7, Safari, and Konqueror. IE5 Mac and the latest versions of IE for Windows only support the hover pseudo-class on links. We hope future versions will support the :hover pseudo-class on other elements, as per the W3C specification.

"CSS doesn't define which elements may be in the above states, or how the states are entered and left. "

The technique gracefully degrades on these older browsers (rollover on main menu element).

Others have demonstrated this technique, even creating nested, hierarchical CSS2 menus, or tabs with drop-downs:

https://www.fo3nix.pwp.blueyonder.co.uk/
https://www.kalsey.com/tools/csstabs/
https://www.meyerweb.com/eric/css/edge/menus/demo.html

This technique of using pure CSS2 and lists to create menus is lightweight, standards-based, and accessible. Let me know if you find any other similar techniques.

3. OTHER VOICES:  Interview: Lou Rosenfeld
Interview: Steve Pemberton
CSS Zen Garden
4. NET NEWS:  Adobe ships new Acrobat versions
File swapping shifts up a gear
Digitally Archiving the Universe

That's it for this Tuesday, see you next time.

Andy King
Newsletter Editor, WebReference.com
aking at jupitermedia dot com


Created: May 27, 2003
Revised: May 27, 2003

URL: https://www.webreference.com/new/030527.html