hello all how do i add a very basic drop down menu to a site? i have already got a menu in place on my site, i just want to add a drop down list on one off the links on my menu..

is there a snippet of text i can just add in the html code or is it a massive job changing loads of things around?

thanks

retired_member21 · Nov 16, 2009

Just done one myself

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')" style="width:215px;">
    <option>-- Navigation --</option>
    <option value="/page1.html">page1</option>
    <option value="/page2.html">page2</option>
    <option value="/page3.html">page3</option>
    <option value="/page4.html">page4</option>
    <option value="/page5.html">page5</option>
</select>

Systreg · Nov 16, 2009

Have a look at the javascript drop down menus on Dynamic Drive DHTML(dynamic html) & JavaScript code library

[edit]

An html one within a box I use on some of my sites:

Code:

<table width="160" cellpadding="1" cellspacing="0" border="1">
<tr>
<td bgcolor="#ffffff" align="center"><b>Free Anti Spyware</b></td>
</tr>
<tr>
<td>

<select name="menu" onChange="popup=window.open('','popup');popup.location=this.options[this.selectedIndex].value;" style="width: 160; font-family:'Arial'; color:#ffffff; background-color:#0F338A; font-size:8pt;">
<option value=>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Choose Below</option>
<option value="http://www.">Link Description</option>
<option value="http://www.">Link Description</option>
<option value="http://www.">Link Description</option>
</select>
</td>
</tr>
</table>

slowhost · Nov 16, 2009

thanks for that but i just cannot seam to figure it out, everytime i add anything it just completly messes up the page, i`m just trying to add a drop down thing for more options on the page in my sig but only want it on one part...

i have been trying all day and still cant do it... thick as f@@k

accelerator · Nov 16, 2009

If it makes you feel better I try not to use them because they often aren't great for site indexing, and I'm not overkeen on them from a usability standpoint either.

Rgds

retired_member8 · Nov 16, 2009

Keep to these simple principles. File: Link

HTML

HTML:

<ul id="nav">
	<li><a href="">LED GU10 Home</a></li> 
    <li><a href="">LED Light Bulbs</a> 
      <ul> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
      </ul> 
    </li> 
    <li><a href="">Buy LED Light Bulbs</a> 
      <ul> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
      </ul> 
    </li>
    <li><a href="">Buy other products</a> 
      <ul> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
      </ul> 
    </li> 
    <li><a href="">Site Map</a>  
    <li><a href="">Contact Us</a> 
    <li><a href="">Link to us</a> 
</ul>

CSS

Code:

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul li {
	position: relative;
	float: left;
        width: 100px;

}
li ul {
	position: absolute;
	top: 30px;
	display: none;
}
ul li a {
	display: block;
	text-decoration: none;
	line-height: 20px;
	color: #fff;
	padding: 5px;
	background: #333;
	margin: 0 2px;
}

ul li a:hover { background: #333; }
li:hover ul, li.over ul { display: block; }

JS for IE6 Error

Code:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace(" over", "");
   }
   }
  }
 }
}
window.onload=startList;