Jump to content

drop down menu


monty 187
 Share

Recommended Posts

Hi All,I know that this topic has been covered b4 and I have tried the css version before and failed. I and trying to create a menu from which a drop down menu drops on mouse over! I think their are a couple of ways to do it so I wanted to know if anyone has attempted this before and can tell me how. Also if anyone has found good links to help me do it. I dont even know if I have the name for this correct because google is giving me dropdown lists.Thanks a million guys;)Monty

Link to comment
Share on other sites

Right, sorry about this people but i still cant do it, and i can see why, ill post the alterations i have mad so far,

<td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">				<td  width="170" id="topmenu" class="menu"><a href="http://localhost/test/community.html">My Community</a>				<table class="menu" id="tutorials" width="120">   				<tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>   				<tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>   				<tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>   				<tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>   				<tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>   				</table>				</td>

Now this is within a menu i have already designed because i only need one option to be a dropdown!The rest I have put in a style sheet like this,

function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}

And the style for the table is

#topmenu{	text-align:center;	font: .95em/1.6em Arial, Helvetica, sans-serif;	color:#DBDFEE;	background-image:url(http://pmigroup.ie/images/backblu.jpg); background-repeat:repeat;}#topmenu a{	text-decoration:none;	color:#DBDFEE;	}#topmenu a:hover{	color:#ffffff;	background-image:url(http://localhost/images/backblu2.jpg); background-repeat:repeat;}td.topmenu{background:lightblue}table.topmenu{font-size:100%;position:absolute;visibility:hidden;}

:) Any help thankz a million!!!

Link to comment
Share on other sites

function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}

That's a Java Script file, not CSS. You would either need to place it in the <script typ="text/javascript"> and </sctipt> and put it in the <head> section of your file, or make it external, by saving it as a .js file, then putting this in the <head>

<script type="text/javascript" src="linktofile.js"></script>
Link to comment
Share on other sites

function showmenu(elmnt){document.getElementById(elmnt).style.visibility="visible"}function hidemenu(elmnt){document.getElementById(elmnt).style.visibility="hidden"}

That's a Java Script file, not CSS. You would either need to place it in the <script typ="text/javascript"> and </sctipt> and put it in the <head> section of your file, or make it external, by saving it as a .js file, then putting this in the <head>

<script type="text/javascript" src="linktofile.js"></script>Cool i have put that in the header of the doc now!! It is still displaying the entire menu from the word go!!Cheers for the pointer tho, i should have known that but at the mo im using so much stuff i keep making simple mistakes:)
Link to comment
Share on other sites

  • 3 weeks later...

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

×
×
  • Create New...