簡単設置で見やすい！レスポンシブ対応メニューslicknavの使用方法

ホーム
jQuery, Tutorial, Web Design
簡単設置で見やすい！レスポンシブ対応メニューslicknavの使用方法

2015.04.4

簡単設置で見やすい！レスポンシブ対応メニューslicknavの使用方法

みなさんこんにちは、mayukouです。
さて、４月21日から、googleでモバイル検索した時に、
スマホ対応をランキング要因として使用することを発表しました。
そこで、急いで仕事で公開しているサイトのレスポンシブ化を実施しました。

その時、一番考えるのがナビゲーションメニューの部分です。
狭いスペースにメニュー項目を入れるのにやっぱり最適なのは、
三本線のハンバーガーボタンをつけてメニュー開閉させるものでしょうか。
ということで、レスポンシブに対応したナビゲーションメニューのjQueryプラグインが便利だったので、使い方をご紹介します。

スポンサードリンク

レスポンシブのメニューに最適なSlickNavの使い方

1.まずは、公式サイトからSlickNavのJqueryプラグインをダウンロードしましょう。

125-slicknav

公式サイトデモ以下のファイルが入っていることが確認できます。
124-rwd

そのなかのjquery.slicknav.min.jsとslicknav.cssを使用します。

2.head内に以下のファイルを明記し、読み込みます。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>
<script src="js/jquery.slicknav.min.js"></script>
<link href="css/slicknav.css" rel="stylesheet" type="text/css" media="all" />

3.HTMLを書きます。リスト表示でドロップダウンにしたい場合は、入れ子にしましょう。

<ul id="menu">
    <li>HOME</li>
    <li>About</li>
    <li>Archives</li>
    <li>Contact</li>
</ul>

<li>About</li>

<li>Archives</li>

<li>Contact</li>

</ul>

4.Javascriptも記載しましょう

<script>
$(function(){

     $('#menu').slicknav();

});
</script>

$(function(){

$('#menu').slicknav();

});

</script>

5.CSSは、以下を記載します

.slicknav_menu {

display:none;

}

/*Media Queries*/

@media screen and (max-width: 768px) {

.js #menu {

display:none;

}

.js .slicknav_menu {

display:block;

}

}

.slicknav_menu {

display:none;

}

/*Media Queries*/

@media screen and (max-width: 768px) {

.js #menu {

display:none;

}

.js .slicknav_menu {

display:block;

}

上記を記載したら、レスポンシブメニューの実装は完了です！

デモ

オプション設定

オプション設定では、MENUという文字を消したり、メニューの出てくる場所を変えたり、
アニメーションを変えたりすることができます。記述法は以下の通りです。

<script>
$(function(){
    $('#menu-headnav').slicknav({
    label: '', //デフォルトは'MENU'
    duration: 750, //アニメーションのスピード
    easingOpen: "easeOutBounce", //jQuery UI easing
    easingClose:"swing", //jQuery UI easing
    prependTo: "#mobile-menu", //指定した要素内にメニュー表示 デフォルトはbody
});
});
</script>

$(function(){

$('#menu-headnav').slicknav({

label: '', //デフォルトは'MENU'

duration: 750, //アニメーションのスピード

easingOpen: "easeOutBounce", //jQuery UI easing

easingClose:"swing", //jQuery UI easing

prependTo: "#mobile-menu", //指定した要素内にメニュー表示デフォルトはbody

});

</script>

最後に

いかがでしたか？レスポンシブのメニューのSlickNavのご紹介でした。
google対策に、ぜひご活用ください！

さらに、こんな記事も書きました

こちらの記事も参考にされてください>>軽量スクリプトのレスポンシブメニュー

投稿者プロフィール

mayukou: Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約５年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら

プロフィール

mayukou

こんにちは！mayukouと申します。福岡市在住。IT系の会社でハーブティーのECサイトの運営などを担当しているwebデザイナーです。デザイナー6年目。海外で活動できる一流デザイナーを目指しています。洋楽好き（特にR&B）で、デザイン好き。Mac&iPhoneユーザー。AB型です。自分の学んだこと、役に立つことを発信していきたいと思います。よろしくおねがいします。