Date: 9/25/2008 1:55 am · Subject: Graceful degredation · Rating: 0
Hi guys,
Some food for thought..
The current default Navigation menu is rendered dynamically by YUI from WebGUI-generated html markup. This is great because it means we can do graceful degredation for people without Javascript (and also makes the nav links available for SEO).
However if you view the default WG site
(attachment: nav-js.png) with Javascript turned off, you will see that the navigation links look pretty aweful (
attachment: nav-broken.png). It's pretty easy to fix though
(attachment: nav-noscript.png), just edit the navigation template as follows:
- Add an extra class called something like "noscript" to the webguinavigation div
<div id="webguinavigation" class="yuimenubar noscript"> - Add an extra line to the javascript which will automatically remove this class for js-enabled viewers:
YAHOO.util.Dom.removeClass('webguinavigation', 'noscript');
- Add some extra CSS targetting the noscript class to make things look nicer for non-js viewers:
#webguinavigation.noscript {
background: none; /* hide normal background */
}
#webguinavigation.noscript li {
display: inline; /* display on single line */
margin-right: 5px;
}
#webguinavigation.noscript li div {
display: none; /* hide sub-menus */
}
It would be nice to apply this sort of approach in general to templates so that sites degrade nicely. I'm sure someone can suggest a better name than "noscript" for the class too :)
Patrick
