[Coder-san]

Hi Reader,

I don't know much about javascript. I'm just modifying a "click to show/hide" javascript menu to a hover-based one.
It is pretty bad, can somebody help me with it?

JS

Code:

function showlayer(layer){ var myLayer = document.getElementById(layer); myLayer.style.display="block";} } function hidelayer(layer){ var myLayer = document.getElementById(layer); myLayer.style.display="none"; }

HTML

Code:

<div class="menu"> <ul onmouseout="javascript:hidelayer('sm_1')"> <li><a href="services.htm" onmouseover="javascript:showlayer('sm_1')">SERVICES</a> <ul class="submenu" id="sm_1"> <li><a href="#">Sub-menu 1</a></li> <li><a href="#">Sub-menu 2</a></li> <li><a href="#">Sub-menu 3</a></li> </ul> </li> </ul> </div>

[bluedog.tar.gz]

Why not use the jQuery library?
Check out the API

.hover should work for that.

[Coder-san]

I'm not into using external bulky codes. Of which I'd probably use about 1%.
I'm the guy who thinks everybody still uses dial-up. If you know what I mean. :p

I'll just use the click to show-hide version I guess. Unless I'm motivated to later on.

[bluedog.tar.gz]

You are also able to do this with CSS though.

[unnamed]

Are you looking for something like this? http://jsfiddle.net/6W7XD/131/

If so you could avoid using JS and use CSS instead.

[Coder-san]

@bluedog.tar.gz @FZEROX It's perfect for me then. Thanks!

[unnamed]

@bluedog.tar.gz @FZEROX It's perfect for me then. Thanks!

I can't help but assume that the help you received from me wasn't satisfying.
And I'm pretty sure I didn't provide the solution you were looking for, could you give me something more so my dumb brain would understand?

[bluedog.tar.gz]

Thank you @fzerox for providing a fiddle
I guess your question is answered even with a better solution!

Don't under estimate CSS

Closed