|
View Full Version : Dropdown menu bar caz15th 03-29-2007, 02:29 AM I know Lissaexplains does have drop down menus but they all have buttons you have to click to see the options. Does anyone know the HTML code for the dropdown boxes where you simply hover your mouse over the the heading box and the menu automatically drops down, allowing you to roll your mouse over the selections then click your chosen link? Ges 03-29-2007, 06:02 AM Hi caz15th, Here you go. You can add nore menu items by just copying '<li class="mainitems">' blocks. I've split up the CSS so you can understand/change things easier. You'll also find it now works across browsers. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css"> <!-- #csstopmenu, #csstopmenu ul{ padding: 0; margin: 0; list-style: none; } #csstopmenu li{ float: left; position: relative; } #csstopmenu a{ text-decoration: none; } .mainitems{ border: 1px solid black; border-left-width: 0; background-color: #00ff99; } .headerlinks a{ margin: auto 8px; font-weight: bold; color: black; } .submenus{ display: none; width: 10em; position: absolute; top: 1.2em; left: 0; background-color: #99ccff; border: 1px solid black; } .submenus li{ width: 100%; } .submenus li a{ display: block; width: 100%; text-indent: 3px; } html>body .submenus li a{ /* non IE browsers */ width: auto; } .submenus li a:hover{ background-color: #66ffff; color: black; } #csstopmenu li>ul {/* non IE browsers */ top: auto; left: auto; } #csstopmenu li:hover ul, li.over ul { display: block; } html>body #clearmenu{ /* non IE browsers */ height: 3px; } --> </style> <script language="JavaScript" type="text/javascript"> <!-- startMenu = function() { if (document.all&&document.getElementById) { cssmenu = document.getElementById("csstopmenu"); for (i=0; i<cssmenu.childNodes.length; i++) { node = cssmenu.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", "") } } } } } if (window.attachEvent) window.attachEvent("onload", startMenu) else window.onload=startMenu; //--> </script> </head> <body> <ul id="csstopmenu"> <li class="mainitems" style="border-left-width: 1px"> <div class="headerlinks"><a href="">1st Menu Item</a></div> <ul class="submenus"> <li><a href="http://lissaexplains.com/basics.shtml">Lissa Explains The Basics</a></li> <li><a href="http://www.w3schools.com/html/default.asp">Learning HTML</a></li> <li><a href="http://www.w3schools.com/css/default.asp">Learning CSS</a></li> <li><a href="http://www.w3schools.com/js/default.asp">Learning JavaScript</a></li> </ul> </li> <li class="mainitems"> <div class="headerlinks"><a href="">2nd Menu Item</a></div> <ul class="submenus" style="width: 14em"> <li><a href="">Sub 2 Item 1</a></li> <li><a href="">Sub 2 Item 2</a></li> <li><a href="">Sub 2 Item 3</a></li> </ul> </li> <li class="mainitems"> <div class="headerlinks"><a href="">3rd Menu Item</a></div> <ul class="submenus"> <li><a href="">Sub 3 Item 1</a></li> <li><a href="">Sub 3 Item 2</a></li> <li><a href="">Sub 3 Item 3</a></li> <li><a href="">Sub 3 Item 4</a></li> </ul> </li> </ul> <div id="clearmenu" style="clear: left"></div> <!-- END OF SCRIPT --> </body> </html> Hope this is ok. Regards, Ges. Sarstar 03-30-2007, 12:51 AM Dynamic Drive has one. Not sure if this is what you want though... http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm caz15th 04-01-2007, 11:35 PM Thanks, both of you :D Though Ges, with that code, how to you make the submenu boxes the same width as the main items/headerlinks boxes? Ges 04-02-2007, 12:24 AM Hi caz15th, In .submenus {.... change the width to 100% instead of 10em and then in the main menu lists <ul class="submenus" style="width: 14em"> take out the in-line style. So here's the code again with the changes; <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> <style type="text/css"> <!-- #csstopmenu, #csstopmenu ul{ padding: 0; margin: 0; list-style: none; } #csstopmenu li{ float: left; position: relative; } #csstopmenu a{ text-decoration: none; } .mainitems{ border: 1px solid black; border-left-width: 0; background-color: #00ff99; } .headerlinks a{ margin: auto 8px; font-weight: bold; color: black; } .submenus{ display: none; width: 100%; position: absolute; top: 1.2em; left: 0; background-color: #99ccff; border: 1px solid black; } .submenus li{ width: 100%; } .submenus li a{ display: block; width: 100%; text-indent: 3px; } html>body .submenus li a{ /* non IE browsers */ width: auto; } .submenus li a:hover{ background-color: #66ffff; color: black; } #csstopmenu li>ul {/* non IE browsers */ top: auto; left: auto; } #csstopmenu li:hover ul, li.over ul { display: block; } html>body #clearmenu{ /* non IE browsers */ height: 3px; } --> </style> <script language="JavaScript" type="text/javascript"> <!-- startMenu = function() { if (document.all&&document.getElementById) { cssmenu = document.getElementById("csstopmenu"); for (i=0; i<cssmenu.childNodes.length; i++) { node = cssmenu.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", "") } } } } } if (window.attachEvent) window.attachEvent("onload", startMenu) else window.onload=startMenu; //--> </script> </head> <body> <ul id="csstopmenu"> <li class="mainitems" style="border-left-width: 1px"> <div class="headerlinks"><a href="">1st Menu Item</a></div> <ul class="submenus"> <li><a href="http://lissaexplains.com/basics.shtml">Lissa Explains The Basics</a></li> <li><a href="http://www.w3schools.com/html/default.asp">Learning HTML</a></li> <li><a href="http://www.w3schools.com/css/default.asp">Learning CSS</a></li> <li><a href="http://www.w3schools.com/js/default.asp">Learning JavaScript</a></li> </ul> </li> <li class="mainitems"> <div class="headerlinks"><a href="">2nd Menu Item</a></div> <ul class="submenus"> <li><a href="">Sub 2 Item 1</a></li> <li><a href="">Sub 2 Item 2</a></li> <li><a href="">Sub 2 Item 3</a></li> </ul> </li> <li class="mainitems"> <div class="headerlinks"><a href="">3rd Menu Item</a></div> <ul class="submenus"> <li><a href="">Sub 3 Item 1</a></li> <li><a href="">Sub 3 Item 2</a></li> <li><a href="">Sub 3 Item 3</a></li> <li><a href="">Sub 3 Item 4</a></li> </ul> </li> </ul> <div id="clearmenu" style="clear: left"></div> <!-- END OF SCRIPT --> </body> </html> The sub-menu boxes are now the same! Hope this is ok - if you have any problems then please post back, no matter how trivial you may think a problem is, ok? Regards, Ges. Ges 04-13-2007, 08:39 PM BUG FIX UPDATE FROM GES I have received a PM from member countrygirl2005 asking; I need to make the width of the menu longer w/out adding more headers This is a mistake on my behalf. It was due to the fact that I had concentrated on getting the sub-menu handling correct. The intention was for the whole menu to be totally CSS dependant and configurable to suit. At the moment the only control over the width of the menu is dependant upon the number of characters in the header title itself. Here is the fix; In the CSS; .headerlinks a{ margin: auto 8px; font-weight: bold; color: black; } please add width:200px; thus; .headerlinks a{ margin: auto 8px; font-weight: bold; color: black; width: 200px; } I have used a value of 200px just for a convenient example so have a play with it to suit your needs. I strongly suggest using pixels instead of percentages so as not to get confused. Whenever you want to change the width of the sub-headings etc just use the 'width' values in the appropriate CSS part but keep them as percentages as they are calculated on the header, ( that's why I used percentages ). I aplogise if this has caused headaches for anyone. Regards, Ges. |