выпадающие списки суперфиш, которые должны быть в столбце, когда много детей и нет узлов "внуков" - PullRequest
Новая
       14

выпадающие списки суперфиш, которые должны быть в столбце, когда много детей и нет узлов "внуков"

3 голосов
/ 28 мая 2010

У меня есть горизонтальное навигационное меню, в котором используется jquery superfish. В одном из моих выпадающих меню в нем больше не будет выпадающих меню (то есть нет узлов внуков), но есть несколько дочерних элементов (45, если быть точным прямо сейчас, и может возрасти или уменьшиться во времени). Я пытаюсь найти способ, чтобы выпадающая колонка была выше определенного счета. 15 хорошо работает для меня, так как есть 45. Поэтому, не показывая все включения, вот список HTML - и ради меньшего количества кода я буду использовать 15: 

<ul class="sf-menu sf-js-enabled sf-shadow" id="menu-1">
  <li class="current"> <a href="#a" class="sf-with-ul">menu item<span class="sf-sub-indicator"> »</span></a>
    <ul style="display: none; visibility: hidden;">
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
      <li> <a href="#aa">menu item</a> </li>
      <li> <a href="#ab">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ac">menu item</a> </li>
      <li> <a href="#ad">menu item</a> </li>
    </ul>
  </li>
  <li> <a href="#">menu item</a> </li>
  <li> <a href="#">menu item</a> </li>
  <li> <a href="#">menu item</a> </li>
</ul>

поэтому, если бы я хотел, чтобы столбцы начинались с 5, у меня было бы ровно 3 столбца. Я не могу понять, как я могу сделать это и не сломать все. Я попытался использовать некоторые CSS и не нашел решений.

1 Ответ

3 голосов
/ 29 мая 2010

Я бы посоветовал вам использовать скрипт мега выпадающий вместо суперфиши, если у вас есть 45 пунктов в списке.

Обновление: если вы хотите, чтобы выпадающее меню из нескольких столбцов хорошо ухудшалось, то почему бы просто не перейти к меню CSS? Проверьте многостолбцовое меню , выпадающий список pro 1 , выпадающий список 2 , CSS3, мульти-слайд или даже по вертикали всплывающий список .

Обновление № 3: Хорошо, так как мой ОКР вынудил меня это выяснить, я некоторое время работал над этим сегодня, LOL. Это не так красиво, но это работает. Вот демоверсия .

Вам нужно будет немного переформатировать HTML: 

<ul class="sf-menu">
 <li>
  <a href="#a">menu item</a>
  <div class="listwrap">
   <div class="listblock">
    <ul>
     <li><a href="#">menu item</a></li>
     ...
     <li><a href="#">menu item</a></li>
    </ul>
   </div>
   <div class="listblock">
    <ul>
     <li><a href="#">menu item</a></li>
     ...
     <li><a href="#">menu item</a></li>
    </ul>
   </div>
  </div>
 </li>
</ul>

Добавлен этот CSS к стандарту 

.sf-menu .listwrap {
 position: absolute;
 top: -999em;
 max-height: 500px;  /* adjust height as desired */
 width: 45em;        /* adjust width as more columns are added (~10em per column + shadow width */
}
.sf-menu .listblock ul {
 position: relative;
 display: block;
 float: left;
 width: 10em;
}
.sf-menu li:hover ul,
.sf-menu li:hover .listwrap,    /* added two definitions to existing one */
.sf-menu li.sfHover .listwrap,
.sf-menu li.sfHover ul {
 left: 0;
 top: 2.5em; /* match top ul list item height */
 z-index: 99;
}
.sf-menu li:hover .listblock ul,
.sf-menu li.sfHover .listblock ul {
 top: 0;
 left: 0;
}
...