Northern Flame Posted January 27, 2008 Share Posted January 27, 2008 I am not an expert at javascript, actually, im no where near being an expert. But I am trying to create a simple dropdown menu and have run into a few problems. I have tried a few different things, and nothing seems to work, can anyone help me? heres the code i recently tried: <html> <head> <title> Test Website </title> <style type="text/css"> div#menu{ background-color:#CC0000; color:#FFFFFF; } </style> <script type="text/javascript"> function showMenu(showhide){ var menu = "Menu"; var l_1 = '<a href="/">Home</a><br />'; var l_2 = '<a href="/about.php">About Us</a><br />'; var l_3 = '<a href="/contact.php">Contact Us</a><br />'; var l_4 = '<a href="/links.php">Links</a>'; var br = "<br>"; if(showhide == 'show'){ document.getElementById("menu").innerHTML=menu + br + l_1 + l_2 + l_3 + l_4 + br; } else if(showhide == 'hide'){ document.getElementById("menu").innerHTML=menu + br; } } </script> </head> <body> <table> <tr> <td> This is a Test </td> <td> This is another test </td> </tr> <tr> <td> Blah Blah Blah </td> <td> <div id="menu" onMouseOut="showMenu('hide')" onMouseOver="showMenu('show');"> Menu<br> </div> </td> </tr> </table> </body> </html> this almost works. When I put my mouse over the word "Menu" the div expands as it should. When I put my mouse anywhere in the div where there is not a link the menu continues to show. But when I put my mouse over a link the menu hides again and i never have enough time to click the link. Can anyone help me with this? Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted January 27, 2008 Share Posted January 27, 2008 try this: <html> <head> <title> Test Website </title> <style type="text/css"> div#menu{ background-color:#CC0000; color:#FFFFFF; } </style> <script type="text/javascript"> function showMenu(showhide){ var menu = "Menu"; var l_1 = '<a href="/" onMouseOver="showMenu(\'show\')">Home</a><br />'; var l_2 = '<a href="/about.php" onMouseOver="showMenu(\'show\')">About Us</a><br />'; var l_3 = '<a href="/contact.php" onMouseOver="showMenu(\'show\')">Contact Us</a><br />'; var l_4 = '<a href="/links.php" onMouseOver="showMenu(\'show\')">Links</a>'; var br = "<br>"; if(showhide == 'show'){ document.getElementById("menu").innerHTML=menu + br + l_1 + l_2 + l_3 + l_4 + br; } else if(showhide == 'hide'){ document.getElementById("menu").innerHTML=menu + br; } } </script> </head> <body> <table> <tr> <td> This is a Test </td> <td> This is another test </td> </tr> <tr> <td> Blah Blah Blah </td> <td> <div id="menu" onMouseOut="showMenu('hide')" onMouseOver="showMenu('show');"> Menu<br> </div> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
Northern Flame Posted January 27, 2008 Author Share Posted January 27, 2008 thanks that worked! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.