Drop Down Menu

  Ade_1 14:38 25 Nov 2006
Locked

Hi, I was wondering if anyone knew of a simple HTML script for a drop down menu.

Thanks in advance

Aidan

  De Marcus™ 14:46 25 Nov 2006
  acsmanhtml12 15:08 25 Nov 2006

yes, it's actually very simple. download a copy of the files <a href="click here">here</a>. It's all based around a tiny bit of JavaScript,
function showMenu(my_id){
if(document.all && dosument.getElementById){
ul = document.getElementById(my_id);
ul.stlye.display = 'block';
}
}

function hideMenu(my_id){
if(document.all && dosument.getElementById){
ul = document.getElementById(my_id);
ul.stlye.display = 'none';
}
}

then for the li of the second part of the menu (by the way get the files from the download (there may be a few typos)
you have to tell it by JavaScript on the MouseOver. Anyway just download the files and everything will be revealed.

  Ade_1 17:07 25 Nov 2006

Thanks to both of you for your help. I think both of the suggestions will help me.

Thanks

Aidan

  metalmans 11:05 04 Dec 2006

try this out it mite help, if not let me now ok.
css
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
font-family: "verdana", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: #000000;
}

div.menuBar {
background-color: #e0e0e0;
border: 2px outset #e0e0e0;
padding: 4px 2px 4px 2px;
text-align: left;
}

div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid #e0e0e0;
color: #000000;
cursor: default;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}

div.menuBar a.menuButton:hover {
background-color: transparent;
border: 1px outset #e0e0e0;
color: #000000;
}

div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
background-color: #5050f0;
border: 1px inset #e0e0e0;
color: #ffffff;
left: 1px;
top: 1px;
}

div.menu {
background-color: #e0e0e0;
border: 2px outset #e0e0e0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}

div.menu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}

div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #5050f0;
color: #ffffff;
}

div.menu a.menuItem span.menuItemText {}

div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}

div.menu div.menuItemSep {
border: 1px inset #e0e0e0;
margin: 4px 2px;
}

html
<script src="scripts/java.js" type="text/javascript"></script>
<link href="css/default.css" rel="stylesheet" type="text/css">


<!-- Menu bar #1. -->
<div class="menuBar">
<a class="menuButton" href="#" onmouseover="buttonMouseover(event, 'SUB_1');">Button 1</a>
</div>

<!-- Main menus. -->
<div id="SUB_1" class="menu" onmouseover="menuMouseover(event)">

<a class="menuItem" href="#" onmouseover="menuItemMouseover(event, 'SUBMENU_1');">More Spam ></a>
<a class="menuItem" href="#">11</a>
<a class="menuItem" href="#">Affiliate</a>
<a class="menuItem" href="#">PPC</a>
<a class="menuItem" href="#">More Spam</a>
</div>


<!-- Sub menus for menu 1. -->
<div id="SUBMENU_1" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="#">11</a>
<a class="menuItem" href="#">Affiliate</a>
<a class="menuItem" href="#">PPC</a>
<a class="menuItem" href="#">More Spam</a>

<a class="menuItem" href="#">stuff</a>
</div>

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Fujitsu Lifebook P727 laptop review

11 best portfolio websites for designers and artists

Office for Mac buying guide: Price, Office 2017 rumours & new features

Comment désactiver les programmes qui s'exécutent au démarrage de Windows 10 ?