PDA

View Full Version : Javascript/CSS Dropdown Menu



Moshambi
09-12-2008, 05:28 PM
I know that there are many scripts on the web that you can find to do this, but I feel that I get too lazy when I just go looking for code rather than trying it myself and having a few pointers on the way...anyway on to the problem.

First I'll show you my code. It is HTML, CSS, and Javascript all in one.




<html>

<head>

<style type="text/css">

ul
{
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
}

ul li
{
display: block;
width: 150px;
height: 30px;
border: 1px solid black;

}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
var x = document.getElementById(elem);

x.style.visibility = "visible";
}

function hideSub(elem)
{
var x = document.getElementById(elem);

x.style.visibility = "hidden";
}

</script>

</head>

<body>

<ul>
<li><a href="#"> Home </a></li>
<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><a href="#"> Nintendo </a></li>
<ul id="sub1" style="visibility: hidden; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
<li><a href="#"> NES </a></li>
<li><a href="#"> SNES </a></li>
<li><a href="#"> N64 </a></li>
<li><a href="#"> Gameboy </a></li>
<li><a href="#"> Gameboy Color </a></li>
<li><a href="#"> Gameboy Advance </a></li>
</ul>
<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><a href="#"> XBOX </a></li>
<ul id="sub2" style="visibility: hidden; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
<li><a href="#"> XBOX </a></li>
<li><a href="#"> XBOX 360 </a></li>
</ul>
</ul>

</body>

</html>


The menu works how I want it, the only problem is the display of the menu.
Because I am nesting the #sub1, #sub2 as a <ul> it still shows the white space even though the visibility is set to hidden. I tried to change it to display: none; and that works to remove the whitespace but when you hover over it and the menu expands I end up with the same problem. Is there a different way of doing this or what should I change? I will keep tinkering with it and see if I can come up with something, but any help is greatly appreciated! Thank you in advance!

----------> EDIT <-------------

Ok so I kept messing with this and I got it to work now! It is a vertical menu, I'm not sure how to do it for horizontal though...but here is my code now in case any of you wanted to check it out.




<html>

<head>

<style type="text/css">

ul
{
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}

ul li
{
display: block;
width: 150px;
height: 30px;
border: 1px solid black;
}

span
{
display: block;
width: 150px;
height: 30px;
}

#sub1 a, #sub2 a, #sub3 a
{
display: block;
width: 150px;
height: 30px;
}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "block";
}

function hideSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "none";
}

</script>

</head>

<body>


<ul>
<li><span> Home </span></li>
<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span> Nintendo </span>
<ul id="sub1" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
<li><a href="#"> NES </a></li>
<li><a href="#"> SNES </a></li>
<li><a href="#"> N64 </a></li>
<li><a href="#"> Gameboy </a></li>
<li><a href="#"> Gameboy Color </a></li>
<li><a href="#"> Gameboy Advance </a></li>
</ul>
</li>

<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span> XBOX </span>
<ul id="sub2" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
<li><a href="#"> XBOX </a></li>
<li><a href="#"> XBOX 360 </a></li>
</ul>
</li>

<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span> Playstation </span>
<ul id="sub3" style="display: none; position: relative; top: -37px; left: 146px; padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
<li><a href="#"> Playstation </a></li>
<li><a href="#"> Playstation 2 </a></li>
<li><a href="#"> Playstation 3 </a></li>
<li><a href="#"> Playstation Portable </a></li>
</ul>
</li>


</ul>



</body>

</html>

Nile
09-12-2008, 11:33 PM
Here's horizontal:


<html>

<head>

<style type="text/css">

ul
{
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
text-align: center;
}

ul li
{
display: block;
width: 150px;
height: 30px;
border: 1px solid black;
float: left;
}

span
{
display: block;
width: 150px;
height: 30px;
}

#sub1 a, #sub2 a, #sub3 a
{
display: block;
width: 150px;
height: 30px;
}

</style>

<script type="text/javascript" language="javascript">

function showSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "block";
}

function hideSub(elem)
{
var x = document.getElementById(elem);

x.style.display = "none";
}

</script>

</head>

<body>


<ul>
<li><span> Home </span></li>
<li onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');"><span> Nintendo </span>
<ul id="sub1" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub1');" onmouseout="javascript: hideSub('sub1');" >
<li><a href="#"> NES </a></li>
<li><a href="#"> SNES </a></li>
<li><a href="#"> N64 </a></li>
<li><a href="#"> Gameboy </a></li>
<li><a href="#"> Gameboy Color </a></li>
<li><a href="#"> Gameboy Advance </a></li>
</ul>
</li>

<li onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');"><span> XBOX </span>
<ul id="sub2" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub2');" onmouseout="javascript: hideSub('sub2');" >
<li><a href="#"> XBOX </a></li>
<li><a href="#"> XBOX 360 </a></li>
</ul>
</li>

<li onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');"><span> Playstation </span>
<ul id="sub3" style="display: none; position: relative;padding: 5px; margin: 0px;" onmouseover="javascript: showSub('sub3');" onmouseout="javascript: hideSub('sub3');" >
<li><a href="#"> Playstation </a></li>
<li><a href="#"> Playstation 2 </a></li>
<li><a href="#"> Playstation 3 </a></li>
<li><a href="#"> Playstation Portable </a></li>
</ul>
</li>


</ul>



</body>

</html>

Moshambi
09-13-2008, 04:44 AM
Oh ya thanks Nile, I totally knew how to do that too, I guess I just overlooked it cuz I was trying to do it more complex then it really was lol :0