0

このタイプのドロップダウン メニューhttp://www.vivantabytaj.com (ドロップダウン メニュー内の小さな画像)のようなプラグインの作成方法または利用可能なプラグイン

4

2 に答える 2

1

これは実際には単なる CSS であり、必要に応じて jQuery を使用できますが、ほとんどの要求は CSS で処理できます。jQuery を使用する唯一の目的は、アニメーション効果です。

だから私はこのようなことをします：

HTML:

<div class="nav">
   <ul>
      <li><a href="#">some link</a>
          <ul>
              <li>
                 <img arc="someimage.jpg" />
                 <p>some text you want to display</p>
              </ul>
          </ul>
      </li>
   </ul>
</div>

CSS:

.nav ul ul { display: none; }
.nav img { float: left; }
.nav p { float: right; }

JQuery

$(".nav li").on("click", function(){
   $( this ).children("ul").slideToggle(500);
});

画像の幅または高さ、またはその両方を定義して、画像のサイズも制限したい場合がありますが、これは良い出発点です。また、必ず jQuery ライブラリを含めてください。

于 2013-01-22T08:07:21.807 に答える
0

@Tom Bird ul タグの第 2 レベルのシンタックスに誤りがあります。（コメントにする必要があります）。

このプラグインを使用してこれを自動化することもできます: Hover Flow Plugin

使い方はとても簡単です。プラグインをトリガーするには、メインの ul タグにクラスを追加するだけです。Docを読んでください。

于 2013-01-22T08:52:22.457 に答える