1

以下のように、 CSSとjQueryを使用して、Facebook のような新しいトップ ナビゲーションを作成したいと考えています。

ここに画像の説明を入力してください

この：

ここに画像の説明を入力してください

ご覧のとおり、ポップボックスの矢印は常に選択したナビゲーションの下にあり、ポップボックスの幅は同じです。これを行うためのチュートリアルまたはプラグインはありますか?

4

3 に答える 3

7

jQuery 通知メニューはあなたにぴったりです。任意のメニューに通知バブルと通知リストを追加する jQuery プラグインです。

デモ画像

CSS を編集するだけで、目的のスタイルに簡単に微調整できます。

このデモを確認してください。

于 2012-09-26T06:35:47.427 に答える
0

Twitter Bootstrapをチェックしてください。彼らはあなたのためにすべてのクールな JavaScript を完成させました。彼らはまた、非常に優れたレスポンシブ ベース CSS を最初に入手しました。

于 2012-09-26T06:26:45.870 に答える
0

これの鍵は単純です。順序付けられていないリストと固定位置の要素を適切に組み合わせることで、これを非常に簡単に実現できます。

  1. トップ バーには、順序付けられていないリスト パターンを使用します: http://pea.rs/navigation/horizo​​ntal-buttons
  2. ドロップダウンには、次の 2 つの選択肢があります。
    • ドロップダウンを配置して非表示にし、jQueryで再表示できます。
    • または、CSS トリックを使用して、onHover までページの外に配置します。

Facebook と同じようにドロップダウンのスタイルを設定するには、適切な形状を取得する方法を理解するために CSS でもう少し作業を行う必要がありますが、心配する必要はありません。その上にもチュートリアル/例があります!

「バブル ポイント ツールチップ」のチュートリアル:

全体として、キックバットCSS3メガドロップダウンメニューを構築する方法のチュートリアルをお勧めします（完了するのに30分から1時間以上かかりません）：

于 2012-09-26T06:33:32.980 に答える