Need help fitting menu on page

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

Need help fitting menu on page

Poster: reggsenterprises
Dated: Friday July 14 2006 - 18:00:50 BST

Been trying to get the menu to fit on my page. The spacing between each image is much too large and no matter what I seem to try, either the left side is off the page or the right side. I've searched through the forum and I've tried a lot of the suggestions. Can someone advise as to how to bring the images together and also to center the resulting menu on the page. Thanks.

http://www.reggswireless.com/testpage.html

The page above is the only one with the Milonic Menu.

Poster: Ruth
Dated: Friday July 14 2006 - 21:03:25 BST

Hi,

There is something wrong with your images. When I remade and used those everything worked fine.

Just as an aside, you should make sure those images are the same height, some are 40px high, some 42 and some 43.

When you remake the images, this should be your coding for the menu

Code:

with(milonic=new menuname("Main Menu")){
style=AllImagesStyle;
alwaysvisible=1;
orientation="horizontal";
screenposition="center"
top=166;

And your AllImagesStyle at the top should have this

Code:

with(AllImagesStyle=new mm_style()){
padding=0;
separatorcolor="transparent";
separatorsize=2;
}

That will put a transparent space between the images that is 2px, you can make it wider, of course, or eliminate it so there's no space between the images.

Ruth

Need help fitting menu on page

Poster: reggsenterprises
Dated: Saturday July 15 2006 - 7:32:15 BST

Thanks Ruth. Can you please take a look again? Some are still not alligning and they are a little low, not following the "top" designation. Thanks.

Poster: Ruth
Dated: Saturday July 15 2006 - 10:20:09 BST

Hi,

I don't know what the problem is, if something is messed up in your menu data or in the images.

Anyway, try copying this data into a different blank file and save it as test.js, then save the images I made which are below, see if that does it. I can actually put the page up and show you, but I don't like putting all that stuff from those other sites on mine. Notice I put an offborder="3px double #6600CC"; into the all images style so you can see the size of the images. Just remove it. These images are all the same height 43px. That's the largest height you have on one of the images so I made them all that height.

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=250;
_menuOpenDelay=100;
_subOffsetTop=1;
_subOffsetLeft=-2;




with(AllImagesStyle=new mm_style()){
padding=0;
separatorcolor="transparent";
separatorsize=10;
offborder="3px double #6600CC";
}

with(menuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=3;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=1;
}

with(milonic=new menuname("Main Menu")){
style=AllImagesStyle;
alwaysvisible=1;
orientation="horizontal";
screenposition="center"
top=160;
aI("image=cingular1.gif;overimage=cingular1.gif;showmenu=cingularmenu;");
aI("image=verizon1.gif;overimage=verizon1.gif;showmenu=verizonmenu;");
aI("image=nextel1.gif;overimage=nextel1.gif;showmenu=nextelmenu;");
aI("image=sprint1.gif;overimage=sprint1.gif;showmenu=sprintmenu;");
aI("image=alltel1.gif;overimage=alltel1.gif;showmenu=alltelmenu;");
aI("image=opex1.gif;overimage=opex1.gif;showmenu=opexmenu;");
}

with(milonic=new menuname("cingularmenu")){
style=menuStyle;
aI("text=Cingular Wireless Phones;url=cingularphones.html;");
aI("text=Cingular Wireless Plans;url=cingularplans.html;");
}

with(milonic=new menuname("verizonmenu")){
style=menuStyle;
aI("text=Verizon Wireless Phones;url=verizonphones.html;");
aI("text=Verizon Wireless Plans;url=verizonplans.html;");
}

with(milonic=new menuname("nextelmenu")){
style=menuStyle;
aI("text=Nextel Cellular Phones;url=nextelphones.html;");
aI("text=Nextel Cellular Plans;url=nextelplans.html;");
}

with(milonic=new menuname("sprintmenu")){
style=menuStyle;
aI("text=Sprint PCS Phones;url=sprintphones.html;");
aI("text=Sprint PCS Plans;url=sprintplans.html;");
}

with(milonic=new menuname("alltelmenu")){
style=menuStyle;
aI("text=Alltel Wireless Phones;url=alltelphones.html;");
aI("text=Alltel Wireless Plans;url=alltelplans.html;");
}

with(milonic=new menuname("opexmenu")){
style=menuStyle;
aI("text=Opex Wireless Phones;url=opexphones.html;");
aI("text=Opex Wireless Plans;url=opexplans.html;");
}

drawMenus();

IMAGES REMOVED

Ruth

Need help fitting menu on page

Poster: reggsenterprises
Dated: Saturday July 15 2006 - 14:35:34 BST

Ruth,

This seems to work perfect. Couple things:

1) The button for tmobile is not there. Can you make that like the others and send it to me? I can add it to the menu once I have the gif.

