Log in

View Full Version : 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 (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. :confused:

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. :eek:

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... :eek:

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. :rolleyes:

Thank you very much.
Markus


PS. here is the 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. :confused:

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.


<!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 (http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm), also from DD, plus it now supports parent/child relations.

Cheers,
X96