Solved

How can I calculate and set the width of my child "flare" out menus"?

Posted on 2011-03-14
16
445 Views
Last Modified: 2012-05-11
I've got a main menu for my site that is being build using a menu adapter class that basically builds the menu and it's children menus based on giving the menu a certain class name. The menu items are pulled from a database, the so the items can and will vary in their length. Presently the only way to make sure that all the menu items, (sub, sub-sub etc...) show up on a single line is to "eye ball" the longest item (in fire bug) and then set the with (static) within the CSS that holds the hook for that particular sub menu. This is fine, accept that it makes some of the sub menus much wider than they have to be, simply because the min-width has to be set to longest menu item. I was wondering if there is a way to calculate the with for the menus (and sub menus) based on the length of the items within them? maybe using jQuery or something? Just curious....
0
Comment
Question by:mikesExpertExchange
  • 8
  • 8
16 Comments
 
LVL 4

Expert Comment

by:dwkd
ID: 35133573
what you refer to as 'menu item' pulled from the database is simple writeup text? code?
does width:auto not stretch the container to the length of the content?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35133737
@dwkd: what i mean is, is that, there is an administrative section to the site where you can add items to the naviagation, (the main menu items, sub menu items etc.) for some reason auto does not make the menus the desired with. in most cases it makes the menus too thin...
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35133781
that means the children are floating or positioned in a way that the parent can't register them
 
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35133797
ok, so i probably will have to hard code a static width for each sub-menu that will accommodate the longest menu item for that sub-menu...
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35133822
i'd find a way to get rid of the floating/positioning of the children and make it elegant and not have to hard code.
remember, you can position stuff around with the help of margins,paddings,textaligns etc.. there are a bunch of css hacks and tricks
bottom line is not to hard code coz search engines will penalize the style="asdasd" hardcoded on the main html element
thats my 2cents
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35139063
i appreciate it. i know the following link is a couple years old, but do you think it still holds true? (what the last post says)...

http://stackoverflow.com/questions/999061/css-dynamic-width-on-menu
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35139522
word wrap is a direct offect of defining a width to the container
if you don't have a width parameter in your css or if you have it as auto then there's no word wrap.
what the answer in that stackoverflow post is saying is that in order to fit as many menu items as you want in, let's say, 800px, you must make it a table because the menu items(table cells) are evenly distributed inside the table ..and this is done automatically by the browsing so you don't need to calculate the widths with js and all that.  ..But, do you think this relates to your post? I don't think displaying as table-cell helps you
by the way, do you  have any link to your test page where you're building all this?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35139843
this link helped quite a bit.

http://labs.adobe.com/technologies/spry/samples/menubar/AutoWidthHorizontalMenuBarSample.html

bunzl.dev.lagoon.com (currently best viewed in firefox, working on IE 8 / 7). i used the tips in the link above to get the menu widths to auto size correctly in firefox, now i'm working on the issues that are popping up in IE 8 / 7.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 4

Expert Comment

by:dwkd
ID: 35140039
nice tut
looks fine in ie8
are you have any other issues?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35140423
yes, in IE7 my sub menus are showing horizontal instead of vertical. any ideas?
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35140573
i dont have ie7 ..
can u add <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> so i can see?
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35140603
try it now...
0
 
LVL 4

Accepted Solution

by:
dwkd earned 500 total points
ID: 35141068
what i'm seeing is vertical menus but because the li width is modified for each sub item, the sub submenu for that item displays exactly at the end of that item's width
i'd add a min-width to these first li's .. with min-width as the first ul width .. maybe min-width:100%;  but that means the parent ul must always have a defined width
0
 
LVL 1

Author Comment

by:mikesExpertExchange
ID: 35141474
right...i'm thinking that may be my only option...
0
 
LVL 1

Author Closing Comment

by:mikesExpertExchange
ID: 35141476
thanks
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35142249
you could now add a js function on dom ready that says something like:
function SetMenuWidths(){
   document.getElementById('ctl00_mnuMain').getElementsByTagName('ul')[0].style.width = "150px";
   document.getElementById('ctl00_mnuMain').getElementsByTagName('ul')[1].style.width = "200px";
   document.getElementById('ctl00_mnuMain').getElementsByTagName('ul')[2].style.width = "100px";
   .
   .
   .
   etc...
}

take care

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now