ホームページ >ウェブフロントエンド >jsチュートリアル >share_jquery への jQuery/CSS3 メニュー ナビゲーションの 7 つの新しいスタイル
share_jquery への jQuery/CSS3 メニュー ナビゲーションの 7 つの新しいスタイル
- WBOYオリジナル
- 2016-05-16 17:35:371109ブラウズ
優れたメニューは、ユーザーが必要な情報を簡単に見つけられるようにするだけでなく、特別なユーザー エクスペリエンスを提供するウェブサイトにとって非常に重要です。 7 つの新しい jQuery/CSS3 メニュー ナビゲーションを紹介します。気に入っていただければ幸いです。
1. CSS3 立体リボンメニュー
CSS3 の立体的なリボン状のメニューです。このメニュー上でマウスをスライドすると、メニュー項目が上に膨らみ、黒い木の背景と相まって、メニュー全体が非常に立体的で鮮やかに見えます。
2. CSS3 プロファイル ナビゲーション メニュー
このメニューは、ユーザーのショートカット操作ボタンを含む、ログインしているユーザーの情報を表示するために使用されます。また、このメニューには、個人用の検索ボックスも提供されます。
3. jQuery 上部のフローティング グラデーション ツールバー
jQuery トップ フローティング グラデーション ツールバーは、デフォルトではページが下にスクロールすると、トップ メニューが表示されます。メニューがすべて表示されます。ページ距離は JS によって自動的に決定されます。
4. CSS3 カラー多機能ドロップダウン メニュー ナビゲーション
これは強力なメニュー ナビゲーションです。このメニューには、検索、通常のドロップダウン メニュー、アイコン付きのドロップダウン メニューなどの機能が統合されており、非常に実用的な Web メニュー ナビゲーションです。
5. 灰色の超立体 CSS3 ナビゲーション ボタン
このメニュー ナビゲーションには、水平と垂直の 2 つのメニュー モードがあり、メニュー項目上でマウスをスライドすると、非常に立体的な効果が得られます。
6. CSS3 黒のアニメーション メニュー ナビゲーション
このメニューは背景が黒で、背景に泡が装飾されています。メニュー項目は主に白で、マウスをメニュー項目の上にスライドさせるとアニメーション効果が表示され、非常にクールな CSS3 メニューです。
7. 小さなアイコンを使用した jQuery マルチレベル メニュー ナビゲーション
このメニューは多階層メニューであるだけでなく、各メニュー項目にメニューの機能アイコンを設定できるため、非常に実用的です。
上記は、jQuery/CSS3 メニュー ナビゲーションの 7 つの新しいスタイルです。いくつかの特殊効果のサンプルは、スクリプト ハウスによって提供されています。