PDA

Click to See Complete Forum and Search --> : onClick menu

PunkSktBrdr01
11-12-2003, 04:35 PM
I'm trying to make a menu system similar to the Windows "Start" menu, and, like in Windows, I want it to appear when the user clicks on the "Menu" button. I wrote a simple function for this, but I can't get it to work. Here's the code:


<?php echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>"; ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="_style.php">
<script type="text/javascript">
function display(itemId) {
itemId = document.getElementById(itemId).style.visibility;
if (itemId == "hidden") {
itemId = "visible";
}
if (itemId == "visible") {
itemId = "hidden";
}
}
</script>
</head>
<body>

<!-- start item bar -->

<div id="itemBar">
<div id="itemBarMenu" onClick="display('menuMain');">
</div>
<div id="itemBarTime">
<?php
echo date("g:i a");
?>
</div>
</div>

<!-- end item bar -->

<!-- start main menu -->

<div id="menuMain">
<a href="#">item 1</a>
<a href="#">item 2</a>
<a href="#">item 3</a>
</div>

<!-- end main menu -->

</body>
</html>


I tested it in Firebird and IE6, and I can't figure out what the problem is. I also tried using onMouseOver and onMouseOut, but that didn't work either. Please help! :)
demo
11-12-2003, 04:47 PM
change the function to as shown:


function display(itemId) {
itemId = document.getElementById(itemId);
if (itemId.style.visibility == "hidden") {
itemId.style.visibility = "visible";
}else{
itemId.style.visibility = "hidden";
}
}



the element was being made visible then immediatley after was hidden. also delete the rogue '*/' found after this function


demo
PunkSktBrdr01
11-12-2003, 04:48 PM
Okay, thanks a bunch. :)
PunkSktBrdr01
11-12-2003, 06:15 PM
I've got the main menu working great, but I want to add onMouseOver submenus, like the ones that appear to the right of the start menu in Windows. If possible, I want it to automatically position the submenu. Also, if possible, I want to have that "delay" when opening or switching submenus. Only one should be open at a time. Thanks! :)

Oh, I want this to be cross-browser compatible, but if compatibility must be sacrificed, it must work in Mozilla.
fredmv
11-12-2003, 06:26 PM
function display(itemId)
{
e = document.getElementById(itemId);
e.style.visibility = (e.style.visibility == "hidden") ? "visible" : "hidden";
}
PunkSktBrdr01
11-13-2003, 09:58 AM
Okay, well, I know how to show and hide the menus with onMouseOver and onMouseOut. I'm not sure how to do the menu positioning, though, because I want the bottom of the submenu to appear 200px from the right of the screen and 5px below the mouse. Also, where can I learn about the timer functions? Thanks. :)