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

PokerJunkie · Post by **PokerJunkie** » Thu Sep 29, 2005 2:31 am

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..

Post by **Ruth** » Thu Sep 29, 2005 3:34 am

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

PokerJunkie · Post by **PokerJunkie** » Thu Sep 29, 2005 7:49 am

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....

PokerJunkie · Post by **PokerJunkie** » Sat Oct 01, 2005 10:48 am

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?

Post by **Ruth** » Sat Oct 01, 2005 5:53 pm

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: Select all

<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

Code: Select all

<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

PokerJunkie · Post by **PokerJunkie** » Mon Oct 03, 2005 3:00 am

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,.

Post by **Ruth** » Mon Oct 03, 2005 5:17 am

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: Select all

<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