Does anybody have the HTML code so that when users scroll over my main navigation bar a drop down menu will pop up. THanks
I do. It uses simple CSS styles (display: block/none) and mouseover - very compact and functional. you can see a working example at http://homeworkslackers.com/members/menudemo.php. It is the blue navigation bar on the top of the page. showhide.js function showDiv(divID) { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(divID).style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.logo.visibility = 'visible'; } else { // IE 4 document.all.logo.style.visibility = 'visible'; } } } function hideDiv(divID) { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById(divID).style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.logo.visibility = 'hidden'; } else { // IE 4 document.all.logo.style.visibility = 'hidden'; } } } Code (markup): To implement the menu <td onMouseOver="showDiv('div1')" onMouseOut="hideDiv('div1')"> <a href="javascript:;" target="_top"><img src="images/account1.gif" alt="Account" name="account" border="0" id="account" /></a> <div id="div1"> <a href="profile.php" target="_top"><img src="images/profile1.gif" alt="Profile" name="profile" border="0" id="profile" /></a><br /> <a href="collab/index.php" target="_top"><img name="collab" src="images/collab1.gif" border="0" alt="Collab" /></a> </div> </td> Code (markup): EDIT: The style for this div: #div1 { padding: 3px; background-color: #0169a0; visibility: hidden; border: solid 1px #000000; position:absolute; left: 475px; top: 183px; text-align: left; z-index: 98; } Code (markup):
try having a look at dynamicdrive, they have some good scripts. i recently made a drop down script, if you want it then ask me lol.
Thanks, I've copied the second code (when I copied the first one it just showed it on the page) but for some reason the rollover feature doesn't work, the items I want (Video, Photo and Audio Gallery buttons) are permanently there. http://michaeljjackson.forumotion.com/EnterPageMain-h5.htm
Oops my mistake, i left out the default styles. #div1 { padding: 3px; background-color: #0169a0; visibility: hidden; border: solid 1px #000000; position:absolute; left: 475px; top: 183px; text-align: left; z-index: 98; } Code (markup): you need to modify this to get the box where you want it to be, but it shouldn't be too hard and it works with IE and FF
Hi, You can get some help about Drop Down Menu Html . Its a nice explanation of how to use drop down menu with some examples written in a form of code. Hope it will help you, HTML Drop Down Menu
Drop-down menus are probably the most flexible objects you can add to your forms. Depending on your settings, drop-down menus can serve the same purpose as radio buttons (one selection only) or check boxes. The advantage of a drop-down menu, compared to radio buttons or check boxes, is that it takes up less space. But that is also a disadvantage, because people can't see all options in the menu right away. There is a workaround for this - with the size setting, you can customize the menu so it shows more than just one option at a time, but when you do that - you also lose the advantage of taking up less space.
http://www.htmldog.com/articles/suckerfish/dropdowns/ No JavaScript required unless you want to support IE6 (which Microsoft is going to support until 2014). Even then it's very small (though I use an .htc file instead of the script).