Jump to content

Java Script Drop Down Menu

Karlrestall

By Karlrestall
in JavaScript

 Share

Recommended Posts

Karlrestall Newbie

Karlrestall

Posted
Posted

Hello, I'm kind of new to JavaScript but here goes. I would like a menu like the example on W3Schools but where they have the drop down menu in 'lightblue' I would like mine in different colours, say red for the first one, green for the second, yellow for the third etc... both for the drop down menu and the horizontal rollovers. Can anyone tell me how to do this or give me the script of how to do it?RegardsKarl Restall

Link to comment
Share on other sites
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

I guess this is what u wanted. try the code below...

<html><head><style>body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu1{background:red}td.menu2{background:blue}td.menu3{background:green}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style><script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}</script></head><body><h3>Drop down menu</h3><table width="100%"> <tr bgcolor="RED">  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">   <a href="/default.asp">Tutorials</a><br />   <table class="menu" id="tutorials" width="120">   <tr><td class="menu1"><a href="/html/default.asp">HTML</a></td></tr>   <tr><td class="menu1"><a href="/xhtml/default.asp">XHTML</a></td></tr>   <tr><td class="menu1"><a href="/css/default.asp">CSS</a></td></tr>   <tr><td class="menu1"><a href="/xml/default.asp">XML</a></td></tr>   <tr><td class="menu1"><a href="/xsl/default.asp">XSL</a></td></tr>   </table>  </td>  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')" bgcolor="blue">   <a href="/default.asp">Scripting</a><br />   <table class="menu" id="scripting" width="120">   <tr><td class="menu2"><a href="/js/default.asp">JavaScript</a></td></tr>   <tr><td class="menu2"><a href="/vbscript/default.asp">VBScript</a></td></tr>   <tr><td class="menu2"><a href="default.asp">DHTML</a></td></tr>   <tr><td class="menu2"><a href="/asp/default.asp">ASP</a></td></tr>   <tr><td class="menu2"><a href="/ado/default.asp">ADO</a></td></tr>   </table>  </td>  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')" bgcolor="green">   <a href="/site/site_validate.asp">Validation</a><br />   <table class="menu" id="validation" width="120">   <tr><td class="menu3"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>   <tr><td class="menu3"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>   <tr><td class="menu3"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>   <tr><td class="menu3"><a href="/site/site_validate.asp">Validate XML</a></td></tr>   <tr><td class="menu3"><a href="/site/site_validate.asp">Validate WML</a></td></tr>   </table>  </td> </tr></table><p>Mouse over these options to see the drop down menus</p></body></html>

Link to comment
Share on other sites
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

You mean somthing like this

<html><head><style>body{font-family:arial;}table{font-size:80%;background:black}a{color:black;text-decoration:none;font:bold}a:hover{color:#606060}td.menu1{background:red}td.menu2{background:blue}td.menu3{background:green}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style><script type="text/javascript">function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}</script></head><body><h3>Drop down menu</h3><table width="100%"><tr bgcolor="RED"> <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">  <a href="/default.asp">Tutorials</a><br />  <table class="menu" id="tutorials" width="120">  <tr><td class="menu1"><a href="/html/default.asp">HTML</a></td></tr>  <tr><td class="menu2"><a href="/xhtml/default.asp">XHTML</a></td></tr>  <tr><td class="menu3"><a href="/css/default.asp">CSS</a></td></tr>  </table> </td> <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')" bgcolor="blue">  <a href="/default.asp">Scripting</a><br />  <table class="menu" id="scripting" width="120">  <tr><td class="menu1"><a href="/js/default.asp">JavaScript</a></td></tr>  <tr><td class="menu2"><a href="/vbscript/default.asp">VBScript</a></td></tr>  <tr><td class="menu3"><a href="default.asp">DHTML</a></td></tr>  </table> </td> <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')" bgcolor="green">  <a href="/site/site_validate.asp">Validation</a><br />  <table class="menu" id="validation" width="120">  <tr><td class="menu1"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>  <tr><td class="menu2"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>  <tr><td class="menu3"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>    </table> </td></tr></table><p>Mouse over these options to see the drop down menus</p></body></html>

Link to comment
Share on other sites
Karlrestall Newbie

Karlrestall

Posted
  • Author
Posted

No not really I would like Tutorials -redHTML -GreenXHTML-YellowCSS-BlueXML-OrangeXSL-GreyThenScripting-purpleJavaScript-WhiteVBScript-BrownEtc.. I would like each individual box if you like a different colour. Sorry for not explaining it very well. :) RegardsKarl Restall

Link to comment
Share on other sites
pulpfiction Dedicated Member

pulpfiction

Posted
Posted

if you want different color for each cell, then i guess CSS will not help, you can change the color of the cell by <td bgcolor="colorname">Part of the code.....<td bgcolor="gray" onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')"> <a href="/default.asp">Tutorials</a><br /><table class="menu" id="tutorials" width="120"> <tr><td bgcolor="red"><a href="/html/default.asp">HTML</a></td></tr> <tr><td bgcolor="green"><a href="/xhtml/default.asp">XHTML</a></td></tr> <tr><td bgcolor="white"><a href="/css/default.asp">CSS</a></td></tr> <tr><td bgcolor="cyan"><a href="/xml/default.asp">XML</a></td></tr> <tr><td bgcolor="pink"><a href="/xsl/default.asp">XSL</a></td></tr> </table>

Link to comment
Share on other sites
Karlrestall Newbie

Karlrestall

Posted
  • Author
Posted
:) Thank you very much. I hadn't thought of putting the colours at the front of the menu options. I tried the end and above them, I don't really know why I didn't try the beginning of the script.Once again Thank You and take care.RegardsKarl Restall
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...