Hi All, I've done a version of this kind of menu which is considerably more compact than most of the others Ive seen and is very accessible. See the entry below:
http://www.danwebb.net/lab/archives/000018.html Example page is here: http://www.danwebb.net/lab/html/folders3.html Let me know what you think. Most of the scripts Ive seen that do this kind of thing are immense and I do see why. Mine is quite similar to the one below but is more compact and has the facility to pre open to a selected node. Cheers, Dan Quoting Mike Foskett <[EMAIL PROTECTED]>: > Gerhard, > > You could try the method I've used previously. > The top link expands sub links. Works with JavaScript off and is > accessible. > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> > <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> > <head> > <title>Expanding menus - Web Semantics</title> > <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> > <script type="text/javascript"> > function initMenus() { > if (!document.getElementsByTagName) return > var aMenus = document.getElementsByTagName("li"); > for (var i = 0; i < aMenus.length; i++) { > var mclass = aMenus[i].className > if (mclass.indexOf("expandable") > -1) { > var submenu = aMenus[i].childNodes > for (var j = 0; j < submenu.length; j++) { > if (submenu[j].tagName == "A") { > submenu[j].onclick = function() { > var node = this.nextSibling > while (1) { > if (node != null) { > if > (node.tagName == "UL") { > var d > = (node.style.display == "none") > > node.style.display = (d) ? "block" : "none" > > this.className = (d) ? "expanded" : "expandable" > return > false; > } > node = > node.nextSibling; > } > else { > return false; > } > } > return false; > } > submenu[j].className = > (mclass.indexOf("open") > -1) ? "expanded" : > "expandable" > } > if (submenu[j].tagName == "UL") > submenu[j].style.display = > (mclass.indexOf("open") > -1) ? "block" : > "none" > } > } > } > } > function addLoadEvent(func) { > if (!document.getElementById | !document.getElementsByTagName) return > var oldonload = window.onload > if (typeof window.onload != 'function') { > window.onload = func; > } else { > window.onload = function() { > oldonload() > func() > } > } > } > addLoadEvent(initMenus) > </script> > </head> > <body> > <div id="navigation"> > <h2>Site navigation</h2> > <ul> > <li class="expandable"> > <a href="#">Services</a> > <ul> > <li><a href="#">Free site check</a></li> > <li><a href="#">Comprehensive site check</a></li> > <li><a href="#">Template coding</a></li> > <li><a href="#">In-house training</a></li> > <li><a href="#">No-nonsense advice</a></li> > </ul> > </li> > <li><a href="#">Projects and Clients</a></li> > <li class="expandable"> > <a href="#">Tutorials</a> > <ul> > <li><a href="#">Accessibility</a></li> > <li><a href="#">CSS</a></li> > <li><a href="#">JavaScript</a></li> > <li><a href="#">Web standards</a></li> > </ul> > </li> > </ul> > </div> <!-- id="navigation" --> > </body> > </html> > > > > I hope it helps. > > mike 2k:)2 > > > > -----Original Message----- > From: Gerhard Schoder [mailto:[EMAIL PROTECTED] > Sent: 08 July 2004 20:58 > To: [EMAIL PROTECTED] > Subject: Re: [WSG] Does anybody know an expandable vertical css/js menu based > on uls? > > > Hi Brian! > Thanks alot for your link, it's almost everything I need, except for > that i would like a klick on a top nav item to toggle the visibility of > the containing sub nav items... That would be --- perfekt =) Thanks again, > Best Regards, Gerd > > brian cummiskey wrote: > > > > > check out http://css.maxdesign.com.au/listutorial/sub01.htm > > ***************************************************** > > The discussion list for http://webstandardsgroup.org/ > > See http://webstandardsgroup.org/mail/guidelines.cfm > > for some hints on posting to the list & getting help > > ***************************************************** > > > > ***************************************************** > The discussion list for http://webstandardsgroup.org/ > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ***************************************************** > > > > > ********************************************************************** > This email and any files transmitted with it are confidential and > intended solely for the use of the individual or entity to whom they > are addressed. If you have received this email in error please notify > the system manager. > This footnote also confirms that this email message has been swept by > MIMEsweeper for the presence of computer viruses. > www.mimesweeper.com > ********************************************************************** > > > ***************************************************** > The discussion list for http://webstandardsgroup.org/ > See http://webstandardsgroup.org/mail/guidelines.cfm > for some hints on posting to the list & getting help > ***************************************************** > > ***************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help *****************************************************