2) How did you make the buttons that they now work? I made them in Adobe Printshop and all the same size but you say the sizes are different. I must be doing something wrong.

Thank you very much!

REGGS

Need help fitting menu on page

Poster: reggsenterprises
Dated: Saturday July 15 2006 - 14:37:09 BST

Ruth,
Also, can you reduce the witdh of the opex down to the size of the others so there's not so much blank space on both sides of it? Thanks again.

Poster: Ruth
Dated: Saturday July 15 2006 - 21:25:23 BST

Hi,

I use Corel PhotoPaint, it's part of the CorelDraw Graphics Suite.

I have a question about your layout. If that top part is part of all the pages, there is a much better way to set up your menu so it will always be in that blue area no matter what the resolution of the browser.

Assuming they are all that layout at the top, the part with the two protected images, then this is the better way to set up your menu and that section of the page which has the menu.

In that div where the menu sits position absolutely with top= and screenposition.

Make that div like this.

Code:

<DIV id=SGROBJ7D674DC25151090 
      style="Z-INDEX: 100; LEFT: 0px; WIDTH: 999px; POSITION: absolute; TOP: 149px; HEIGHT: 62px; padding: 9 0 0 7;BACKGROUND: url(protected_graphic_banner_icon_background.jpg) repeat-x top left">
     <script>
     with(milonic=new menuname("Main Menu")){
style=AllImagesStyle;
alwaysvisible=1;
orientation="horizontal";position="relative";
aI("image=cingular-1.gif;overimage=cingular-1.gif;showmenu=cingularmenu;");
aI("image=verizon-1.gif;overimage=verizon-1.gif;showmenu=verizonmenu;");
aI("image=nextel-1.gif;overimage=nextel-1.gif;showmenu=nextelmenu;");
aI("image=sprint-1.gif;overimage=sprint-1.gif;showmenu=sprintmenu;");
aI("image=alltel-1.gif;overimage=alltel-1.gif;showmenu=alltelmenu;");
aI("image=opex-1.gif;overimage=opex-1.gif;showmenu=opexmenu;");
aI("image=t-mobile-1.gif;overimage=t-mobile-1.gif;showmenu=opexmenu;");
}
drawMenus();
  </script>
  </DIV>

Now cut out your main menu from the menu data file, since that menu is now in the div and positioned relatively.

Note. I had to make that div at z-index:100 that's so the menu didn't go behind that side bar menu. When it's positioned relatively in a div that 'over/underlaps' another div, the menu is fixed in the div so that div has to be made to go over the other so the menu doesn't go behind.

You data file would now be this. Note: I put a pageborder into the all images style so that when when you click one of the submenus for those images, if there is a menu on the page with the images, the image that corresponds to that page will look like it's inset with a different colored border. You can just take it out if you don't like it.

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=250;
_menuOpenDelay=100;
_subOffsetTop=1;
_subOffsetLeft=-2;




with(AllImagesStyle=new mm_style()){
padding=0;
separatorcolor="transparent";
separatorsize=6;
offborder="3px double #6600CC";
pageborder="2px outset #ffff04";
}

with(menuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=3;
pageborder="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=1;
}



