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.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

ライセンスについて考えてみた。

この記事は約 1 分で読めます。Webサイトを作っていて、素材だったり、ライブラリだったり・・・いろいろ利用しまくってます。 ・・・で、利用する際にいろいろ利用範囲や使い方について気になったりします。 …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

baserCMSで更新した内容がすぐにブラウザで反映しないとき

この記事は約 1 分で読めます。 baserCMSで既にあるphpや画像などを一部修正して、FTPでアップし直しをした時。 baserCMSでログインしている状態でブラウザ表示できちんと更新されていた …

no image

パンくずリストをGoogleの検索結果ページで表示させる方法

この記事は約 1 分で読めます。 Googleで検索をした時に、検索結果でサイトタイトルの下にパンくずリストが表示されているのを見かけたことはありませんか? 最近妙に気になって・・・(今頃?!)、私も …

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …