Webの記録

レスポンシブ対応ナビゲーションを簡単に付けられる「SlickNav」

投稿日:

この記事は約 5 分で読めます。

SlickNav_img
レスポンシブサイトで、PCとスマホではメニューの見せ方を変えたいもの。
画面の幅が狭くなった時はハンバーガーボタンと言われる三本線のボタンを表示をすることができる、jQueryの「SlickNav」が便利だったのでメモします。
※似たプラグインはありますが、IE8での表示がおかしくなったりすることがあるので、IE8対応の場合は「SlickNav」が良いかな・・・と思ってます。


「SlickNav」の特徴

  • jQueryの1.7以上で動作
  • IE8以上で使用できる(サイトではIE7+となっているけれど、IE7で試していないため)
  • licensed under MIT


「SlickNav」の設置方法

1.「SlickNav」をダウンロード
SlickNav」サイトから、ファイル一式をダウンロードします。


2.設置準備
ダウンロードしたフォルダを開くと、「dist」フォルダの中にcssとjsが2種類ずつあります。
この中からcssとjsを1つずつ使用します。これを自分のフォルダの中に配置します。

※「min」が付いているファイルは圧縮ファイルなので、容量が気になる場合はこちらを使用
「SlickNav」のダウンロードデータ


3.HTMLで「SlickNav」の読み込み
headの中、もしくはbodyの閉じタグの直前に以下のように記述します。パスは、自分のサイトに合わて変更してください。

<link rel="stylesheet" href="../css/slicknav.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../dist/jquery.slicknav.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#menu').slicknav();
});
</script>


4.HTMLにナビゲーションのマークアップをします。
ulにあるid=”menu”は、js・cssと統一します。

※入れ子でないシンプルな階層でもOKです。

<ul id="menu">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>


5.css追加・カスタマイズ
pc表示ではメニューボタン非表示にしたいので、PC用のスタイルの中に以下を記述します。

 #menu {
        display:none;
    }



スマホ用のスタイルで以下を記述します(Media Queriesの中などで記述)

	#menu {
		display:none;
	}
	
	.slicknav_menu {
		display:block;
	}



あとは、見た目に関するスタイルを記述したら完成です!
結構短時間で設置完了したので、これでレスポンシブ対応のナビゲーションも怖くないかも?!


細かなカスタマイズは「SlickNav」のサイトにありますので、こちらも参照ください。

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

easySlider1.7.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。「easySlider1.7.js」を使って、数枚の画像のスライドショーを作りたいと思います。 自動で画像がスライドしますが、見ている人の意思で前後の画像へ戻したり進め …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

無料Facebookアプリ「Pronto ContactForm」を試してみた♪

この記事は約 2 分で読めます。 最近、Facebook関連の便利なアプリをたくさん見掛けます。 Facebookページでお問い合せフォームが必要になった時に便利なアプリ「Pronto Contact …

no image

ブラウザ別キャッシュクリア(一時ファイルの消去)の方法♪

この記事は約 1 分で読めます。 以前、Webサイトの更新作業をした後に、お客様から「前と表示が変わってない」と言われたことがあります。 キャッシュという、一度表示したページを早く表示するために一時フ …

no image

軽量で簡単に設置出来るjQueryスライダー「FlexSlider」。

この記事は約 1 分で読めます。 今までいくつかのjQueryスライダーライブラリを利用しました。今回も軽量で簡単に設置が出来る「FlexSlider」を見つけたので、早速メモです。 スマートフォンで …