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

画面のスクリーンショット(キャプチャー)をとる3つの方法+1

この記事は約 2 分で読めます。 Webサイトのスクリーンショット(キャプチャー)をとる時、画面に表示されている部分のみの場合や、Webサイト1ページ分全体などあります。 特にWebサイト1ページ全体 …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

WordPressが勝手に挿入する「pタグ」を自動挿入させない方法

この記事は約 1 分で読めます。 WordPressには「auto paragraph」という、自動でpタグを挿入してくれる機能があります。 そのため、意図しない見た目になってしまうことが、時々起きて …

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

WordPressでオリジナルテーマ作りにチャレンジ8【トップページ編】

この記事は約 1 分で読めます。 今回、WordPressのオリジナルテーマ作りにチャレンジしました。 ブログサイトならトップページを特別に作る必要はないのかもしれませんが、通常のサイト「index. …