CODEWITHSUNDEEP
javascripthtmlcssmenu
Pieter
Pieter

Reputation: 32755

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

I have a menu that contains submenus. Its HTML source looks like this:

<ul id="menu">
  <li>
    <a href="javascript:;">Menu 1</a>
    <ul>
      <li><a href="javascript:;">Item 1<a></li>
      <li>
        <a href="javascript:;">Subitem 1</a>
        <ul>
          <li><a href="javascript:;">Subsubitem 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

After applying some CSS and getting the JavaScript side of things in order with Superfish, the menu looks like this in the browser:

The menu

The second menu item is too big to fit into its space, so the remainder of the text is rendered onto the text of the next menu item. Is there a way to enlarge the <ul> to make sure that the text fits?

Update: here's the relevant CSS code:

ul#menu {
    position: relative;
    top: 160px;
    left: 130px;
    width: 700px;
}
ul#menu, ul#menu ul {
    list-style-type: none;
}
ul#menu > li {
    display: block;
    float: left;
    background: url(img/menuitem.png) top left;
    width: 104px;
    height: 37px;
    margin-right: 5px;
    text-align: center;
}
ul#menu > li:hover {
    background-position: bottom left;
}
ul#menu > li > a {
    height: 100%;
    padding-top: 10px;
    font-size: 80%;
    font-weight: bold;
    color: white;
}
ul#menu > li > a, ul#menu > li > ul a {
    display: block;
    text-decoration: none;
}
ul#menu > li ul {
    min-width: 150px;
}
ul#menu > li > ul li {
    color: black;
    font-size: 10pt;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    height: 30px;
    line-height: 30px;
    background: url(img/menubg.png) repeat;
}
ul#menu > li > ul li:hover {
    background-color: #9c938c;
}
ul#menu > li > ul a {
    color: black;
}
ul#menu > li ul {
    position: relative;
    top: -10px;
}
ul#menu > li li.hoverItem > ul {
    position: relative;
    top: -30px;
}
ul#menu > li > a > span.sf-sub-indicator {
    display: none;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
    float: right;
    margin-right: 5px;
}

span.sf-sub-indicator and li.hoverItem are used by Superfish. sf-sub-indicator is used to indicate that hovering over a menu item will cause a submenu to be opened like so:

<li>
  <a href="javascript:;" class="sf-with-ul">Menu item with submenu<span class="sf-sub-indicator"> »</span></a>
  <ul>
    <!-- Etc -->
  </ul>
</li>

li.hoverItem is applied to all menu items you passed to get to the menu where your mouse is positioned, plus the menu item your mouse is currently hovering on.

Upvotes: 2

Views: 3178

Answers (2)

Jeffrey Blake
Jeffrey Blake

Reputation: 9699

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>

Upvotes: 1

Vincent McNabb
Vincent McNabb

Reputation: 34659

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.

Upvotes: 0

Related Questions