How to make a menu like yahoo.com with the icons?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:30

How to make a menu like yahoo.com with the icons?

Poster: PokerJunkie
Dated: Thursday September 29 2005 - 2:31:23 BST

Hey There,
I have icons like yahoos and want to make a drop down menu Exactly like yahoo does...

Does anyone know how I would go about doing this? I'm having a lot of difficulty, it seems simple use the icon as an image and the drop down as text underneath the icon...

Thanks in advance everyone..

Poster: Ruth
Dated: Thursday September 29 2005 - 3:34:01 BST

If you want it like that you need to use a static image sample set to have the submenus openonclick instead of mouseover and with clicksubimages. To get the scroll bar you'd need to set a height to the submenu shorter than the content and set the code overflow=scroll; in the menu definitions.

Without seeing a page with what you have it's kind of hard to give precise directions.

Ruth

Poster: PokerJunkie
Dated: Thursday September 29 2005 - 7:49:45 BST

It's for http://www.pokerjunkie.com

rite now I just made a mouseover on the image for the time being uintil I figure out how to do the yahoo style....

Poster: PokerJunkie
Dated: Saturday October 1 2005 - 10:48:39 BST

Bump this topic, anyone got a sec to look at my site and let me know if I'm able to accomplish the drop down icon style like Yahoo.com?

Poster: Ruth
Dated: Saturday October 1 2005 - 17:53:57 BST

I didn't forget. I've made images and recoded the menu_data.js file and made changes on the main menu table.

You're menu on the main page has to be the following

Code:

<SCRIPT language=JavaScript>
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("image=forumicon1.gif;overimage=forumicon1_on.gif;showmenu=Forum;
openonclick=true;closeonclick=true;keepalive=1;");
aI("image=reviewsicon1.gif;overimage=reviewsicon1_on.gif;
showmenu=Reviews;openonclick=true;closeonclick=true;keepalive=1;");
aI("image=homegamesicon1.gif;overimage=homegamesicon1_on.gif;
showmenu=Home Games;
openonclick=true;closeonclick=true;keepalive=1;");
aI("image=bankrollicon.gif;url=/module-BankrollTracker.html");
aI("image=oddsicon.gif;url=javascript:openappletwindow()");
}

drawMenus();
</SCRIPT>

There shouldn't be line breaks in the aI. One straight line.

This is what had to be done. Since to get what you want, you have to set the submenus to openonclick, the urls had to be removed or it just sent you to the url when you clicked. I took them out and put them into their respective submenus with text like Home Games Main, Forum Home.

By the way, you have a problem in your table. It is not coded correctly. This is the table as it is now [I took out the images]

Code:

<TABLE cellSpacing=0 cellPadding=0 width="100%" 
background=_pokerjunky_files/logo_spacer.gif border=0>
  <TBODY>
  <TR>
    <TD width=473>image</TD>
<TD>menu</TD>NOTE THE DOUBLE CLOSING TD TAGS</TD></TR>NOTE THE TABLE CLOSING TAG FOLLOWED BY MORE TABLE CELL TAGS THAT SEEM TO RELATE TO NOTHING, ****</TBODY></TABLE><TR><TD></TD></TR><TR><TD>*****
<TABLE id=main cellSpacing=0 cellPadding=0 width="100%" border=0>

Ruth

Poster: PokerJunkie
Dated: Monday October 3 2005 - 3:00:09 BST

WOW< oh my I can't believe you put all this work into helping me like this... You are truly a great person and I thank you so much for helping me out I really appreciate it.

I've uplaoded the changes and it works great, I got 1 little question, is it possible if they click on the icon itself that it takes them to the url and only if they click the text to make it drop down? I guess maybe I would have to make the text images a seperate file?

Thanks so much again,.

Poster: Ruth
Dated: Monday October 3 2005 - 5:17:45 BST

Hi,

Here are the images and the new menu_data file.

Put the following in place of what you now have. Notice that this is a table inserted into the td where you now have the menu. You need the table because you need two rows, the top has the image icons, the bottom has the text images. Since I was making them, I went ahead and made different over icons for the image icons also. If you don't want that, just eliminate the overimage part in the top menu. I just made them darker so it shows a change when you mouseover. Note that I also added clickimage instead of overimage in the bottom text ones. That makes the image not change until you click it and then it stays until you click it off. Just like yahoo.

Code:

<table cellpadding=0 cellspacing=0 border=0 height=99>
<tr>
       <td valign="bottom"> <SCRIPT language=JavaScript>
                           with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("image=forumicon2.gif;overimage=forumicon2_on.gif;url=/forum.html;");
aI("image=reviewicon2.gif;overimage=reviewicon2_on.gif;url=/reviews.html;");
aI("image=homegamesicon2.gif;overimage=homegamesicon2_on.gif;url=/homegames.html;");
aI("image=bankrollicon2.gif;overimage=bankrollicon2_on.gif;url=/module-BankrollTracker.html");
aI("image=oddsicon2.gif;overimage=oddsicon2_on.gif;url=javascript:openappletwindow()");
}

drawMenus();
</SCRIPT></td>
</tr>
<tr>
       <td valign="top"><SCRIPT language=JavaScript>
                           with(milonic=new menuname("Main Menu1")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
position="relative";
aI("image=forumicon_text.gif;clickimage=forumicon_texton.gif;showmenu=Forum;openonclick=true;closeonclick=true;keepalive=1;");
aI("image=reviewicon_text.gif;clickimage=reviewicon_texton.gif;openonclick=true;closeonclick=true;keepalive=1;showmenu=Reviews;");
aI("image=homegamesicon_text.gif;clickimage=homegamesicon_texton.gif;showmenu=Home Games;openonclick=true;closeonclick=true;keepalive=1;");
aI("image=bankrollicon_text.gif;url=/module-BankrollTracker.html");
aI("image=oddsicon_text.gif;url=javascript:openappletwindow()");
}

drawMenus();
</SCRIPT></td>
</tr>
</table>

Ruth

Industrial Strength JavaScript and DHTML Menus

How to make a menu like yahoo.com with the icons?