jQuery・Javascript jQueryを使った小技やAjax非同期通信などについて

スマートフォン用のナビゲーションを簡単に生成する

2015年2月1日
この記事は掲載から992日経過しています。
情報が古い可能性が有りますのでご了承下さい

スマートフォン表示のナビゲーションを簡単に設置

ホームページ制作=レスポンシブウェブデザインが当たり前となっていますが、PCサイトでは大きくスペースを取れたナビゲーションも、スマートフォンではそうはいきませんよね。そこでタップすると開くナビゲーションを導入するのですが、これが結構面倒です。

そこで、何種類かのナビゲーションを簡単に組み込めるものを作ってみました。

ダウンロード

CSSとjavascriptの読み込み

jQueryは設置しているものでも構いません。

メニューの設定

HTMLからホームページ内のメニューを取り出しても良いのですが、それはそれで面倒なので、スマートフォン版ナビゲーションに表示したいリンク先をjavascript配列でヘッダーにでも書いておきます。

デフォルト設定

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

PC版のナビゲーションを囲う要素を指定すると、自動的に非表示になります。よく見かける上からスライドするタイプです。

アイコン画像と背景色、ナビゲーションの背景色を変更

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

アイコン画像と背景色等を変更しています。

アイコン画像を変更する

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

1~4までのアイコン番号を指定して変更します。

ナビゲーションの幅とトップからの距離を変更する

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

ヘッダー画像などを邪魔したくないケースなど。

フェードイン・フェードアウトで開く

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

 

左からスライドさせる

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

 

右からスライドさせる

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

 

左からスライド+フェードイン・フェードアウト

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

 

右からスライド+フェードイン・フェードアウト

サンプル サンプルはブラウザの幅を縮めるか、スマートフォン端末でご覧下さい。

スライド系はアイコンを消し、上部に閉じるリンクが追加されます。Toggleは閉じ方が解らない方も居るので、別に閉じるボタンがあった方が良いかもしれませんね。

とりあえずこのくらいあれば殆どのホームページ制作に対応出来るんじゃないでしょうか。もっと凝ったものをご希望された場合は書いた方が早いです。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

このカテゴリーのその他の記事

PAGE TOP