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

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

no image

「baserCMS」をエックスサーバーにインストールしてみた

この記事は約 1 分で読めます。 今回、「baserCMS」に関わる機会がありそうなので、試しにエックスサーバー にインストールしてみました。 日頃WordPressばかりだったので、簡単インストール …

no image

WordPressプラグイン「WP-PageNavi」でページナビゲーションを表示♪

この記事は約 1 分で読めます。 このサイトを作り始めて1年になりました。 WordPress初心者で、毎日「?」の繰り返しでした。 そんな私も、気がつくと・・・投稿記事が100を超え、「新しい記事へ …

no image

Facebookページをタイムラインに移行してみた♪

この記事は約 1 分で読めます。 2012年3月1日、Facebookページで大きな変化がありました! いままで「いいね!」を獲得する為に様々な方法がとられていましたが、「タイムライン化」になった事で …