Drop Down Menu

[The Poot]

Hi everyone,

I'm creating a drop down menu: Here's the HTML

<div id="navigation">
<a href="#maincontent" class="skip">Skip Navigation</a>

<ul>
<li>Home</li>
<li>About Us</li>
<li>Services
<ul>
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
<li><a href="#">Service 6</a></li>
<li><a href="#">Service 7</a></li>
</ul>
</li>
<li>Contact</li>
</ul>

</div>

And with the CSS li:hover stuff it works great - in every browser except IE.

All those Service 1 ... Service 7 links are hidden by the stylesheet, and revealed when the mouse hovers over the top list item Services.

What I am trying to do is to write javascript that will reveal the list items when the Service's onMouseOver event occurs.

However, I would prefer not to have any javascript written into my HTML file, so I've externally linked the javascript file via

<script type="text/javascript" src="scripts/navmenu.js">
</script>

So far I have in my javascript file:

window.onload = function()

{


var lis = document.getElementsByTagName("li");

for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = "#743700";
this.style.color = "#E9B150";
}

lis[i].onmouseout = function() {
this.style.backgroundColor = "#E9B150";
this.style.color = "#743700";
};

}

};

All this does is change the colour of the top list items you can see. Also, at some point I may want to add more hidden list items to other 'Top list' elements.

So, can anyone help me with revealing the hidden list items under Services? I think I may have to use childNodes or something, but I can't figure it out.

Thanks

The Poot

[The Poot]

Ok - have started on the road to a solution...

can get the onMouseOver effect working by using...

for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = "#743700";
this.style.color = "#E9B150";

var currentElement = this;
currentElement = currentElement.firstChild;
currentElement = currentElement.nextSibling;
currentElement = currentElement.firstChild;
currentElement.style.display = "block";
currentElement.style.zIndex = 10;
currentElement = currentElement.nextSibling;
currentElement.style.display = "block";
currentElement.style.zIndex = 10;
...

in javascript - however when the list pops up all my content underneath the list now moves down the page while the menu shows on the screen. I had hoped setting the zIndex value would solve the problem, but it has not.

So does anyone know how to stop content underneath the drop down menu from moving?

The Poot

[rangana]

You might want to take this modification instead:

Code: Select all

<script type="text/javascript">
window.onload = function()
{
var lis = document.getElementsByTagName("li");
for (var i=0;i<lis.length;i++) {
lis[i].onmouseover = function()
{
this.style.backgroundColor = "#743700";
this.style.color = "#E9B150";
var serve=document.getElementById('service');
if(this.className=='service')
serve.style.display=(serve.style.display!='none')?'none':'';
}
lis[i].onmouseout = function() {
this.style.backgroundColor = "#E9B150";
this.style.color = "#743700";
var serve=document.getElementById('service');
if(this.className=='service')
serve.style.display=(serve.style.display!='none')?'none':'';
}
}

}

</script>
<div id="navigation">
<a href="#maincontent" class="skip">Skip Navigation</a>

<ul>
<li>Home</li>
<li>About Us</li>
<li class="service">Services
<ul id="service">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li><a href="#">Service 4</a></li>
<li><a href="#">Service 5</a></li>
<li><a href="#">Service 6</a></li>
<li><a href="#">Service 7</a></li>
</ul>
</li>
<li>Contact</li>
</ul>

</div>


Also, what you're trying gives an odd result if user has their JS disabled. What you're trying to achieve was termed as "suckefish dropdown", which two of them are on my favorites:

http://www.alistapart.com/articles/dropdowns
http://htmldog.com/articles/suckerfish/dropdowns/

Hope it helps.

[The Poot]

Thanks for the link to Suckerfish. Got it working a treat!