Установка ширины <ul>для размещения пунктов меню - PullRequest
1 голос
/ 18 июля 2010

У меня есть меню, которое содержит подменю.Его исходный HTML-код выглядит следующим образом:

<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>

После применения CSS и наведения порядка в JavaScript с Superfish меню в браузере выглядит следующим образом:

Меню http://img838.imageshack.us/img838/1288/menu.jpg

Второй элемент меню слишком большой, чтобы поместиться в его пространство, поэтому остальная часть текста отображается в тексте следующего элемента меню.Есть ли способ увеличить <ul>, чтобы убедиться, что текст подходит?

Обновление : вот соответствующий код CSS:

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и li.hoverItem используются Superfish.sf-sub-indicator используется, чтобы указать, что при наведении курсора на элемент меню открывается подменю следующим образом:

<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 применяется ко всем пунктам меню, которые вы передали, чтобы попасть в меню, гдеуказатель мыши и пункт меню, над которым в данный момент наведена мышь.

Ответы [ 2 ]

1 голос
/ 18 июля 2010

Хорошо, я собрал что-то, используя те же определения CSS, которые вы опубликовали выше.Это работает для меня - автоматически определяет размер самого большого элемента и корректирует соответствующий CSS.

Вам нужно настроить элементы li, чтобы иметь предсказуемую схему именования, чтобы она могла найти самую большую.В зависимости от вашего шрифта вам может потребоваться настроить часть *5 назначения для 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>
0 голосов
/ 19 июля 2010

Этот блок здесь:

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

Где размер для этого элемента. Вам придется изменить это на что-то большее. Причина, по которой он не расширяется, в том, что ширина его родителя меньше этой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...