Drop Down menu html

Discussion in 'HTML & Website Design' started by SitcomDysfunction, Sep 24, 2009.

  1. #1
    Does anybody have the HTML code so that when users scroll over my main navigation bar a drop down menu will pop up.

    THanks
     
    SitcomDysfunction, Sep 24, 2009 IP
  2. tguillea

    tguillea Active Member

    Messages:
    229
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    90
    #2
    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):
     
    Last edited: Sep 24, 2009
    tguillea, Sep 24, 2009 IP
  3. Aidey

    Aidey Member

    Messages:
    67
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    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.
     
    Aidey, Sep 24, 2009 IP
  4. SitcomDysfunction

    SitcomDysfunction Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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
     
    SitcomDysfunction, Sep 24, 2009 IP
  5. tguillea

    tguillea Active Member

    Messages:
    229
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    90
    #5
    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 :)
     
    tguillea, Sep 24, 2009 IP
  6. myst_dg

    myst_dg Active Member

    Messages:
    224
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    58
    #6
    Why not try google? There are tons of examples out there.
     
    myst_dg, Sep 24, 2009 IP
  7. jj1

    jj1 Active Member

    Messages:
    892
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    60
    #7
    I use opencube / quickmenu dropdown menus - you have to pay for them for commercial use.
     
    jj1, Sep 26, 2009 IP
  8. Ashley1

    Ashley1 Peon

    Messages:
    205
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8

    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
     
    Ashley1, Oct 1, 2009 IP
  9. forextrendalerts

    forextrendalerts Guest

    Messages:
    132
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #9
    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.
     
    forextrendalerts, Oct 14, 2009 IP
  10. thebillkidy

    thebillkidy Peon

    Messages:
    13
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    download a easy program that's freeware mostly you can make this with it
     
    thebillkidy, Oct 14, 2009 IP
  11. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    437
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Dan Schulz, Oct 14, 2009 IP