Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
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:45
NEWBIE: Fat separator bars & odd behavior on first mouse
Poster: drhansenjr
Dated: Sunday February 1 2004 - 14:28:52 GMT
I am working with Milonic Menus for the first time and am having some odd problems (see http://www.anacys.com/sa/ ).
Despite having separatorsize=1 my separator bars in vertical menus all come out 5px thick.
Also. when I first mouseover items in the main horizontal menu, the corresponding vertical menu appears at the far left margin -- but in the proper place on the second and subsequent mouseovers. I am using the default menu that came with my download with minimal tweaks.
I am also using it on a Xoops CMS/Portal site if that matters.
HELP!!
dh
Poster: drhansenjr
Dated: Sunday February 1 2004 - 22:41:26 GMT
Here's a screenshot showing the problem (the vertical menu moves into the correct position under "the school" after the first mouseover).
Poster: fredlongworthhighschool
Dated: Monday February 2 2004 - 9:15:27 GMT
Just had a look at your site and all seems to be ok, I'm assuming you got it fixed over the weekend?
Poster: drhansenjr
Dated: Monday February 2 2004 - 12:38:17 GMT
What you're seeing is Tigra Menus. I finally gave up and switched.
Poster: Ruth
Dated: Monday February 2 2004 - 17:17:25 GMT
too bad, this is such a great menu, so designable to meet personal creative quirks...... and a lot of people would have been glad to help with whatever the problem might have been.
Ruth
Poster: drhansenjr
Dated: Monday February 2 2004 - 18:31:59 GMT
OK - I plugged Milonic back in -- anything jump out at you that I might be doing wrong?
Poster: Andy
Dated: Monday February 2 2004 - 19:17:00 GMT
It's to do with your style sheet.
style.css has global parameters that are conflicting with the menu.
I'm looking into how we can stop this from happening.
The problem is related to the global TABLE and DIV styles.
Is this your style or the style built from Xoops?
Cheers
Andy
Poster: Andy
Dated: Monday February 2 2004 - 19:30:22 GMT
Right, here's the score
- Upgrading to RC49 will fix the separator problem. We've fixed padding to 0px, so shouldn't be a problem now.
Remove 100% from the TABLE reference in style.css - Unless of course you need this parameter and then you'll need to specify menu widths.
Change the menuwidth= declarations in your menu_data.js file to itemwidth=
Hopefully that should clear the main problems, then let us know what else needs looking at.
ALL of the problems are associated with CSS, most of the problems we can deal with but there may be some we have no control over.
Hope this helps
Andy
Poster: drhansenjr
Dated: Monday February 2 2004 - 20:37:03 GMT
Where do I go to get the RC49 upgrade?
Poster: Ruth
Dated: Monday February 2 2004 - 20:51:53 GMT
drhansenjr, you go to the main page/home page, click the milonic icon at the top of this one, click get version 5 and go from there. It really is a great menu, I love it, was able to configure it with a little / lot/ of help because I wanted something so different, but boy you can make it do so many things, look so 'personal'. I love it.
Ruth
Poster: drhansenjr
Dated: Monday February 2 2004 - 21:37:50 GMT
OK... Upgrading to RC49 took care of the fat separators, but I still had the behavior where on the first mouseover the dropdown menu appears at the far left side of the page, but comes up in the right place in subsequent mouseovers.
I replaced all the "menuwidth"s with "itemwidth"s -- and now the menus span the entire width of the page!! What goeth on?
Poster: John
Dated: Monday February 2 2004 - 21:40:20 GMT
Ruth is one of our folks who has done some really nifty stuff with her menu (that's not to say many other folks have not also!). Do take the time to check it out if you have not already done so.
Poster: drhansenjr
Dated: Monday February 2 2004 - 21:44:17 GMT
I take back my last post-- I forgot to zap the width:100% in my css. Doing that seems to have fixed my problem for now.
Poster: drhansenjr
Dated: Monday February 2 2004 - 21:49:28 GMT
OK -- almost there! Any idea why any item in my menu with a submenu seems to have the text dropped/padded down several pixels -- while items with no submenu do not?
Poster: Ruth
Dated: Monday February 2 2004 - 22:03:33 GMT
Off the top of my head it has to do with the subimage. I've downloaded the menu and am checking for the specific problem, padding etc.
Ruth
Poster: John
Dated: Monday February 2 2004 - 22:15:31 GMT
I'm doing the same as Ruth, but she has a head start on me!
Meanwhile, just to stay 'clean' (this isn't the cause of the problem), you have...
Code:
aI("text=Home;itemwidth=75;url=/sa/;status=Back To Home Page;");
...in your main menu items, which is correct. However, you did not continue the format in your other menus...
Code:
aI("text=Parish Administration;showmenu=ParishAdmin");
Note the missing ; after ParishAdmin. Should be...
Code:
aI("text=Parish Administration;showmenu=ParishAdmin;");
...for all menu items.
Go fer it, Ruth!
Poster: Ruth
Dated: Monday February 2 2004 - 22:53:40 GMT
The conflict is from the style.css file. This line
Code:
TD {
BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; VERTICAL-ALIGN: top
}
if you remove that VERTICAL-align:top the problem desists. I'm not sure there is a way to override it in the menu_data file. I tried subimageposition="right;middle"; but that didn't work. Also, the menuheight is being governed from the style.css the BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; MARGIN: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px; VERTICAL-ALIGN: top
}
Code:
DIV {
LINE-HEIGHT: 14px; MARGIN: 2px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
The margin, padding are adding to the menu. I fixed that by removing the padding=1; from the top of the menu_data.js file and moving the margin=0; down to the menu itself.LINE-HEIGHT: 14px; MARGIN: 2px; PADDING-BOTTOM: 2px; PADDING-LEFT: 2px; PADDING-RIGHT: 2px; PADDING-TOP: 2px
}
Code:
with(milonic=new menuname("Main Menu")){
margin="0";
style=menuStyle;
separatorsize="1";
top=100;
menualign="left";
alwaysvisible=1;
orientation="horizontal";
overflow="scroll";
aI("text=Home;itemwidth=75;url=/sa/;status=Back To Home Page;");
aI("text=The Parish;itemwidth=100;showmenu=Parish;");
aI("text=The School;itemwidth=100;showmenu=School;");
aI("text=For Current Students & Parents;itemwidth=250;showmenu=Students;");
}
I don't know what to do about the arrow...nothing I tried works except removing that Vertical-align: top; from the style.css file.
margin="0";
style=menuStyle;
separatorsize="1";
top=100;
menualign="left";
alwaysvisible=1;
orientation="horizontal";
overflow="scroll";
aI("text=Home;itemwidth=75;url=/sa/;status=Back To Home Page;");
aI("text=The Parish;itemwidth=100;showmenu=Parish;");
aI("text=The School;itemwidth=100;showmenu=School;");
aI("text=For Current Students & Parents;itemwidth=250;showmenu=Students;");
}
Ruth
Poster: drhansenjr
Dated: Tuesday February 3 2004 - 0:24:10 GMT
Wow! Thanks for all the help, Ruth! Big improvement!
Just a few follow-ups:
1) How do I get my menu to move hard against the left margin of the page and get rid of that annoying little 2-3px gap at the left? Is this also a css issue?
2) Any idea why the arrow gifs are padded back a ways in the main menu and not in the others (I'd like them all the same).
3) Is there an easy way to add a "dummy" rectangle/item to the right of the last main menu item so it spans the page -- or do I need to code that into the page itself and position the menu on top of it?
Dan
Poster: drhansenjr
Dated: Tuesday February 3 2004 - 2:02:29 GMT
Ok - I solved these myself -- except that I've lost the separator after the rightmost item. Adding menuwidth="100%"; an taking out overflow="scroll"; fixed 1 and 3, and I had a default css entry that added padding to all img tags -- zapping that got rid of #2.
Just one little nit left!!
Poster: Ruth
Dated: Tuesday February 3 2004 - 2:07:51 GMT
Ok, but one thing I noticed the arrows in the main horizontal menu point to the right instead of down. There is a down arrow someplace you could use, you would put that as the subimage in the main section where you have arrow now, then you will have to code each of the vertical menu items that has a showmenu with the following. For example:
Code:
aI("text=Parish Administration;showmenu=ParishAdmin;subimage=arrow.gif;subimagepadding=2;");
or whatever padding you want. Then just make sure you have both the arrowdn.gif and arrow.gif uploaded so it shows.
Or you could find another image, like say a tiny star or something to indicate a submenu and just use that for all of the subimage
Ruth
Poster: drhansenjr
Dated: Tuesday February 3 2004 - 2:55:10 GMT
Any idea how to get the separator bar to reappear after the last item?
Poster: Ruth
Dated: Tuesday February 3 2004 - 3:32:52 GMT
If you want a bar there, just put back that empty item with nothing as to size or anything
Code:
aI("text=;");
That will put a bar after the last little arrow and leave the rest of the menu blank. Or you could do something like text that says in capital letters welcome in that blank space or even an image, say with a cross at the front and welcome and a cross after that. Then you could center the image in that space.
Ruth