with(milonic=new menuname("cingularmenu")){
style=menuStyle;
aI("text=Cingular Wireless Phones;url=test_page_border.htm;");
aI("text=Cingular Wireless Plans;url=cingularplans.html;");
}

with(milonic=new menuname("verizonmenu")){
style=menuStyle;
aI("text=Verizon Wireless Phones;url=verizonphones.html;");
aI("text=Verizon Wireless Plans;url=verizonplans.html;");
}

with(milonic=new menuname("nextelmenu")){
style=menuStyle;
aI("text=Nextel Cellular Phones;url=nextelphones.html;");
aI("text=Nextel Cellular Plans;url=nextelplans.html;");
}

with(milonic=new menuname("sprintmenu")){
style=menuStyle;
aI("text=Sprint PCS Phones;url=sprintphones.html;");
aI("text=Sprint PCS Plans;url=sprintplans.html;");
}

with(milonic=new menuname("alltelmenu")){
style=menuStyle;
aI("text=Alltel Wireless Phones;url=alltelphones.html;");
aI("text=Alltel Wireless Plans;url=alltelplans.html;");
}

with(milonic=new menuname("opexmenu")){
style=menuStyle;
aI("text=Opex Wireless Phones;url=opexphones.html;");
aI("text=Opex Wireless Plans;url=opexplans.html;");
}

drawMenus();

I tested in IE, NN, FF [kind of downlevel in these right now] and it worked fine.

Note: there is one disadvantage, centering the menu will not work. However, if your layout is centered the menu will move with the layout. For some not being able to center it precludes using it this way, but it has many more advantages than disadvantages. Using absolute positioning, when you set top=160; it will always be at that point, no matter what the resolution, that may make the menu look as if it has moved downwards in higher resolutions which 'look' as if they put the same image, i.e. your top one, into a smaller/shorter space.

Note2: if all those pages use that top like that, then the top has to be changed on all the pages. I've put the actual menu in the div so you could see the coding, but it would be better to take the menu, including the drawMenus() at the end, and excluding the script tags, save it as embed_main.js and then just put the call for that file in the div.

Hope this helps. If you have any questions, just post back.

Ruth

Poster: reggsenterprises
Dated: Sunday July 16 2006 - 1:16:10 BST

Ruth,
Does this method mean that if I need to make a change to the menu, I'd have to make the change on every page?

Poster: reggsenterprises
Dated: Sunday July 16 2006 - 1:37:13 BST

Ruth,

It appears what you are suggesting is beyond my knowledge. I've saved the icons and am hoping the original method you sent will work. Thank you.

Poster: Ruth
Dated: Sunday July 16 2006 - 2:27:10 BST

Hi,

What you would have actually is two files. The main menu, in a file by itself, that's the one with those images, and the rest in the menu_data.js file as it is now.

You'd have to put the calls for that main menu on the pages but once there, you'd make any changes to the main menu in that main menu file, and any changes to submenus in the menu_data.js file.

If you want to test it, put the following in a blank page and save it as embed_main.js

Code:

 
     with(milonic=new menuname("Main Menu")){ 
style=AllImagesStyle; 
alwaysvisible=1; 
orientation="horizontal";position="relative"; 
aI("image=cingular-1.gif;overimage=cingular-1.gif;showmenu=cingularmenu;"); 
aI("image=verizon-1.gif;overimage=verizon-1.gif;showmenu=verizonmenu;"); 
aI("image=nextel-1.gif;overimage=nextel-1.gif;showmenu=nextelmenu;"); 
aI("image=sprint-1.gif;overimage=sprint-1.gif;showmenu=sprintmenu;"); 
aI("image=alltel-1.gif;overimage=alltel-1.gif;showmenu=alltelmenu;"); 
aI("image=opex-1.gif;overimage=opex-1.gif;showmenu=opexmenu;"); 
aI("image=t-mobile-1.gif;overimage=t-mobile-1.gif;showmenu=opexmenu;"); 
} 
drawMenus(); 

Put this in a file and save it as sub_data.js

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps 
_menuCloseDelay=250; 
_menuOpenDelay=100; 
_subOffsetTop=1; 
_subOffsetLeft=-2; 




