レベルF株式会社

スクロールしても着いてくる固定メニュー
レベルF株式会社のブログとなります。
業務についてから社員のつぶやきまで日々更新してまいります。
HOME >レベルFのブログ > cssテクニック・jQuery > スクロールしても着いてくる固定メニュー

スクロールしても着いてくる固定メニュー

インターネット上においてユーザビリティが警鐘されている現在、ホームページ(以下Webサイト)ではグローバルナビゲーション(以下ナビ)と呼ばれるWebサイト全ページ共通の案内リンクは必ずと言えるほど実装されているのではないでしょうか?今回はこのナビについて制作者目線にてご紹介していきたいと思います。

固定ナビの仕組みとは?

弊社サイトにおいても最上部で実装されている為、固定ナビのご紹介は割愛させていただきます。
固定ヘッダーとか固定メニューとかもいいますね。
メニューのこと自体はグローバルナビ(グロナビ)、ブローバルメニュー、ビッグメニューなど担当者によって呼び方はさまざま。

ホームページ制作を仕事にしているといつかはクライアントから要望があるものです。
今回はそんなお話です。

基本的には皆様大好きCSSのpositionという属性を使います。
Positionの値は
・static:初期値であり位置指定無効要素
・relative:相対位置要素となり基準位置より上(top)下(bottom)左(left)右(right)に指定した配置が可能
・absolute:絶対位置要素となり親要素(relative.fixed)の左上が基準位置となる。relative同様に上下左右への指定が可能
・fixed:絶対位置要素であり固定要素。absolute同様であるが、スクロール干渉が発生しない
以上の4つとなります。今回は【絶対位置・固定】のfixedを使用します。
これにtop及びleftの値を0とする事でスクロールしてもウィンドウ上部にピタッと固定されたナビを実装する事が可能となります。

具体的な実装方法


それではまずHTML

次にCSS

最後にちょこっとjQuery

仕様としては
・nav通過以降、class=”scroll_nav”追加
・nav通過以前、class=”scroll_nav”削除
と単純なものになります。

こちらに実装サンプルのZIPファイルを用意しておきます。

ちなみに、ナビを最上部に配置する場合は

の様な記述で問題無いかと思います。もちろんjQueryも必要ありません。

まとめ

いかがでしたでしょうか?
今回はUI(ユーザインターフェイス)の要(カナメ)となるナビ設置の具体的な方法をご紹介させていただきました。
HTMLへ対しDOM(Document Object Model)操作が可能なライブラリーであるjQuery。
将来はどんなコードでも”カリカリ”記述出来る様、日々精進して行きたいと考えております。


Pick Up

Blog Category

Newest Blog

Blog Ranking

  1. チェックボックスをcssをいじっておしゃれにする方法チェックボックスをcssをいじっておしゃれにする方...
  2. JQueryを使わずにCSSのみで画像ポップアップを実装してみました。JQueryを使わずにCSSのみで画像ポップアップ...
  3. 要素が画面に表示されたら発火、jquery.inviewの使い方要素が画面に表示されたら発火、jquery.inv...
  4. スペースをうまく使ったシンプルで美しい名刺デザインの制作スペースをうまく使ったシンプルで美しい名刺デザイン...
  5. スクロールしても着いてくる固定メニュースクロールしても着いてくる固定メニュー...

お客様の期待値以上の成果物をお届けいたします。

レベルF株式会社は、ホームページ制作・運営コンサルティング会社を中心業務とし
都内、新宿・渋谷・池袋を中心に多くの企業様のお手伝いをしております。
ホームページのみにこだわらず名刺やパンフレットなどそれぞれ理想のお付き合いをさせていただくべく、
幅広いご提案をさせていただき、貢献させていただいております。
どんな些細な事でもお気軽にお問い合わせくださいませ。