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

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

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

関連記事

『WordPress閲覧しているページが使用しているテンプレートがひと目でわかる!』便利プラグイン「Show Current Template」

この記事は約 1 分で読めます。 WordPressのテンプレートを制作・カスタマイズをしていて、「表示しているページがどのテンプレートを読んでるんだろう」と思ったことはないですか? 「Show Cu …

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressテスト環境をMAMPで作ってみた♪ for Mac

この記事は約 1 分で読めます。 WordPressのテーマ作りなどをする時、いきなり本番サイトでは試せないので、テスト環境をMacのパソコンに作りました。 「WordPressテスト環境をXAMPP …

no image

MAMPでMySQLが起動しない時

この記事は約 1 分で読めます。 MAMPを起動した時、Apacheはちゃんと起動されているのにMySQLが起動しないことがあります。 いろいろな原因はありそうですが、とりあえず調べた内容でなんとか無 …