3

jqueryスーパーフィッシュを使用している水平ナビゲーションメニューがあります。私のドロップダウンメニューの1つでは、ドロップダウンはもうありません（つまり、孫ノードはありません）が、いくつかの子があります（正確には、現在45であり、時間内に上下する可能性があります）。ドロップダウンを特定のカウントを超えて列に並べる方法を見つけようとしています。45があるので、15はうまく機能します。したがって、すべてのインクルードを表示せずに、ここに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を使用してみましたが、解決策はありませんでした。

4

1 に答える 1

3

リストに45個のアイテムがある場合は、スーパーフィッシュの代わりにメガドロップダウンスクリプトを使用することをお勧めします。

更新：うまく機能しなくなる複数列のドロップダウンメニューが必要な場合は、CSSメニューを選択してみませんか？マルチカラムメニュー、プロドロップダウンリスト1、プロドロップダウンリスト2、CSS3マルチスライド、さらには垂直フライアウトリストをチェックしてください。

更新＃3：わかりました、私のOCDは私にこれを理解するように強いたので、私は今日しばらくの間これに取り組みました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;
}
于 2010-05-28T21:54:31.607 に答える