HOME > ｊQuery・Javascript > スマートフォン用のナビゲーションを簡単に生成する

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

2015年02月01日

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

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

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

ダウンロード

CSSとjavascriptの読み込み

1

2

3

<link href="css/navigation.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.ChangeSmartphoneNavigation.js"></script>

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

メニューの設定

1

2

3

4

5

6

var array = [
{ 'url': 'https://www.google.com' , 'title': 'Google'}
,{ 'url': 'http://www.yahoo.co.jp' , 'title': 'Yahoo'}
,{ 'url': 'http://www.amazon.co.jp' , 'title': 'Amazon'}
,{ 'url': 'http://www.bing.com' , 'title': 'Bing'}
];

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

デフォルト設定

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

1

2

3

4

5

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
});
});

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

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

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

1

2

3

4

5

6

7

8

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
tapIcon : 'css/icon_white.png', //アイコン画像 [icon_dark.png][icon_white.png]
bg_TapIcon : '#ffcc00', //アイコンの背景色
bg_Nav : '#CC1234', //ナビゲーションの背景色
});
});

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

アイコン画像を変更する

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
iconType : 2, //アイコンタイプ 1~4まで
});
});

１～４までのアイコン番号を指定して変更します。

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

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

1

2

3

4

5

6

7

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
NavWidth : '300px', //ナビゲーションの幅 **%か**px
NavTop : '50px', //ナビゲーションの上からの距離
});
});

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

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

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
openType : 'fadeToggle'
});
});

左からスライドさせる

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
openType : 'leftSlide'
});
});

右からスライドさせる

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
openType : 'rightSlide'
});
});

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

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
openType : 'leftSlideOpacity'
});
});

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

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

1

2

3

4

5

6

$(function(){
$('body').ChangeNavigation({
defaultClose : '#default_nav', //既存のナビゲーションを消す場合
openType : 'rightSlideOpacity'
});
});

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

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