with(AllImagesStyle=new mm_style()){ 
padding=0; 
separatorcolor="transparent"; 
separatorsize=6; 
offborder="3px double #6600CC"; 
pageborder="2px outset #ffff04"; 
} 

with(menuStyle=new mm_style()){ 
bordercolor="#296488"; 
borderstyle="solid"; 
borderwidth=1; 
fontfamily="Verdana, Tahoma, Arial"; 
fontsize="75%"; 
fontstyle="normal"; 
headerbgcolor="#ffffff"; 
headercolor="#000000"; 
offbgcolor="#DCE9F0"; 
offcolor="#515151"; 
onbgcolor="#4F8EB6"; 
oncolor="#ffffff"; 
outfilter="randomdissolve(duration=0.3)"; 
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)"; 
padding=3; 
pageborder="#82B6D7"; 
pagecolor="black"; 
separatorcolor="#2D729D"; 
separatorsize=1; 
subimage="arrow.gif"; 
subimagepadding=1; 
} 



with(milonic=new menuname("cingularmenu")){ 
style=menuStyle; 
aI("text=Cingular Wireless Phones;url=test_page_border.htm;"); 
aI("text=Cingular Wireless Plans;url=cingularplans.html;"); 
} 

with(milonic=new menuname("verizonmenu")){ 
style=menuStyle; 
aI("text=Verizon Wireless Phones;url=verizonphones.html;"); 
aI("text=Verizon Wireless Plans;url=verizonplans.html;"); 
} 

with(milonic=new menuname("nextelmenu")){ 
style=menuStyle; 
aI("text=Nextel Cellular Phones;url=nextelphones.html;"); 
aI("text=Nextel Cellular Plans;url=nextelplans.html;"); 
} 

with(milonic=new menuname("sprintmenu")){ 
style=menuStyle; 
aI("text=Sprint PCS Phones;url=sprintphones.html;"); 
aI("text=Sprint PCS Plans;url=sprintplans.html;"); 
} 

with(milonic=new menuname("alltelmenu")){ 
style=menuStyle; 
aI("text=Alltel Wireless Phones;url=alltelphones.html;"); 
aI("text=Alltel Wireless Plans;url=alltelplans.html;"); 
} 

with(milonic=new menuname("opexmenu")){ 
style=menuStyle; 
aI("text=Opex Wireless Phones;url=opexphones.html;"); 
aI("text=Opex Wireless Plans;url=opexplans.html;"); 
} 

drawMenus(); 

The calls for the files and sub_data.js file would be

Code:

<BODY bgColor=white leftMargin=0 rightMargin=0>
<SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>
<NOSCRIPT><A href="http://www.milonic.com/">JavaScript Menus and DHTML Menus 
Powered by Milonic</A></NOSCRIPT>
<SCRIPT type=text/javascript>
    <!-- 
    if(ns4)_d.write("<script language=JavaScript src=mmenuns4.js><\/script>"); 
    else _d.write("<script language=JavaScript src=mmenudom.js><\/script>"); 
    -->
    </SCRIPT>

<SCRIPT src="sub_data.js" type=text/javascript></SCRIPT>

And that div where you have the plain blue background would be where you put the call for the embed_main.js file

Code:

 <DIV id=SGROBJ7D674DC25151090 
      style="Z-INDEX: 100; LEFT: 0px; WIDTH: 999px; POSITION: absolute; TOP: 149px; HEIGHT: 62px; padding: 9 0 0 7;BACKGROUND: url(protected_graphic_banner_icon_background.jpg) repeat-x top left">
     <SCRIPT src="embed_main.js" type=text/javascript></SCRIPT>

So, if you need to edit the main menu, you'd just do the editing in the embed_main.js file and the submenus in the sub_data.js files.

You have the info now if you ever want to try it or use it on some other page/site.

Ruth

Industrial Strength JavaScript and DHTML Menus

Need help fitting menu on page

Need help fitting menu on page

Need help fitting menu on page

Need help fitting menu on page