Mouseover link into a drop down menu..

liunx · Jan 9, 2008

Ive been trying to work out how to do this easily but cant seem to find the answer anywhere? I mean like on <a class="postlink" href="Http://www.microsoft.com">Http://www.microsoft.com</a> and <a class="postlink" href="http://www.ebuyer.com">http://www.ebuyer.com</a> 
 
where you mouse over a link and it drops down a menu with more links.. 
 
Anyone who can help me learn how to do this has my muchas appreciation

I like to look at the page source code to see how these things work. You can do this in any browser. Cut the appropriate chunk of code out and then experiment with it on a standalone page.Yes I do know, but in this case it isnt that easy, I cant make sense of the source, I was wondering maybe there is a tutorial out there somewhere?Easy..... no.... 
 
on ebuyer.com 
 
The menu is in a js file. 
The script is in the head: 
(but the real script is in a Directory called js) 
<script language="JavaScript" src=http://www.htmlforums.com/archive/index.php/"/js/functions.js"></script> 
<script language="JavaScript" src=http://www.htmlforums.com/archive/index.php/"/js/YPmenu.js"> 
// include the menu system 
</script> 
<script language="JavaScript"> 
new ypSlideOutMenu("brands", "down", 150, 50,150,500); 
new ypSlideOutMenu("cats", "down", 250, 50, 150,490); 
new ypSlideOutMenu("account", "down", 350, 50, 150,230); 
new ypSlideOutMenu("help", "down", 450, 50, 150,230); 
</script> 
</head> 
 
In the body is the call to show or hide: 
<td width="115"><a href=http://www.htmlforums.com/archive/index.php/"/customer/help/index.html" onmouseover="ypSlideOutMenu.showMenu('help');hideme();" onmouseout="ypSlideOutMenu.hideMenu('help');showme();"> 
 
So: view Source or use save as to find out more. 
 
:rocker:Just found the link: 
<a class="postlink" href="COOLMENUhttp://www.dhtmlcentral.com/coolmenus/Download">COOLMENUhttp://www.dhtmlcentral.com/coolmenus/Download</a> .asp 
 
:rocker: :rocker:That's one Peter, of many, although admittedly, it's also one of the better ones. Some other goodies are: 
 
* <a class="postlink" href="http://www.burmees.nl/menu/menus.htm">http://www.burmees.nl/menu/menus.htm</a> 
* <a class="postlink" href="http://www.webreference.com/dhtml/hiermenus/">http://www.webreference.com/dhtml/hiermenus/</a> (but ya gotta pay for that one, although it's the one the big pro sites use - generally) 
 
NeilALRIGHT! I worked out how to do it using the tutorial on 
 
<a class="postlink" href="http://www.solardreamstudios.com/tutorials/dw/navmenu/#">http://www.solardreamstudios.com/tutorials/dw/navmenu/#</a> 
 
however, once I mouseover the link and get the menu to appear, I cant get it to disappear again when the link is not mouse overed, any idea how I can fix this?? 
 
Heres what I got so far, mouse over "Link" to see what I mean, 
 
<a class="postlink" href="http://homepage.ntlworld.com/s.spencer2/nuozek/newstuff/layout.htm">http://homepage.ntlworld.com/s.spencer2 ... layout.htm</a>There is an onmouseout command, though I am still deciding exactly where to place that, and what to do with it.thanks man

ALRIGHT!! I worked it out, wooot! 
 
thanks for all your helps guys, the onmouseout, just needed to be added, not to any specific location.. thankyou =)ok dammnit, still not quite there! If anyone can get this to work on individual tables with links in, please post back with some code/examples, if really apreciate it :/ 
 
having more trouble getting that to work

