Unread 05-07-2008, 02:50 PM
rhett rhett is offline
Junior Member
Join Date: May 2008
Posts: 2
  #1  
Default 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
Reply With Quote
Unread 05-07-2008, 08:56 PM
rhett rhett is offline
Junior Member
Join Date: May 2008
Posts: 2
  #2  
Default

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.
Reply With Quote
Unread 01-07-2009, 05:34 AM
colech colech is offline
Junior Member
Join Date: Nov 2008
Posts: 20
  #3  
Default

Quote:
Originally Posted by rhett View Post
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?
__________________
Rapidfyre Inc
Web Development Specialists
Reply With Quote
Unread 01-07-2009, 05:38 AM
colech colech is offline
Junior Member
Join Date: Nov 2008
Posts: 20
  #4  
Default

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"]
__________________
Rapidfyre Inc
Web Development Specialists
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT. The time now is 06:04 AM.


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