Forum Moderators: open
in my searchs for a menu system that a newbie such as myself could play around with I found the above post - [webmasterworld.com...] - with a script from BlobFisk.
I have tried to implement it but can't seem to get it to work so have a few questions:
1. I have inserted all of the javascript into an external .js file as is - with the exception of inserting the layers I want to be subject to this into the hideAll() function.
Is this correct or are there other areas I need to modify?
2. My layers are set up in an external CSS file. Should I be putting any type of visibility statement into the layers that I'm wanting to use in the menu?
3. In the HTML I have pasted the onMouseOver script into the <a> tag of the div that I want to trigger the next line of the menu. I have pasted as is except to insert the name of the div I want to be shown into the showlayer() function.
Do I need to modify anything else?
Extracts from my code:
CSS:
#m1{ position: absolute; left: 130px; top: 90px; visibility: visible; overflow: hidden; }
//this is the first item in the top line navigation//
#m1s{position: absolute; left: 130px; top: 110px;}
//this is the second line navigation that should be triggered when the user mouses over m1//
HTML:
<div id="m1"><a onMouseOver="hideAll(); showlayer('m1s'); stopTime()" onMouseOut="startTime();"></a>menu m1 text</div>
<div id="m1s">menu m1s text</div>
Any ideas or pointers to other tutorials much appreciated. Many thanks,
Beau
<head>
function ShowMenu(menuid)
{newmenu=document.getElementById(menuid);
newmenu.style.display="block";
}
</head>
<body>
<div id="menu" style="display:none">
Hi, i'm ur menu
</div>
<div onclick="ShowMenu('menu');">
Show me menu!
</div>
</body>
<head>
<script type=text/javascript>
function ShowMenu(menuid)
{
newmenu=document.getElementById(menuid);
newmenu.style.display="block";
}
function HideMenu(menuid)
{
hidemenu=document.getElementByID(menuid);
hidemenu.style.display="none";
}
</script>
</head>
<body><div onmouseover="ShowMenu('menu');" onmouseout="HideMenu('menu');">
Show me menu!
</div>
<div id="menu" style="display:none">
Hi, i'm your menu
</div>
</body>
<head>
.....
<style type="text/css">
menucaption
{text-decorations:none}
a.menucaption
{color:#000000;}
a.menucaption:hover
{color:#FF0000;}
</style>
</head>
<body>
....
<div id='menu' style='display:none' onmousever onmouseout>
<div class="menucaption"><a class="menucaption" href="">Item 1</a></div>
<div class="menucaption"><a class="menucaption" href="">Item 2</a></div>
<div class="menucaption"><a class="menucaption" href="">Item 3</a></div>
</div>
this class would be describes your menu items. Hover effect works so: when u mouseover to <a> elem style of <a> switched to style:hover (how i describe in the <style>. It's the basics)
Good luck)
