Drop down menue

**Markus** · 06-03-2009, 10:37 AM

Hi there,

I have been working with the Dropdown HTML, which I found on

http://www.dynamicdrive.com/dynamicindex1/dropdowncontrol.htm

It worked really well, but then I wanted to create another dropdown menu. The second menu was not working at all as it shows the dropdown menu constantly.

My aim was to then look at the dropdown.js, which didn't help me at all as there were no direct references to the links.

Than I looked at the <style type="text/css">.....</style>, which I then copied and changed all the 'a.sample_attach' to 'a.sample_attach1' etc. However, the dropdown menu still didn't hide...

Pls let me know if you have any idea how to multiply the dropdown menu on one page or if you know of another simple dropdown menu that can be implemented several times on the same page.

Thank you very much.
Markus

PS. here is the code

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Dropdown Sample</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords"    content="" />

<script type="text/javascript" src="info/dropdown.js"></script>

<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.sample_attach, a.sample_attach:visited, div.sample_attach
{
  display: block;
  width:   100px;

  border:  none;
  padding: 2px 5px;

  background: #ffffff;

  text-decoration: none;
  font-family: Arial, Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.0em;
  color:   #000050;
}

a.sample_attach, a.sample_attach:visited { border-bottom: none; }
div#sample_attach_menu_child             { border-bottom: none; }

form.sample_attach
{
  position: absolute;
  visibility: hidden;

  border:  none;
  padding: 0px 5px 2px 5px;

  background: #FFFFEE;
}

form.sample_attach b
{
  font-family: Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.1em;
}

input.sample_attach { margin: 1px 0px; width: 170px; }




a.sample_attach1, a.sample_attach1:visited, div.sample_attach1
{
  display: block;1
  width:   100px;

  border:  none;
  padding: 2px 5px;

  background: #ffffff;

  text-decoration: none;
  font-family: Arial, Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.0em;
  color:   #000050;
}

a.sample_attach1, a.sample_attach1:visited { border-bottom: none; }
div#sample_attach1_menu_child             { border-bottom: none; }

form.sample_attach1
{
  position: absolute;
  visibility: hidden;

  border:  none;
  padding: 0px 5px 2px 5px;

  background: #FFFFEE;
}

form.sample_attach1 b
{
  font-family: Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.1em;
}

input.sample_attach1 { margin: 1px 0px; width: 170px; }

</style>

</head>
<body>
<div>


<div id="sample_attach_menu_parent" class="sample_attach"><a href="javascript:alert('dd');">Main Menu</a></div>
<div id="sample_attach_menu_child">
<a class="sample_attach" href="javascript:alert('Item 1');">Item 1</a>
<a class="sample_attach" href="javascript:alert('Item 2');">Item 2</a>
<a class="sample_attach" href="javascript:alert('Item 3');">Item 3</a>
</div>
<BR>
<BR>
<BR>
<BR>

<div id="sample_attach_menu_parent1" class="sample_attach1"><a href="javascript:alert('dd');">Main Menu</a></div>
<div id="sample_attach_menu_child1">
<a class="sample_attach1" href="javascript:alert('Item 1');">Item 1</a>
<a class="sample_attach1" href="javascript:alert('Item 2');">Item 2</a>
<a class="sample_attach1" href="javascript:alert('Item 3');">Item 3</a>
</div>

<script type="text/javascript">
at_attach("sample_attach_menu_parent", "sample_attach_menu_child", "hover", "y", "pointer");
</script>


</div>
</body>
</html>

**Markus** · 06-09-2009, 03:02 PM

Hi there,

sorry but it seems that there is no answer after 167 views, eventhough it is based on code from this website.

I have tried a different approach and came accross another problem.

Div in Table.

Why o why is my div menu not in the table? What did I do wrong?

Here is the full code.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

		
<html>

<head>

<title>I</title>
<link rel="stylesheet" href="./info/style.css" />


<style type="text/css">
body{font-family:arial;}
#container{width:500px;margin:auto;font-size:10pt;}

#menu{position:absolute;margin-top:10px;}
#menu ul .item{display:none;}
#menu ul:hover .item{display:block;background:#ffffff;padding:0px;margin:0px;}

#menu ul:hover .item a{color:#000050;text-decoration:none;}
#menu ul:hover .item a:hover{color:#999999;}

#menu ul{width:100px;float:left;margin:0px;padding:0px;background:#ffffff;list-style:none;}
.clear{clear:both;height:10px;}
</style>


</head>

<body link="#000000" vlink="#000000" alink="#000000" bgcolor="#063569" background="images/bg.gif" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
<center>
	 
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="850">
  <tr>
     <td height="15" width="15" align="center" bgcolor="#ffffff"><img src="images/po.jpg" width="30" height="15" alt="" border="0" align=""></td>
     <td colspan="5" width="109" align="center" bgcolor="#ffffff"> 
	 
	 <div id="menu" id="text">
	 
	 <ul id="item1">
	 <a  href="index.html" class="m11e">Home</a>
	 </ul>

     <ul id="item2">
     <li class="top"><a href="ship.html" class="m11e">Ship</a></li>
     <li class="item"><a href="dry.html" class="m11e">Dry</a></li>
     <li class="item"><a href="heavy.html" class="m11e">Heavy</a></li>
     </ul>
     
     <ul id="item3">
     <li class="top"><a href="forward.html" class="m11e">Forward</a></li>
     <li class="item"><a href="#" class="m11e">menu item 1</a></li>
     <li class="item"><a href="#" class="m11e">menu item 2</a></li>
     </ul>
     
     <ul id="item4">
     <li class="top"><a href="management.html" class="m11e">Management</a></li>
     <li class="item"><a href="#" class="m11e">menu item 1</a></li>
     <li class="item"><a href="#" class="m11e">menu item 2</a></li>
     <li class="item"><a href="#" class="m11e">menu item 4</a></li>
     </ul>
	 
	 <ul id="item5">
	 <a href="contact.html" class="m11e">Contact</a>
     </ul>
     
     </div>
	 </td>
     <td width="124" align="center" bgcolor="#ffffff"></td>
  </tr>
</table>


</body>
</html>

**X96 Web Design** · 06-09-2009, 07:12 PM

Try the Anylink Drop Down menu, also from DD, plus it now supports parent/child relations.

Cheers,
X96

Thread: Drop down menue

Thread Tools

Search Thread

Drop down menue

Still no answer after 167 views

Bookmarks

Bookmarks

Posting Permissions