Ultimate Web Site Drop Down Menu Forum

Ultimate Web Site Drop Down Menu Forum (http://www.udm4.com/forum/index.php)
-   Troubleshooting (http://www.udm4.com/forum/forumdisplay.php?f=12)
-   -   Sub navigation position problems Expandable Menu (http://www.udm4.com/forum/showthread.php?t=1318)

rhett 05-07-2008 02:50 PM

Sub navigation position problems Expandable Menu
 
I'm using the expandable menu, where you click on a menu item and it displays sub navigation below it. Problem is, the sub navigation is positioned to the right of the main menu rather than under the menu item. Also, the sub nav displays in 2 different places each time you click on it - on the first click, the bottom of the sub nav lines up with the bottom of the menu item, and on the second click the top of the sub nav lines up with the top of the menu item. Page is at http://128.192.46.183/warnell/udm-resources/test.html and you can see the jumping navigation best with "Student Events", "Careers & Jobs" and "Student Services". I have tried changing "reposition menus to stay within the viewport" to no avail. Menu code:

//styles which apply to the navbar
um.navbar = [
"0", // nav -> menu x-offset (+-)["n" pixels]
"0", // nav -> menu y-offset (+-)["n" pixels]
"190px", // width ["em"|"ex"|"px"] (vertical navbar only - horizontal navbar items have "auto" width) ("%" doesn't work right)
];


//styles which apply to each navbar item
um.items = [
"0", // margin between items ["n" pixels]
"1", // border size ["n" pixels] (single value only)
"collapse", // border collapse ["collapse"|"separate"] (only applies when margin = "0")
"#CACACA",// border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"#CACACA",// hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"#CACACA",// visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid",// visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"8", // left/right padding ["n" pixels] (single value only)
"8", // top/bottom padding ["n" pixels] (single value only)
"#E3E3E3", // background ["color"|"#hex"|"rgb()"|"image.gif"]
"#CCC", // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
"#E3E3E3", // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
"0.7em", // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
"verdana, tahoma,sans-serif",// font family ["font1,font2,font3"] (always end with a generic family name)
"normal", // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
"none", // text decoration ["none"|"underline"|"overline"|"line-through"]
"left", // text-align ["left"|"right"|"center"]
"#000", // color ["color"|"#hex"|"rgb()"]
"#000", // hover/focus color ["color"|"#hex"|"rgb()"]
"#000", // visited color ["color"|"#hex"|"rgb()"]
"normal", // font-style ["normal"|"italic"|"oblique"]
"normal", // hover/focus font-style ["normal"|"italic"|"oblique"]
"normal", // visited font-style ["normal"|"italic"|"oblique"]
"letter-spacing:.1em !important;",// additional link CSS (careful!)
"", // additional hover/focus CSS (careful!)
"", // additional visited CSS (careful!)
"arrow_down.gif",// menu indicator character/image ["text"|"image.gif"|"none"]
"arrow_down.gif",// menu indicator rollover character/image ["text"|"image.gif"|"none"] (must be same type)
"16", // clipping width of indicator image ["n" pixels] (only when using image arrows)
"submenu", // alt text of indicator image ["text"] (only when using image arrows)
];




///////////////////////////////////////////////////////////////////
// MENU DEFAULT STYLES //
///////////////////////////////////////////////////////////////////


//styles which apply to each menu
um.menus = [
"0", // menu -> menu x-offset (+-)["n" pixels]
"15px", // menu -> menu y-offset (+-)["n" pixels]
"0", // border size ["n" pixels] (single value only)
"#CACACA",// border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"", // width ["em"|"ex"|"px"]
"", // padding ["n" pixels] (single value only)
"#E3E3E3", // background ["color"|"#hex"|"rgb()"|"image.gif"]
"", // additional menu CSS (careful!) (you can use a transition here but *not* a static filter)
"none",// shadow background ["color"|"#hex"|"rgb()"|"image.gif"|"none"]
"0pxs", // shadow offset (+-) ["em"|"px"|"pt"|"%"|"0"]
"filter:alpha(opacity=50);",// additional shadow layer CSS (if you use a Microsoft.Shadow filter here then Win/IE5.5+ will do that *instead* of default shadow)
];


//styles which apply to each menu item
um.menuItems = [
"0", // margin around items ["n" pixels] (single value only; margins are like table cellspacing)
"0", // border size ["n" pixels] (single value only)
"separate", // border collapse ["collapse"|"separate"] (only applies when margin = "0")
"", // border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"", // hover/focus border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // hover/focus border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"", // visited border colors ["color"|"#hex"|"rgb()"] (single, double or four values)
"solid", // visited border styles ["solid"|"double"|"dotted"|"dashed"|"groove"|"ridge "|"inset"|"outset"] (single, double or four values; be careful with using "none")
"8", // left/right padding ["n" pixels] (single value only)
"4", // top/bottom padding ["n" pixels] (single value only)
"#EDEDED", // background ["color"|"#hex"|"rgb()"|"image.gif"]
"#EDEDED", // hover/focus background ["color"|"#hex"|"rgb()"|"image.gif"]
"#EDEDED", // visited background ["color"|"#hex"|"rgb()"|"image.gif"]
".9em", // font size ["em"|"ex"|"%"|"px"|"pt"|"absolute-size"|"relative-size"]
"Verdana, tahoma,sans-serif",// font family ["font1,font2,font3"] (always end with a generic family name)
"normal", // font weight ["normal"|"bold"|"bolder"|"lighter|"100" to "900"]
"none", // text decoration ["none"|"underline"|"overline"|"line-through"]
"left", // text-align ["left"|"right"|"center"]
"#000", // color ["color"|"#hex"|"rgb()"]
"#000", // hover/focus color ["color"|"#hex"|"rgb()"]
"#000", // visited color ["color"|"#hex"|"rgb()"]
"normal", // font-style ["normal"|"italic"|"oblique"]
"normal", // hover/focus font-style ["normal"|"italic"|"oblique"]
"normal", // visited font-style ["normal"|"italic"|"oblique"]
"", // additional link CSS (careful!)
"", // additional hover/focus CSS (careful!)
"", // additional visited CSS (careful!)
"arrow_down.gif",// submenu indicator character/image ["text"|"image.gif"|"none"]
"arrow_down.gif",// submenu indicator rollover character/image ["text"|"image.gif"|"none"] (must be the same type)
"16", // clipping width of indicator image ["n" pixels] (only when using image arrows)
"..", // alt text of indicator image ["text"] (only when using image arrows)
];

Thanks for any help!
Rhett

rhett 05-07-2008 08:56 PM

I created the css and looked at it in Firebug. When you click on a menu item, the following code on the sub nav/menuItems is produced:
<ul style="overflow: visible; position: static; display: block; height: auto; margin-left: 190px; margin-top: -150px; left: auto; top: auto; visibility: visible;">

If I remove margin-left: 190px; the sub nav falls into place, also removing the erroneous margin-top: -150px. But I can not see where I have put a margin-left on the sub nav in the udm-custom.js file. It seems to be inheriting from the um.navbar. If so, how can I stop it?

I want to use this menu for contract work, but if I can't get this bug worked out then I'll have to ditch it for something I can get working.

colech 01-07-2009 05:34 AM

Quote:

Originally Posted by rhett (Post 2190)
I created the css and looked at it in Firebug. When you click on a menu item, the following code on the sub nav/menuItems is produced:
<ul style="overflow: visible; position: static; display: block; height: auto; margin-left: 190px; margin-top: -150px; left: auto; top: auto; visibility: visible;">

If I remove margin-left: 190px; the sub nav falls into place, also removing the erroneous margin-top: -150px. But I can not see where I have put a margin-left on the sub nav in the udm-custom.js file. It seems to be inheriting from the um.navbar. If so, how can I stop it?

I want to use this menu for contract work, but if I can't get this bug worked out then I'll have to ditch it for something I can get working.

Did you ever find the solution to this issue?

colech 01-07-2009 05:38 AM

I did find one typo in your above code when browsing through it quickly.

Code:

"0pxs",        // shadow offset (+-) ["em"|"px"|"pt"|"%"|"0"]
...should be...
Code:

"0",        // shadow offset (+-) ["em"|"px"|"pt"|"%"|"0"]


All times are GMT. The time now is 10:36 AM.

Powered by vBulletin® Version 3.0.1
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.