0

jQueryで上部固定ナビゲーション(プルダウン付)を実装するには!

jQueryで上部固定ナビゲーション(プルダウン付)を実装するには!

これまでにも何度か紹介してきた「固定ナビ」ですが、今回は「スクロール+プルダウン」の表現を可能にする方法をメモしておきます。

まずは、デモサンプルを確認してみてください。

 

 

DEMO

 

HTMLを記述

 入れ子になっているナビゲーションを用意しました。

before

通常は横800pxの幅で配置していますがスクロールすると、、、

fixedtopnavi-img

画面上部に固定されるようになります。

 

CSSを記述

横幅やカラーなどは適宜、調整してください。

 

jQueryの読み込みとJavaScriptを記述

クラス名などを変更した場合は、「.nav」の部分などを変更してください。

 

これで完了です。


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > jQueryで上部固定ナビゲーション(プルダウン付)を実装するには!