By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,487 Members | 1,085 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,487 IT Pros & Developers. It's quick & easy.

Scaling horizontal menu items

P: 20
I would like to provide a scalable horizontal menu. Here's the twist: I want to keep the menu items on a single line for as many 'upscales' as possible. So I basically need 2 solutions:

1) For large-scale viewing, each <li><a> menu item should ideally be "shrinkwrapped". A marginally acceptable alternative would be an em-based standard width that applies to all menu items.

2) For normal viewing, all <li><a> menu items should be a standard width that totals the full width of the page. For example, if there are 5 menu items, they should each take up 20% of the available space. This should also apply to each increase in font size up to the point where the words would not fit on a single line (even if shrink-wrapped).

Is the question clear? If so, is this possible?

Having done some searches on this forum, via google & W3C, I'm afraid I still couldn't find the answer.

Here's the stripped-down html:

Expand|Select|Wrap|Line Numbers
  1. <div id="primarynav">
  2.     <ul>
  3.         <li><a href="index.html">Home</a></li>
  4.         <li><a href="firstpage.html">First Page</a></li>
  5.         <li><a href="secondpage.html">Second Page</a></li>
  6.         <li><a href="thirdpage.html">Third Page</a></li>
  7.     </ul>
  8. </div>
And some CSS:
Expand|Select|Wrap|Line Numbers
  1. #primarynav ul li { display: inline; }
  2. #primarynav ul li a { font-size: 1em; width: 5em; float: left; }
  3. /* afraid I can't remember why exactly the float is needed as well as the inline, but I took the float out & it doesn't work...I'm sure it made sense at the time... */
Feb 5 '07 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.