FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


how to make hover drop menus without flash?





rainynightstarz
I want to know how to make a menus when you hovor on it, a list comes down, and you can click on any of the options on the list.
For example i want to make a menu like that. One of the item in the main menu might be "Gallery" for my art site. I want it so that when i hover on "Gallery" and list with "Graphite" "Charcoal" "Anime" "CG" "fashion Designs" drop down.
And example that have the list horizonally
http://www.lynbrookrobotics.com/
hover on" about us" or "team"

another example with flash
http://www.winsornewton.com/index2.php
for this, click on one of the things first. and it says (click here for drop down menu, and in the menu u can hover on some and another menu pops out)This is kinda what i want except with out clicking on it first.


i think a better example would be
http://www.seoconsultants.com/tips/css/
check out the side menu

Can anyone tell me how to do that?
i hope i'not being confusing
Zyrobot
Macromedi Flash is difficult maybe you test SWISH
aningbo
if you still need help, i can help you out. let me know.
rainynightstarz
I kind of found away to do it with java script, but the only way that won't make the page seem weird is to have the list in one line .
I decided just to have some extra pages ,so people can navigate without the fancy menu thing, at least until I learn flash!
Marston
You provided a link in your example sites... that has a tutorial on how to make these menus...

Confused *Sigh*...
aningbo
i still prefer javascript rather than flash.
GB
Yeah, it looked like a good tutorial. Another one is by Project Seven. CSS is the way to go with creating drop down menus. I still haven't perfected it, although I'm getting closer. A List Apart has an article on it and the author has a tutorial on his website, HTML Dog.

Hope this helps!
oasis
Try to use this javascript's code, and just make changes to its dimension, contents and the place.

Put this in the <head> tags
<style>
<!-- change here the letter type and the color -->
body{font-family:verdana;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#FF0000}
td.menu{background:#CCFFCC}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>

<base target="_blank">

<!-- change here above the tqarget in the frame name -->


Put this in the <body> tags


<script language="JavaScript">
function toonmenu(elmnt)
{
document.all(elmnt).style.visibility="visible"
}
function verstopmenu(elmnt)
{
document.all(elmnt).style.visibility="hidden"
}
</script>


<table width="100%">
<tr bgcolor="#CCCCFF">
<td onmouseover="toonmenu('site1')" onmouseout="verstopmenu('site1')">
<a href="http://www.homepage.com">Site 1</a><br />
<table class="menu" id="site1" width="100%">
<tr><td class="menu"><a href="your link">word here</a></td></tr>
<tr><td class="menu"><a href="your link">word here</a></td></tr>
<tr><td class="menu"><a href="your link">word here</a></td></tr>
<tr><td class="menu"><a href="your link">word here</a></td></tr>
<tr><td class="menu"><a href="your link">word here</a></td></tr>
</table>
</td>
<td onmouseover="toonmenu('site2')" onmouseout="verstopmenu('site2')">
<a href="http://www.yourlink.com">Site 2</a><br />
<table class="menu" id="site2" width="100%">
<tr><td class="menu"><a href="pag1.htm">word here</a></td></tr>
<tr><td class="menu"><a href="pag2.htm">word here</a></td></tr>
<tr><td class="menu"><a href="pag3.htm">word here</a></td></tr>
<tr><td class="menu"><a href="pag4.htm">word here</a></td></tr>
<tr><td class="menu"><a href="pag5.htm">word here</a></td></tr>
</table>
</td>
<td onmouseover="toonmenu('site3')" onmouseout="verstopmenu('site3')">
<a href="http://www.your link.com">Site 3</a><br />
<table class="menu" id="site3" width="100%">
<tr><td class="menu"><a href="your link">your link</a></td></tr>
<tr><td class="menu"><a href="your link">your link</a></td></tr>
<tr><td class="menu"><a href="your link">your link</a></td></tr>
<tr><td class="menu"><a href="your link">your link</a></td></tr>
<tr><td class="menu"><a href="your link">your link</a></td></tr>
</table>
</td>
</table>

you can make as many menu as you want......
joe_nl
thank you both so much, I was also looking for somthing like this quite a time.

Especially with the HTML-dog website I can do a lot, but your overview oasis, is also very handy!


Last time I was working more with PHP, but I suppose I can still use this on my website.

Tnx again!
kido
hmm let me think......

a few Javascript websites for you guys.

Dynamicdrive.com
javascriptkit.com
Related topics
Don't Use Flash
What do you think about Flash?
Please Give Feedback About My Funny Pics Collection!
Anti Tibia and Garfield without flash navs =)
different types of websites
Flash is for...?
My Latest Artwork
Do u Use Flash Content in your web site
Can anybody help me in making Dynamic menu bars in Flash?
free flash and action script stuff
slideshow without flash?
Where do you stand on using Javascript in websites?
Can someone recommend me an Mp3 Player?
menus and flash movies
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.