Code Snippets

JavaScript Source Code

Welcome to Dream.In.Code
	Become an Expert! Join 339,903 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 2,589 people online right now. Registration is fast and FREE... Join Now! Chat LIVE With a Expert

Drop down (overlapping) menu

Create a menu with the same style as the "Member Panel" on DIC. (Example including Javascript, CSS and HTML)

Submitted By: William_Wilson

Actions:

Rating:

Views: 4,463

Language: JavaScript

Last Modified: May 6, 2007

Instructions: This snippet works because of Javascript, thus I have posted it here, but it really requires more explanation, so I have included an example implementation, including javascript, css, and HTML needed.
I have also, used 2 images of up and down arrows, but the alt will work until you feel more comfortable with the example.

Snippet

function ShowPanel()
{
if (document.getElementById('panel').style.display == 'block')
{
document.getElementById('panel').style.display = 'none';
document.getElementById('up_down').src = "./down.gif";
}
else
{
document.getElementById('panel').style.display = 'block';
document.getElementById('up_down').src = "./up.gif";
}
}
//Example HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<script language="Javascript">
<!--
function ShowPanel()
{
if (document.getElementById('panel').style.display == 'block')
{
document.getElementById('panel').style.display = 'none';
document.getElementById('up_down').src = "./down.gif";
}
else
{
document.getElementById('panel').style.display = 'block';
document.getElementById('up_down').src = "./up.gif";
}
}
//-->
</script>
<div id="menu_title">
<menu_head>
</meun_head>
<table>
<tr>
<td width="150">
<b>Drop Down Menu Title</b>
</td>
<td>
<a href="#" onclick="ShowPanel();">
<img id="up_down" src="./down.gif" alt="V">
</a>
</td>
</tr>
</table>
<menu_body>
</menu_body>
<div id="panel">
<hr>
<a href="http://www.google.com">Google</a>
<br>
<a href="http://www.dreamincode.net">Dream In Code</a><br>
<hr>
<table>
<form action="?" method="post"></form>
<tr>
<td>User Name:</td>
</tr>
<tr>
<td>
<input type = "text" class="input_text" name="username" id="username" value="">
</td>
</tr>
<tr>
<td>Password:</td>
</tr>
<tr>
<td>
<input type="password" class="input_text" name="password" id="password" value="">
</td>
</tr>
<tr>
<td align="right" height="25" valign="top">
<input type="submit" class="button" value="Login">
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
//script.css:
a img
{
border: 0;
padding-top: 2px;
padding-right: 2px;
}
a:active
{
padding-left: 5px;
color: #000000;
}
a:link
{
padding-left: 5px;
color: #000000;
}
a:visited
{
padding-left: 5px;
color: #000000;
}
body
{
font: 9pt Arial, Verdana, Sans-Serif;
background: #FFFFFF;
color: #000000;
}
.button
{
margin-top: 5px;
}
hr
{
max-height: 1px;
height: 1px;
color: #000000;
border-style: solid;
}
input
{
border: 1px solid #00009E;
font-size: 10px;
font-family: Verdana;
}
.input_text
{
background-color: #FFFF94;
vertical-align: middle;
width: 138px;
}
#menu_title
{
width: 150px;
height: 25px;
background-color: #FBA000;
opacity: 0.8;
-moz-opacity: 0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
position: fixed;
top: 0px;
left: 0px;
margin-top: 5px;
margin-left: 5px;
padding: 2px;
}
#panel
{
display: none;
position: fixed;
top: 28px;
background-color: #FBA000;
width: 150px;
margin-left: 5px;
left: 0px;
margin-top: 0px;
padding: 2px;
}
#panel a
{
text-decoration:none;
font-weight:bold;
line-height:150%;
}
table
{
border: none;
padding: 0;
spacing: 0;
}

Copy & Paste

//Example HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<menu_head>
     
</meun_head>
<table>
     <tr>
          <td width="150">
               <b>Drop Down Menu Title</b>
          </td>
          <td>
               <a href="#" onclick="ShowPanel();">
                    <img id="up_down" src="./down.gif" alt="V">
               </a>
          </td>
     </tr>
</table>

<menu_body>
     
</menu_body>
<div id="panel">
<hr>

<a href="http://www.google.com">Google</a>
     <br>
     <a href="http://www.dreamincode.net">Dream In Code</a><br>

<hr>

<table>
     <form action="?" method="post"></form>
     <tr>
          <td>User Name:</td>
     </tr>
     <tr>
          <td>
               <input type = "text" class="input_text" name="username" id="username" value="">
          </td>
     </tr>
     <tr>
          <td>Password:</td>
     </tr>
     <tr>
          <td>
               <input type="password" class="input_text" name="password" id="password" value="">
          </td>
     </tr>
     <tr>
          <td align="right" height="25" valign="top">
               <input type="submit" class="button" value="Login">
          </td>
     </tr>

</table>
</div>
</div>

</body>
</html>

//script.css:
a img
{
     border: 0;
     padding-top: 2px;
     padding-right: 2px;
}

a:active
{
     padding-left: 5px;
     color: #000000;
}

a:link
{
     padding-left: 5px;
     color: #000000;
}

a:visited
{
     padding-left: 5px;
     color: #000000;
}

body
{
     font: 9pt Arial, Verdana, Sans-Serif;
     background: #FFFFFF;
     color: #000000;
}

.button
{
     margin-top: 5px;
}

hr
{
     max-height: 1px;
     height: 1px;
     color: #000000;
     border-style: solid;
}

input
{
     border: 1px solid #00009E;
     font-size: 10px;
     font-family: Verdana;
}

.input_text
{
     background-color: #FFFF94;
     vertical-align: middle;
     width: 138px;
}

#menu_title
{
     width: 150px;
     height: 25px;
     background-color: #FBA000;
     opacity: 0.8;
     -moz-opacity: 0.8;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
     position: fixed;
     top:  0px;
     left: 0px;
     margin-top:  5px;
     margin-left: 5px;
     padding: 2px;
}

#panel
{
     display: none;
     position: fixed;
     top: 28px;
     background-color: #FBA000;
     width: 150px;
     margin-left: 5px;
     left: 0px;
     margin-top: 0px;
     padding: 2px;
}

#panel a
{
     text-decoration:none;
     font-weight:bold;
     line-height:150%;
}

table
{
     border: none;
     padding: 0;
     spacing: 0;
}