Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:26
Menu in Table
Poster: Simcfc73
Dated: Tuesday November 8 2005 - 16:47:17 GMT
Hi,
I'm starting putting a menu on my school website and decided that I wanted one in a table. I've got the default one to display in the table where I want and have made it 100% but can't get the default images to change. I'm wanting to use the bgimage= command to make the menu look better.
Can someone tell me if this is do-able and poit me in the right direction.
After I get this sorted I will be moving onto putting another floating menu on the website which scrolls with the webpage keeping its relative position but I will cross that briodge when I get to it.
Thanks
Cool product by the wat
Simon Smith
Poster: Ruth
Dated: Tuesday November 8 2005 - 17:32:04 GMT
Hi Simon,
I'm not sure what you mean by can't get the bgimage to change. Could you define a little more what is happening and what you want to happen?
As to the second part, you can do that all from the one file if you want. Unless the 'floating menu' is extremely long. If you're talking about having the same menu you have in the table also being a menu that floats, you need to make sure you call the floating menu something else, i.e. MainMenuu for the table and MainMenu1, or MainFloat, or something like that.
Ruth
table
Poster: Simcfc73
Dated: Tuesday November 8 2005 - 19:00:51 GMT
Thanks for the reply Ruth,
What I want to do is put a Background image on the menu buttons instead of the standard background colour. I've got the menu in a table to work fine using the example and changed the menu labels and links but I would like to use buttons like in menusample18.
I've just got the standard code in the Body of the HTML just like in menusample9. Should it just be a case of adding the bgimage="/ and the clickbgimage="/ into the BODY and into the js files.
Sorry if I am asking stupid questions, I'm not that good at HTML.
Poster: Ruth
Dated: Tuesday November 8 2005 - 20:32:46 GMT
If you want a bgimage which is the same for every item, then you would code bgimage="imagefilename"; in the menuStyle. If you code it in the menu style it will appear in every item in every menu that uses that style. If you have different bgimage for each item then you would code it in the item itself as bgimage=imagefilename; note that in the style it has quotes around the name but in the item it doesn't. Change the bgcolors to onbgcolor="transparent"; offbgcolor="transparent";
Ruth
Thanks
Poster: Simcfc73
Dated: Wednesday November 9 2005 - 13:21:33 GMT
Thanks for the reply Ruth.
I've almost got it now, the image background is fine and the menus seem okay but there is one little thing thats not quite right.
My code is below. I've made the itemwidth in px for all except the last one which I have put as a % to fill the menu. I've just put 50% just to test it.
with(milonic=new menuname("Main Menu")){
orientation="horizontal";
position="relative";
menuwidth="100%";
menualign="centre";alwaysvisible=1;
style=menuStyle;
aI("text=General Information;showmenu=General;itemwidth=160;");
aI("text=The School;showmenu=School;itemwidth=100;");
aI("text=Education;showmenu=Education;itemwidth=100;");
aI("text=Magazine;showmenu=Magazine;itemwidth=100;");
aI("text=Contact;showmenu=Contact;itemwidth=100;");
aI("text=Parent Info/Links;showmenu=Info;itemwidth=140;");
aI("text=Home;url=http://www.fulneckschool.co.uk/;itemwidth=50%");
}
drawMenus();
I've used the bgimage= in the js file to put a background image on the menu but wondered if there is any way to get the image to stretch to accomodate the % I am using. Its just I am using a button which is 160px and looks fine when it gets shrunk to 100px but when the last menu is displayed using the % it repeats the image and looks awful.
Thanks in advance.
Poster: Ruth
Dated: Wednesday November 9 2005 - 14:34:01 GMT
Hi,
If you have a link to the page it would be better, if not, I need to have the menuStyle, and the page layout, at least, so I can see what you mean and test some solutions.
Ruth
Poster: Simcfc73
Dated: Wednesday November 9 2005 - 14:52:50 GMT
Hi Ruth,
Here is a link to the website. Its a work in progress so its rough and ready. As you can see they all use the same Background image file and the one at the left shows the right hand shadow. I can get round the menu icons which are 100px width okay its just the home button on the right which doesn't display right.
I wouls like the home button on the left but the % seems to throw everything out.
http://www.fulneckschool.co.uk/newsite/index.htm
Thanks
Poster: Ruth
Dated: Thursday November 10 2005 - 0:21:58 GMT
Hi,
OK, I did some designing. The style section at the top of the page is now
Code:
<style type="text/css">
<!--
body {margin:0px 15px 0px 15px;
background-color: #CCCCCC;
}
.tdleft{background: #60bd27 url(bg_left.gif);background-repeat:no-repeat;width:10px;}
.tdright{background: #60bd27 url(bg_right.gif);background-repeat:no-repeat;width:10px;
background-position:top right}
-->
</style>
<!--
body {margin:0px 15px 0px 15px;
background-color: #CCCCCC;
}
.tdleft{background: #60bd27 url(bg_left.gif);background-repeat:no-repeat;width:10px;}
.tdright{background: #60bd27 url(bg_right.gif);background-repeat:no-repeat;width:10px;
background-position:top right}
-->
</style>
Then I added two cells to the table with backgrounds that match the menu, and two small items to the menu with backgrounds, and a menubgimage so when the resolution changes the part that is outside the menu, the 100% span part will look just like the items. This is your new table
Code:
<table width="100%" border=0 cellpadding="0" cellspacing="0">
<tbody>
<tr>
<!--NEW LEFT TABLE CELL WITH BGIMAGE TO MATCH MENU -->
<td class="tdleft" width=10></td>
<td height="20" bgcolor="#1C0E7D" class=menu1>
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
menualign="center";
align="center";
aI("text= ;bgimage=bg_start.gif;itemwidth=3;type=header;");
aI("text=General Information;showmenu=General;itemwidth=150;");
aI("text=The School;showmenu=School;itemwidth=95;");
aI("text=Education;showmenu=Education;itemwidth=92;");
aI("text=Magazine;showmenu=Magazine;itemwidth=92;");
aI("text=Contact;showmenu=Contact;itemwidth=80;");
aI("text=Parent Info/Links;showmenu=Info;itemwidth=134;");
aI("text=Home;url=http://www.fulneckschool.co.uk/;itemwidth=54");
aI("text= ;itemwidth=3;type=header;");
}
drawMenus();
</script>
</td>
<!--NEW RIGHT TABLE CELL WITH BGIMAGE TO MATCH MENU -->
<td class="tdright" width=10></td>
</tr></tbody> </table>
<tbody>
<tr>
<!--NEW LEFT TABLE CELL WITH BGIMAGE TO MATCH MENU -->
<td class="tdleft" width=10></td>
<td height="20" bgcolor="#1C0E7D" class=menu1>
<script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
menualign="center";
align="center";
aI("text= ;bgimage=bg_start.gif;itemwidth=3;type=header;");
aI("text=General Information;showmenu=General;itemwidth=150;");
aI("text=The School;showmenu=School;itemwidth=95;");
aI("text=Education;showmenu=Education;itemwidth=92;");
aI("text=Magazine;showmenu=Magazine;itemwidth=92;");
aI("text=Contact;showmenu=Contact;itemwidth=80;");
aI("text=Parent Info/Links;showmenu=Info;itemwidth=134;");
aI("text=Home;url=http://www.fulneckschool.co.uk/;itemwidth=54");
aI("text= ;itemwidth=3;type=header;");
}
drawMenus();
</script>
</td>
<!--NEW RIGHT TABLE CELL WITH BGIMAGE TO MATCH MENU -->
<td class="tdright" width=10></td>
</tr></tbody> </table>
I changed the width of your main menu to 100%, setting the right and left margins at 15px instead of using 95% in the table, it was easier to do the layout that way.
LINKS REMOVED: 12/30/08
Hope this helps.
Ruth
Thanks
Poster: Simcfc73
Dated: Thursday November 10 2005 - 9:15:33 GMT
Really appreciate the work you've done for me. Where do I send the cheque.???
You can delete the stuff off your site now as I have downloaded it.
Thanks Again.