|
|
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.
| http://www.webreference.com | | *- link to us today |
| http://www.webreference.com/new/ | | *- newsletter home |
| http://www.webreference.com/new/submit.html | | *- submit article |
| 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.
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.
http://www.webreference.com/programming/xslt/chap8/2
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:
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:
http://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:
http://www.fo3nix.pwp.blueyonder.co.uk/
http://www.kalsey.com/tools/csstabs/
http://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 |
CMSWatch interviews Lou Rosenfeld on content management and
information architecture.
http://www.cmswatch.com/Features/PeopleWatch/FeaturedPeople/?feature_id=90
CMSWatch.com, May 23, 2003
XML.com interviews Steven Pemberton, chair of the HTML working
group of the World Wide Web Consortium.
http://www.xml.com/pub/a/2003/05/21/pemberton.html
XML.com, May 21, 2003
What can be done with CSS? Behold.
http://www.csszengarden.com/
Dave Shea, May 2003
| 4. NET NEWS: | Adobe ships new Acrobat versions File swapping shifts up a gear Digitally Archiving the Universe |
Adobe ships new Acrobat versions
Adobe released on Acrobat 6 on Tuesday, complete with a smarter
PDF optimizer.
http://news.com.com/2100-1012_3-1010176.html
News.com, May 27, 2003
File swapping shifts up a gear
A new generation of efficient peer-to-peer tools is finding its
groove on the Internet, spelling tougher times ahead for movie
studios' attempts to quell online piracy.
http://news.com.com/2100-1026_3-1009742.html
News.com, May 27, 2003
Digitally Archiving the Universe
The NCSA has big plans for the universe.
http://www.internetnews.com/dev-news/article.php/10792_2212351
Internetnews.com, May 27, 2003
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: http://www.webreference.com/new/030527.html
