ansaurus

Question

Fitting a <ul>'s width to accommodate the menu items

Answer 1

A:

Ok, I put something together using the same css definitions that you posted above. This works for me - automatically detects the size of the largest element and adjusts the related CSS.

You'll need to adjust the li elements to have a predictable naming scheme, so that it can find the largest one. Depending on your font, you might need to adjust the *5 portion of the assignment for the newSize.

<html>
  <head>
    <title></title>
    <meta content="">
<script type="text/javascript">
function changeSize() {
  var html = document.getElementById("item"+1).innerHTML;
  var newSize = html.length*5;
  var num_menu_items = 3;
  for (i=2; i<=num_menu_items; i++) {
    var temp = document.getElementById("item"+i).innerHTML;
    if (temp.length > newSize / 5)
        newSize = temp.length*5;
  }
  var theRules = new Array();
  var rule;
  if (document.styleSheets[0].cssRules)
    theRules = document.styleSheets[0].cssRules
  else if (document.styleSheets[0].rules)
    theRules = document.styleSheets[0].rules
  for (i = 0; i<theRules.length; i++) {
    if (theRules[i].selectorText.indexOf("ul#menu > li ul") > -1) {
      rule = theRules[i];
    }
  }
  rule.style.setProperty('min-width',newSize+"px",null);
}
</script>
  </head>
  <body onload='changeSize();'>
<ul id="menu">
  <li>A-one</li>
  <li>A-two</li>
  <li>A-three
    <ul>
      <li id='item1'>B-one</li>
      <li id='item2'>B-two-is-really-really-really-really-really-really-really-really-really-really-really-really long</li>
      <li id='item3'>B-three</li>
    </ul>
  </li>

</ul>
</body>
</html>

JGB146 2010-07-18 15:16:57

See updated post.

Pieter 2010-07-18 16:13:08

The reason I insist on having the CSS being adjusted automatically to fit the text is that I'm making a WordPress theme that shouldn't break with large page names.

Pieter 2010-07-18 16:15:19

Ok, I added code to do what you're looking for automatically.

JGB146 2010-07-19 03:18:11

Answer 2

A:

This block here:

ul#menu > li ul {
    min-width: 150px;
}

Is where the size for that item is. You will have to change that to something larger. The reason it doesn't expand, is because its parent's width is small than that.

Vincent McNabb 2010-07-19 03:06:44

ansaurus

tags:

views:

answers:

Fitting a <ul>'s width to accommodate the menu items

related questions