みなさんこんにちは、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デザインのお仕事を始めてなんとか約５年が経ちました。続けられているのが不思議です。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞（洋楽）、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2017.06.18写真現像すると写真が生き生きする！Macの写真アプリが素敵
- 2017.06.17書評売り上げアップを実感♪目から鱗の本「どうすれば売れるのか」を読んで
- 2017.05.27iPad Pro購入して半年♪iPad Proで描いたイラストをご紹介。（主にProcreateアプリ使用）
- 2017.05.20カメラブロガーの味方？高級コンデジ、Panasonic LX9を買いました。
この記事へのコメントはありません。