みなさんこんにちは、mayukouです。
さて、４月21日から、googleでモバイル検索した時に、
スマホ対応をランキング要因として使用することを発表しました。
そこで、急いで仕事で公開しているサイトのレスポンシブ化を実施しました。
その時、一番考えるのがナビゲーションメニューの部分です。
狭いスペースにメニュー項目を入れるのにやっぱり最適なのは、
三本線のハンバーガーボタンをつけてメニュー開閉させるものでしょうか。
ということで、レスポンシブに対応したナビゲーションメニューのjQueryプラグインが便利だったので、使い方をご紹介します。
スポンサードリンク
レスポンシブのメニューに最適なSlickNavの使い方
1.まずは、公式サイトからSlickNavのJqueryプラグインをダウンロードしましょう。
以下のファイルが入っていることが確認できます。
そのなかのjquery.slicknav.min.jsとslicknav.cssを使用します。
2.head内に以下のファイルを明記し、読み込みます。
|
1 2 3 4 |
<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を書きます。リスト表示でドロップダウンにしたい場合は、入れ子にしましょう。
|
1 2 3 4 5 6 |
<ul id="menu"> <li>HOME</li> <li>About</li> <li>Archives</li> <li>Contact</li> </ul> |
4.Javascriptも記載しましょう
|
1 2 3 4 5 6 7 |
<script> $(function(){ $('#menu').slicknav(); }); </script> |
5.CSSは、以下を記載します
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.slicknav_menu { display:none; } /*Media Queries*/ @media screen and (max-width: 768px) { .js #menu { display:none; } .js .slicknav_menu { display:block; } } |
上記を記載したら、レスポンシブメニューの実装は完了です！
オプション設定
オプション設定では、MENUという文字を消したり、メニューの出てくる場所を変えたり、
アニメーションを変えたりすることができます。記述法は以下の通りです。
|
1 2 3 4 5 6 7 8 9 10 11 |
<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対策に、ぜひご活用ください！
さらに、こんな記事も書きました
こちらの記事も参考にされてください>>軽量スクリプトのレスポンシブメニュー
投稿者プロフィール
-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約６年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
この記事へのコメントはありません。