There are no HTML problems (<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fhomepage.ntlworld.com%2Fs.spencer2%2Fnuozek%2Fnewstuff%2Flayout.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=&outline=&sp=">http://validator.w3.org/check?uri=http% ... tline=&sp=</a>) stopping it from working (though you could have a type="text/javascript" attribute added on to the script tag for completeness). 
 
Post the code you have now...Code I got so far is here, 
 
<a class="postlink" href="http://homepage.ntlworld.com/s.spencer2/nuozek/newstuff/layout2.htm">http://homepage.ntlworld.com/s.spencer2 ... ayout2.htm</a> 
 
if u paste into Dreamweaver u will understand a little better probably!Hmm, I haven't got DW. I don't fully understand what I am looking at, but check the Parse Tree [at the bottom of this page (<a class="postlink" href="http://validator.w3.org/check?uri=http%3A%2F%2Fhomepage.ntlworld.com%2Fs.spencer2%2Fnuozek%2Fnewstuff%2Flayout2.htm&charset=%28detect+automatically%29&doctype=HTML+4.01+Transitional&ss=&outline=&sp=">http://validator.w3.org/check?uri=http% ... tline=&sp=</a>)] to see the structure. Are all the mouse commands associated with the correct tags, and calling the correct function? There is also one place with a mouseover but no mouseout I see.phew! im getting closer, 
 
<a class="postlink" href="http://homepage.ntlworld.com/s.spencer2/nuozek/newstuff/layout2.htm">http://homepage.ntlworld.com/s.spencer2 ... ayout2.htm</a> 
 
still seems to be problems with what it selects :/ 
 
ill try working some more in the morning, thxz for ure help Giz!Big trouble nuozek 
when i put the mouse cursor on the right site of the browserwindow (layout2) and drag it to the left...... 
menus show up on the wrong place. 
 
That's why the table needs STYLE="position:absolute; 
And the mouse over has also to be IN the div. 
 
Look what i have done in the attachment. 
Play with it... 
And.. the menu has to show up closer up to the link top:28px; so you can go to it with the mouse cursor. 
 
 
 
:rocker:Yeah I see what you have done! Thanx man that helps alot, but what does "DIV ID" stand for? and how did you make it set out like that in Dreamweaver? or didnt you...Originally posted by nuozek 
Yeah I see what you have done! Thanx man that helps alot, but what does "DIV ID" stand for? and how did you make it set out like that in Dreamweaver? or didnt you... 
 
When you was fighting with the code, i was fighting with it to

I have done this kind of menu before. 
So i knew it would not show up in the right place on another resolution. 
So i had to use the absolute attribute. 
 
Div is used in a block 
span is used in a line 
 
ID is needed to Identify Data 
and the name used to get the right ID 
 
A ID can also be placed in the head. 
 
The Div is often used in style sheets. 
An ID can only be use once on a page by the same name. 
A style is called in the div by class=name and can be used often on the same page. 
 
And the Dreamweaver code in the head is a script. 
In this part i had nothing to change. 
 
Tip: 
use a text editor to put your most used codes in. 
I use notetab <a class="postlink" href="http://www.notetab.com">www.notetab.com</a> 
I have files mycodes.txt javascripts.txt mouseover.txt and so on. 
So when i see a nice code on this form or the internet: 
copy and past. 
 
When i need the code for a popupwindow i look in a notetab file and copy and past in my html editor. 
 
:rocker:ah ok, so is there an option for setting things out like that in Dreamweaver? Something I may of missed.. 
 
Did u do the editing in Dreamweaver, or just use notepad? If so.... NICE

Dreamweaver has a lot of options. 
But i don't have Dreamweaver. 
I work with Arachnophilia V4 or MaxBeautyHtml 
 
:rocker:thanks for all your help, finally got everything how I want it, I can post the finished product here (when tis done) if you like, or if you have AIM we can talk there.Your welcome 
or in Dutch: graag gedaan

If your site is on line ask for a review and i will see the URL. 
 
:rocker: :rocker: :rocker:

Mouseover link into a drop down menu..

liunx

Guest