| Author | Messages | |
Matt Girgenti
Posts:3
| | 03/15/2007 3:15 PM |
| I am using the latest menu in "hover" mode:
Level="2-9" Type="Hover"
ExcludeTabs="Admin,Host" IncludeTabs="Home,Insurance Overview,Insurance GTM Strategy,Insurance Sales Enablement"/>
As you can see just from the include list, the page names vary greatly. for the moment, I had to set a wisth of 170px to handle that list. Thisc doesn't scale well if a page is any longer, the whole menu look horrible. This also gives "home" a huge "tab".
What I need is for the top level tabs to be only as big as the text they contain, THEN have the sub level size to as well (assumable to the largest text in the list). That handles level 0 and 1 .. when there is a level 2 flyout, it needs to start just to the right of the level 1 dropdown. As you can see below, the second level has a top of 27, allowing the first level tabs to be 26px. The items that flyout from second level had to be started left:170px or they overlap the second level dropdown. confuing yet? I do not want to hard code px width or left/right positions if possible.
How do I do this? Thanks ..
also - can you add down/right arrows in this mode?
/* sets the drop down for second level */
#nav li:hover ul,
#nav li.iehover ul {
top: 27px;
left:0;
}
/* sets the drop down for third + levels */
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li.iehover ul,
#nav li li li.iehover ul {
top: 0;
left:170px;
border:1px solid #ffffff;
} | | | |
| |
| John Mitchell
Posts:3478
| | 03/16/2007 10:14 AM |
| When using CSS to design/style menus sometimes you may have to resort to specify exact dimensions. This is not a bad thing because your CSS is still going to be unique to a particualr instance of the menu. To have a List Item in an Unordered List expand it's size automatically in both height and width is not an easy task, especially across browsers which give you different results when using % type sizing.
One option is to use em units for specifying your sizes instead of px. but this really only handles the size of the text in your menu, not "how much" text you put in a menu item.
My best advice though, is to go ahead and make your CSS adapt to the menu after the navigation tab names have been decided, and/or make the different levels large enough so that it can hold a large amount of text.
| | | |
|
|