Domain Manage

menu

Discussion in 'Website Design' started by slowhost, Nov 16, 2009.

Thread Status:
Not open for further replies.
  1. slowhost United Kingdom

    slowhost Active Member

    Joined:
    Jul 2008
    Posts:
    164
    Likes Received:
    0
    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
     
  2. Domain Forum

    Acorn Domains Elite Member

    Joined:
    1999
    Messages:
    Many
    Likes Received:
    Lots
     
  3. retired_member21

    retired_member21 Retired Member

    Joined:
    Apr 2008
    Posts:
    742
    Likes Received:
    13
    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>
    
    
     
  4. Systreg

    Systreg Well-Known Member

    Joined:
    Oct 2008
    Posts:
    6,586
    Likes Received:
    96
    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>
     
    Last edited: Nov 16, 2009
  5. slowhost United Kingdom

    slowhost Active Member

    Joined:
    Jul 2008
    Posts:
    164
    Likes Received:
    0
    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
     
  6. accelerator United Kingdom

    accelerator Well-Known Member

    Joined:
    Apr 2005
    Posts:
    7,397
    Likes Received:
    109
    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
     
  7. retired_member8

    retired_member8 Retired Member

    Joined:
    Sep 2009
    Posts:
    67
    Likes Received:
    2
    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;
    
     
    Last edited: Nov 16, 2009
Thread Status:
Not open for further replies.

Share This Page