Drop Down Menu

  Ade_1 14:38 25 Nov 06
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 06
  acsmanhtml12 15:08 25 Nov 06

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 06

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

Thanks

Aidan

  metalmans 11:05 04 Dec 06

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.

Huawei P10 review

1995-2015: How technology has changed the world in 20 years

An overview: What leading creative agencies are doing to improve diversity

New iPad, iPhone SE & Red iPhone 7 on sale now