IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プログラミング

【CSS/Javascript】ナビゲーションバーをトップに固定!

投稿日:

【CSS/Javascript】ナビゲーションバーをトップに固定!

ナビゲーションバーをウェブサイトのトップに固定する手順。

ひと昔であればjQueryなど使って対応していたが、今はCSSだけでも十分に対応できる時代になった。

今回はJavascriptの知識もかねてナビゲーションバーをトップに固定してカスタマイズすることにした。

最近はhtml5やCSS3により動的な処理も行えるようになってきたが、やはりJavascriptは一味違う良さを出してくれる。

大きく2つ今回は書いていく。

CSSとhtmlだけでナビゲーションバーをウェブサイトトップに固定。

Javascriptを使ってナビゲーションバーをウェブサイトトップに固定。

それぞれの情報共有というなの備忘録。

CSSとhtmlだけでナビゲーションバーをウェブサイトトップに固定

まずは簡単な方法から。

CSSとhtmlのみでナビゲーションバーを固定する手順になる。

コーディング自体は物凄く簡単だ。

これだけ。

(「head」タグ内の「script」タグの部分を別途「CSS」ファイルで構築)

余りにも簡潔すぎるのでしっかりタグの意味を整理しよう。

CSSでナビゲーションバーをトップに固定表示するには「position:fixed」を使うと便利だ。

ナビゲーションメニューを「inline」に設定することで横並び表示を実現できる。

これだけでは手持ち無沙汰なのでメニューをプルダウン形式にする。

メニューをプルダウン形式にするには小細工が必要。

(「head」タグ内の「script」タグの部分を別途「CSS」ファイルで構築)

一気にクラスが増えるので少し面倒だが、決まり事はシンプルである。

ナビゲーションバーを「nav」クラスで固定、ナビゲーションバーに存在する「メニュー」を「menu」クラスとして別々に考える。

ナビゲーションバーがプルダウンする必要があるのでマウスオーバーで使う「:hover」のクラスを定義する。

基本的な考え方はプルダウンなしメニューと同じで配列「ul」と「li」で構築する。

このやり方の場合、設定がナビゲーションバーのメニュー数に依存する。

(コメント行で「グローバルナビの数で調整」の部分)

Javascriptを使ってナビゲーションバーをウェブサイトトップに固定

ここからはJavascriptでナビゲーションバーを固定させる手法を説明していく。

正直、CSSで実現できているので覚える必要はないかもしれないが、Javascriptが好みの人もいるだろう。

そこでわたしもJavascriptには大変お世話になっているのでここでナビゲーションバーを固定してみる。

と言ってもJavascriptだけで制御はせずにCSSも使う。

まずは主役のJavascriptファイルを作成する。

Javascriptファイルは「.js」になる。

今回はナビゲーションバーを固定するので「fixed.js」というファイルを作成する。

コードの解説。

Javacriptでは関数を使ってナビゲーションバーを制御する。

まずナビゲーション(nav)を定義する。

次にスクロールに関数を持たせる。

画面のスクルールを関数で定義($(window).scroll(function ())とする。

もし画面のスクロールがナビゲーションの初期値(offset)を減らす状態になったら(navfixed)のクラスを発動する手順。

Javascriptで定義した「navfixed」クラスをCSSファイルで定義する。

CSSの定義は以下の通り。

.navfixed{
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
}

クラスを用意して「position:fixed」で固定する。

また「z-index」を指定することで常に最前面表示させる仕組みにする。

全体のコーディングはこちら。

(「head」タグ内の「script」タグの部分を別途「.js」ファイルで構築可能、その場合jQueryのリンクは必要ない)

CSSでもJavascriptでもナビゲーションバーの固定化が可能。

使うか使わないかは好みの問題。

必要な方法でどうぞ。

今日も良い1日を。

      

-プログラミング

執筆者:

関連記事

【jQuery】Javascriptで横スクロールのスライドショー!

【jQuery】Javascriptで横スクロールのスライドショー!

今回はJavascriptを使ったプログラミング作品の一例。 よくある横スクロール型のスライドショーをウェブサイトに組み込んでみる。 横スクロールはJavascriptの定番機能だが基礎的な作り方が学 …

【簡単】Javascriptを使ってサクッとQRコードを発行する!

【簡単】Javascriptを使ってサクッとQRコードを作成!

今回は思いっきりプログラミングのことについて書こう。 と言っても内容は至って簡単なコードだけだ。 実現したのは「Javascript」を使って「QRコード」を発行するというシステムだ。 先日、あるクラ …

ITエンジニアになるならHTMLから始める事をオススメ!

ITエンジニアになるならHTMLから始める事をオススメ!

わたしは現在ITエンジニアとしてフリーランスをやらせてもらっている。 最初からフリーランスエンジニアを目指して活動をしていたわけでないが、自然と始めたことがある。 それがウェブ系のプログラミング言語H …

VBA開発でよくあるエラーまとめ!エラー出現ランキング!

【解決策あり】VBAのエラーまとめ!エラーランキング5!

仕事でVBA案件をもらうことがある。 わたしは元々VBAが最も得意だった。 VBAとはマクロの事だ。 プログラミング言語の中ではシンプルな言語でわかりやすい。 今回、数多くのVBA案件をこなしていく中 …

【Javascript】デジタル時計とアナログ時計の作り方!

【Javascript】デジタル時計とアナログ時計の作り方!

今回はJavascriptで時計を作ってみた。 Javascriptは動的なオープンソースプログラミング言語で汎用性が高い。 ウェブ屋としてはHTMLと親和性も高いことから必然的に習得した技術の賜物で …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール