How do I make a menu that slides down on mouseover.

@Sam_GrangerOct 04.2005

Hello,

Before I explain what I want to do, I want to tell everyone that I’m not such a genious when it comes to javascript. Sure, I can edit the odd javascript etc… but I can’t write a javascript from scratch (yet) hence this post.

I’m trying to find out how I can make a “dynamic” (at least, I think its called dynamic?) menu using javascript. A demo of what I mean can be seen here:

~~[url]~~http://www.shauninman.com/plete/[/url]

Please put your mouse over the navigate/search image – the menu I mean appears. This is the type of menu I’m looking for.

All help is really appreciated! ?

Kindest regards,

Sam Granger

to post a comment

JavaScript

@Sam_GrangerauthorOct 05.2005 — #Just bumping this thread (hope thats allowed ? )

@VladdyOct 05.2005 — #Kinda annoying.

Create the block with sliding staff in it.

Upon page load set its height to 0 and overflow to hidden.

On mouse over:

Start increasing the height using setTimeout until the full height of the block is reached to create sliding effect.

Do reverse to hide it.

@Sam_GrangerauthorOct 06.2005 — #Thanks Vladdy for your reply. I don't know much about javascript o wish me luck trying to make this! ?

@Sam_GrangerauthorOct 06.2005 — #I found the following code but how do I make it so that the button is just an image and on rollover the menu opens? And how do I make it close when I rollover the image again? ?

[code=html]<html>
 <head>
 
 <script type="text/javascript">
 var pid = 0,
 linkCnt = 0;
 
 function run(){
 clearTimeout(pid);
 var height = parseInt(document.getElementById("links").style.height);
 if( height < 100){
 //100 can be replaced with the desired height!
 document.getElementById("links").style.height = linkCnt;
 linkCnt+=2;
 pid=setTimeout('run()', 15);
 }
 }
 </script>
 </head>
 
 <body>
 <div id="links" style=" height: 1px;  overflow:hidden;">
 <table id="myTbl">
 <tr valign="top" style="text-align:center; font-weight:bold">
 <td>     Language
 </td>
 <td>     Speak
 </td>
 <td>     Read
 </td>
 <td>     Write
 </td>
 </tr>
 <tr valign="top">
 <td>     English
 </td>
 <td>     High
 </td>
 <td>     High
 </td>
 <td>     High
 </td>
 </tr>
 <tr valign="top">
 <td>     French
 </td>
 <td>     Moderate
 </td>
 <td>     Moderate
 </td>
 <td>     Moderate
 </td>
 </tr>
 <tr valign="top">
 <td>     Japanese
 </td>
 <td>     Low
 </td>
 <td>     Low
 </td>
 <td>     Low
 </td>
 </tr>
 </table>
 </div>
 <input type="button" onClick="run()" value="Click to animate">
 </body>
 
 </html>[/code]

@Sam_GrangerauthorOct 09.2005 — #Bump. ?

How do I make a menu that slides down on mouseover.

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I make a menu that slides down on mouseover.

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