does anyone know where i can find [URL=http://javascript.internet.com/navigation/super-edition-menu.html]this menu[/URL] in vertical rather then horizontal? i’ve had a look on that site and have not been able to find one so far.
@konithomimoJan 27.2006 — #after each line that begins with AddMenu just add <br>. If that doesnt work then put that into a function in your header. Then create a div where you want the menu to be. Then put quotes around all of the Menu script parts and add in the <br>s. Then make the innerHTML of the div the string that you created.
@FangJan 27.2006 — #son of Suckerfish is better. See their [URL=http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html]vertical menu[/URL] or if it has to in one column:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>son of Suckerfish</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!-- http://www.htmldog.com/articles/suckerfish/dropdowns/ --> <script type="text/javascript"> sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" sfhover"; } sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); </script>
<style type="text/css"> body { font-family: arial, helvetica, serif; }
#nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; line-height: 1; }
#nav a { display: block; width: 10em; }
#nav li { /* all list items */ width: 10em; /* width needed or else Opera goes nuts */ }
#nav li ul { /* second-level lists */ display:none; background: orange; width: 10em; }
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto; display:block; }