Question about putting menus in a cell

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

Question about putting menus in a cell

Poster: street9009
Dated: Monday October 16 2006 - 20:02:25 BST

I have a php mysql based menu that is being put into a <td> tag. The problem I am having is this:

The positioning is spot on. The top of the menu (it's a vertical style) is at the top of the <td> tag. However, the <td> tag doesn't resize to reflect the size of the menu. Also, the menus don't fill up the menu cell horizontally.

And also, as you can see in the screenshot below, the "active" page link text is in orange, which I wanted, but the bottom border changes to that color too.

Can anyone shed any light on these problems?

Poster: Ruth
Dated: Monday October 16 2006 - 23:11:27 BST

Hi,

As to the width, try setting menuwidth="100%"; in the menu definition, where you have the position="relative";style= etc.

If that doesn't work, try setting itemwidth="100%"; up in that same area.

As to the other issues, the TD size not resizing, and the orange, we are going to have to see a test page to check on that, there are too many things, like css in particular, which could be causing that.

Ruth

Poster: street9009
Dated: Monday October 16 2006 - 23:47:10 BST

I tried both the menuwidth and itemwidth in the style. menuwidth didn't change anything, and itemwidth made it span the entire page, no matter what the percentage was.

The page is live. The URL is http://www.buildinghosting.com/~nuccio/ss/ . This is a demo/test site for the real thing that is housed somewhere else.

Poster: vikenk
Dated: Tuesday October 17 2006 - 0:40:49 BST

Hi,

Is this what you want?

http://www.vikenk.com/ray/test.htm

The trick is to put the menuwidth="100%" with actual menu items, not with the menu style statements:

Code:

with(milonic=new menuname("Main Menu")){
style=miniStyle;
menuwidth="100%";
alwaysvisible="1";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

I hope this works for you :>) Let me know when you're finished with the sample so I can take it down

Poster: street9009
Dated: Tuesday October 17 2006 - 0:56:13 BST

Looks great in IE... however look in Firefox. It spreads the entire page.

Poster: vikenk
Dated: Tuesday October 17 2006 - 0:56:26 BST

Sorry, I forgot about the second part to your queston:

Looking at your CSS, I can see that you have lots of hyperlink styles, for instance:

Code:

#list a:hover
{   
   border-bottom: solid 1px #a00101;
}

I'm 99.9% certain that it's one of these styles that's causing the orange underline. The menu is sensitive to CSS. If you style the tags directly (ie, not creating a class or an ID), it can affect the menu. Double check your stylesheet.

Hope this helps.

Poster: street9009
Dated: Tuesday October 17 2006 - 0:59:48 BST

Pertaining to your second reply, I'm pretty sure it doesn't have anything to do with the external style sheet. Because if you put the menu on its own page with only the two includes and the function call, it still makes the border-bottom orange.

For instance, check it here: http://www.buildinghosting.com/~nuccio/ ... /index.php

Poster: vikenk
Dated: Tuesday October 17 2006 - 1:18:48 BST

Oops! You're right!

Still though, this time I got it:

Move the position="relative"; so it's right above the menuwidth="100%". The "position" variable belongs with the main menu, not the menu style. NOw you'll have this:

Code:

with(milonic=new menuname("Main Menu")){
style=miniStyle;
position="relative";
menuwidth="100%";
alwaysvisible="1";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

Also, I found this: pagecolor="#FFAD19";

FFAD19 is an orange-ish color. Try removing that to see if the affects the menu. That's all I could find.

BTW, as an aside, adding a DOCTYPE statement at the top of your page will greatly help keep the page as cross-browser compatible as possible.

Hope this helps.

Code:

Poster: street9009
Dated: Tuesday October 17 2006 - 1:28:39 BST

Well the thing is, this is php mysql based, so the menu options are stored in the database. How would I go about making this change? Do I need to change the order of the mm_styles table?

vikenk wrote:

Also, I found this: pagecolor="#FFAD19";

FFAD19 is an orange-ish color. Try removing that to see if the affects the menu. That's all I could find.

I do want the orange on the text, though. This that setting. I just don't want the border-bottom changing as well.

vikenk wrote:

BTW, as an aside, adding a DOCTYPE statement at the top of your page will greatly help keep the page as cross-browser compatible as possible.

Not sure what you mean by that. Can you elaborate a little? What should I change the DOCTYPE to?

Poster: Ruth
Dated: Tuesday October 17 2006 - 2:56:15 BST

Hi,

First you need to upgrade your menu to the newest version.

Then copy the following and try it. I only pasted the style and main menu.

Code:

with(miniStyle=new mm_style()){
oncolor="#FFFFFF";
onbgcolor="#000000";
offcolor="#FFFFFF";
offbgcolor="#DCE9F0";
padding=2;
separatorcolor="#FFFFFF";
separatorsize=1;
bgimage="bgmen.jpg";
subimage="whitearrowtransp.gif";
bordercolor="#FFFFFF";
borderwidth=1;
borderstyle="solid";
fontstyle="normal";
headerbgcolor="#FFFFFF";
headercolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
pagebgcolor="#82B6D7";
pagecolor="#FFAD19";
subimagepadding=2;
rawcss="padding-left:20";
pageborder="1px solid #FFFFFFF";
headerborder="1px solid #FFFFFF";
}

with(milonic=new menuname("Main Menu")){
style=miniStyle;
alwaysvisible=1;
position="relative";
menuwidth="100%";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}

As to the orange color it is because the word separatorcolor was not spelled correctly.

Also, note that you have coded pageborder and headerborder incorrectly. Those borders as with off and onborder require that you use a css style code i.e. headerborder="1px solid #ffffff"; same for pageborder and onborder and offborder.

Below my name are some links to style, menu and item properties. Most of them have examples or explanations on how to set up.

Hope this helps. Took me awhile to find it, I almost reported it as a bug!

Ruth

Poster: vikenk
Dated: Tuesday October 17 2006 - 3:29:45 BST

Hello,

First, go with Ruth's suggestions. She did a good job finding the small errors, so put in the code she suggested.

street9009 wrote:

Well the thing is, this is php mysql based, so the menu options are stored in the database. How would I go about making this change? Do I need to change the order of the mm_styles table?

PHP should have nothing to do with this. If you look at your code, you'll realize that you've put the entire menu code in your HTML. The menu code isn't being generated by the PHP, so all you have to do is move the line over as I had previously mentioned.

street9009 wrote:

Not sure what you mean by that. Can you elaborate a little? What should I change the DOCTYPE to?

This isn't quite the forum for this but I'll try to put in a nutshell for you :>) The DOCTYPE declaration defines the rules as to how a web browser will interpret the code. Without a DOCTYPE, web browsers are free to interpret the code as they wish (this is known as "quirks mode"). Internet Explorer is legendary for having many quirks in interpreting code. Inserting the DOCTYPE at the top of your page forces all the browsers to follow the same set of rules and definitions. Although the pages won't match exactly, you'll have fewer problems with the website looking different in Firefox vs Internet Explorer. For more, see here:

http://www.alistapart.com/articles/doctype
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

I hope this helps.

Poster: street9009
Dated: Tuesday October 17 2006 - 16:59:48 BST

First off, thanks. You two are awesome.

They are now working almost perfectly

One more question, there's a little line that extends from the top border of each menu item when you hover over it. Any ideas what's causing that?

Other than that, they look GREAT and are exactly where I want them. THANK YOU THANK YOU THANK YOU. These are going to be purchased, just wanted to make sure they could be integrated into this project first.

Much appreciated again.

Poster: street9009
Dated: Tuesday October 17 2006 - 17:10:50 BST

Well, it appears I spoke too soon.

The line I'm talking about appears in FF only.

Now there are bigger problems in IE. When you click an item inside a one or two-deep menu, there are bizzarre results. The menu stretches all the way across the page, and sometimes takes the table cell with it, and in others just covers everything up.

Any ideas what's wrong?

Poster: vikenk
Dated: Tuesday October 17 2006 - 17:19:40 BST

street9009 wrote:

One more question, there's a little line that extends from the top border of each menu item when you hover over it. Any ideas what's causing that?

That problem can be found in your style sheet. I found this reference:

Code:

#menu a
{
   display: block;
   text-align: left;
   color: #FFFFFF;
   /*background-color: #aa0000;*/
   border-top: solid 1px #FFFFFF;
   border-bottom: solid 2px #000000;
   text-decoration: none;
   padding-left: 20px;
   background-image: url(images/bgmen.jpg);
}
#menu a:hover
{
   background-color: #000000;
   background-image: url(images/bgmenh.jpg);
}

In that menu style you have "border-top: solid 1px #FFFFFF". Since the menu is placed in the table, the hyperlink style applies to the menu as well. When you hover over the link, you get the white border on top.

When I removed that line from your stylesheet, the problem went away.

Hope this helps.

Poster: vikenk
Dated: Tuesday October 17 2006 - 17:25:44 BST

street9009 wrote:

Now there are bigger problems in IE. When you click an item inside a one or two-deep menu, there are bizzarre results. The menu stretches all the way across the page, and sometimes takes the table cell with it, and in others just covers everything up.

Any ideas what's wrong?

I'm not getting any weird operation. The menu operates smoothly in Firefox and in IE. If you notice, you're getting black borders at the bottom of the link when you hover over it as well. This can again be traced to the #menu style.

Poster: street9009
Dated: Tuesday October 17 2006 - 18:14:49 BST

vikenk wrote:

street9009 wrote:

Alright, I'll try removing that style. However, open the site in IE and go to Mobile Radios > Cables. Notice the behavior there. Then go to Mobile Radios > Cables > Power Cables. Notice the behavior there. Both are similar but slightly different. It also appears to be intermittent. Sometimes it does it and sometimes it doesn't. Like this time when it loaded it stretched the whole page when it first loaded, then a refresh put it back.

It's behaving quite strangely.

Poster: vikenk
Dated: Tuesday October 17 2006 - 18:27:18 BST

Hmmm.....I'm not getting any weird behavior. What version of IE are you using and what is your screen resolution? Mine is 1024x768.

Here's a cropped screenshot of what I see:

It's like this in Firefox and in IE.

Poster: street9009
Dated: Tuesday October 17 2006 - 18:31:02 BST

vikenk wrote:

Hmmm.....I'm not getting any weird behavior. What version of IE are you using and what is your screen resolution? Mine is 1024x768.

Here's a cropped screenshot of what I see:

It's like this in Firefox and in IE.

Did you try clicking that link though? Actually having the page move?

I think the problem is simply this (though I have no idea how to fix it).

The menus are loading pre-maturely. Sometimes I get the MILONIC link at the top because the menus load before the link at the bottom. Same with the other two behaviors. Behavior #1 (menus stretching entire page and not being relatively positioned in the table cell) is happening when things don't load in time and behavior #2 (menus stretching the table cell to width of entire page but being relatively positioned) is the same.

What say you?

Poster: vikenk
Dated: Tuesday October 17 2006 - 18:44:35 BST

Well, I'm afraid I don't know much about PHP, but if you suspect a timing issue you can try to move the script files to the bottom of the page just before the </body> tag. That will make it the last item to load.

That would at least verify if it's a timing issue or not. Move these files down to the bottom:

Code:

<script language="JavaScript" src="http://www.buildinghosting.com/~nuccio/menus/milonic_src.js" type='text/javascript'></script>   
<script language="JavaScript">
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=http://www.buildinghosting.com/~nuccio/menus/mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt language=JavaScript src=http://www.buildinghosting.com/~nuccio/menus/mmenudom.js><\/scr"+"ipt>"); 
</script>

I'm not certain that will work, but you could give it a shot. It does seem like the code isn't being parsed in time, though.

Maybe John can help more. John's more experienced with PHP.

Poster: street9009
Dated: Tuesday October 17 2006 - 18:53:14 BST

Good thought, but when you do that javascript doesn't know what to do with the milonic code inside the table cell.

I really thought that was going to fix it :/

Poster: Ruth
Dated: Tuesday October 17 2006 - 19:11:43 BST

Hi,

I think the problem is the way your menu is setup in the table. There are two methods for doing that

1. use buildAfterLoad=true; in the data file and put all the calls into the table cell

2. put the main menu only into the table cell and the calls for files the first thing after the body tag

In the first method you would have this at the top of your data 'file'

Code:

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-3
_buildAfterLoad=true;

In the second method you'd have this in your table cell

Code:

 <SCRIPT>
with(milonic=new menuname("Main Menu")){
style=miniStyle;
alwaysvisible="1";
position="relative";
menuwidth="100%";
aI("text=Home;url=index.php;");
aI("text=News;url=index.php?news=yes;");
aI("text=NLT Parts Catalog;url=index.php?categoryID=100;");
aI("text=Special Sale Items;url=index.php?categoryID=200;");
aI("text=Portable Radios;url=index.php?categoryID=300;showmenu=Portable Radios;");
aI("text=Mobile Radios;url=index.php?categoryID=400;showmenu=Mobile Radios;");
aI("text=Stations;url=index.php?categoryID=500;showmenu=Stations;");
aI("text=Tech Specials;url=index.php?categoryID=600;");
aI("text=Service Aids;url=index.php?categoryID=700;showmenu=Service Aids;");
aI("text=Site Credits;url=index.php?show_aux_page=14;");
aI("text=M/A Com Parts;url=index.php?show_aux_page=10;");
aI("text=NLT Repair Depot;url=index.php?show_aux_page=11;");

}
drawMenus();
</script>

and all the rest would be the first thing after the body tag.

This allows the submenus to be built completely before anything else on the page.

http://www.milonic.com/tablemenu.php

Since you are seeing the Milonic item flicker in and then disappear I think you're right on the timing, especially since once the page is in cache that doesn't happen. Maybe setting up the menu in this way will fix that.

Ruth

Poster: vikenk
Dated: Tuesday October 17 2006 - 19:18:31 BST

Hi Ruth,

That's exactly the adivce I was going to give her, but I didn't know if it would work given that she's using PHP built menus. I figured I'd give no advice at all instead of giving bad advice...

Poster: Ruth
Dated: Tuesday October 17 2006 - 19:44:58 BST

Hi Vikenk,

It's really nice to see you back

Well, I don't do php menus either, but since they seem to be on the page I just figured that she could set it up as noted. I know that Milonic uses php but they actually have the menu data file as a php file menu_data.php. Maybe she could set it up so that the main menu is last, though I'm not sure if that will work or not. I have seen some pages where they are on the page and the style, submenus, main menu is the setup.

Welcome back!

Ruth

Poster: street9009
Dated: Tuesday October 17 2006 - 20:19:50 BST

Thanks for the replies. (And just for the record, it's "him" or "he"

)

The second method Ruth posted isn't an option as this is the PHP mysql based menu, which gets built from the database by calling a php function. It puts all of the menu code wherever you call that function by default.

So I tried method 1, and nothing changed.

Did I do something wrong?

Poster: vikenk
Dated: Tuesday October 17 2006 - 23:10:08 BST

Hi,

Sorry about the "she" reference :oops:

I had read another post which was signed by a woman before I read yours. The name must have stuck in my head.

Did you put the _buildAfterLoad=true in the exact spot that Ruth told you to? Did you follow caplitalization rules? I think that makes a difference in this case.

Poster: street9009
Dated: Tuesday October 17 2006 - 23:33:59 BST

Code:

<script>

_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=2;
_subOffsetLeft=-3;
_buildAfterLoad=true;

There's the exact paste of the top of the menu code that's generated by the PHP call.

Poster: Ruth
Dated: Tuesday October 17 2006 - 23:51:01 BST

Hi,

I have posted requesting help on this. I don't know how position menus coming from a data base.

Ruth

Poster: street9009
Dated: Tuesday October 17 2006 - 23:57:47 BST

Thanks again, I do appreciate the help.

Poster: vikenk
Dated: Wednesday October 18 2006 - 0:26:49 BST

Yeah.....I'm sorry, but I'm stumped on this one. Although I know HTML pretty well, I know nothing about working with PHP.

Sorry I couldn't help more.

Poster: street9009
Dated: Wednesday October 18 2006 - 1:38:10 BST

No worries, you have helped a LOT as it is. I appreciate it.

I will wait to see what Ruth's post comes up with.

Thanks to you both again.

Poster: street9009
Dated: Thursday October 19 2006 - 22:22:23 BST

Any news on this issue?

Poster: street9009
Dated: Tuesday October 24 2006 - 22:11:49 BST

Did you get any response to your inquiry, Ruth? I still can't manage to figure out this one.

Industrial Strength JavaScript and DHTML Menus

Question about putting menus in a cell