最新コラム
-
-
-
Webデザイン
インパクトを与えたいならパララックスデザインを使え!
-
SEO対策コンテンツSEO
カスタマージャーニーマップとは?作成する目的や作り方を紹介します
-
SEO基礎SEO対策SEO解析
アクティブユーザーとは何?効率の良い増やし方や調べ方も解説
先日のgoogleのウェブマスター向け公式ブログの記事です。
モバイル専用サイトからレスポンシブ サイトに移行する方法
レスポンシブ ウェブ デザインを導入するサイトが増えるにつれて、ウェブマスターの方々の間で、モバイル用に別途設定する URL(英語)からレスポンシブ ウェブ デザインの利用に移行することへの関心が高まっています。… 引用元:ウェブマスター向け公式ブログ
弊社でも既存のPCサイトをレスポンシブ化するというご依頼を昨今たくさんいただいております。
そこで今回はナビゲーションのレスポンシブ化に焦点を当てて、とっても簡単に実装出来るjqueryプラグインSlickNavの使い方をご紹介します。
オプション解説や、slicknavのオプションにはない閉じるボタンの実装方法も紹介しているので、是非チェックしてみてください。
目次
というわけでこのプラグインには日頃からとってもお世話になっています。
大抵のレスポンシブ化案件の場合は、モバイルを意識して作成したPCサイトではないので、 レスポンシブ化する上で構造であったりstyleと言った面で都合の悪い事が憑き物です。
しかしこのプラグインがあれば大抵のナビゲーションもきちんとレスポンシブ化させられます。
では、早速実装方法をみていきましょう。
レスポンシブ化ってなんだっけ?という方は以下の記事を参考にしてみて下さい。
まずは1番基本の状態です。DEMOも合わせてご覧ください
追記:2019年11/15
当記事で紹介していたSlickNavですが、配布元のサイトが404エラーになっているようです…。申し訳ありません。
閉鎖前にプラグインをダウンロードされて、備忘録として当記事を見てくださっている方もいるので、こちらの記事はこのまま残させていただきます。
何卒よろしくお願いいたします。
必要なファイルは
・jquery.slicknav.min.js
・slicknav.css
以上2つです。
<link rel="stylesheet" href="css/slicknav.css"/> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-1.11.3.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" /> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.slicknav.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<ul id="gnav"> <li><a href="">Home</a></li> <li><a href="">Menu 1</a></li> <li><a href="">Menu 2</a></li> <li><a href="">Menu 3</a></li> <li><a href="">About</a></li> <li><a href="">Contact</a></li> </ul>
.slicknav_menu { display:none;/*PC時は非表示*/ } @media screen and (max-width: 600px) { #gnav { display:none;/*モバイル時は非表示*/ } .slicknav_menu { display:block;/*モバイル時は表示*/} }
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20jQuery(function(%24)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%24('%23gnav').slicknav()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
これだけです。
DEMOをブラウザの検証でチェックしていただくとわかりやすいのですが、
jsでメニューを囲っているタグを指定すれば、その部分でマルっと.slicknav_menuを生成してくれます。
あとは、PC時には#gnavを表示し、モバイル時は.slicknav_menuを表示するようにcssに記述すれば、
ブレイクポイントで切り替わるという仕組みです。
SlickNavにはいくつかオプションがありますが、その中でも使いやすいものをピックアップし、説明と、DEMOを用意しました。
プロパティー | Default | 説明 |
---|---|---|
label | “MENU” | メニューボタンのラベル名が指定できます。 “メニュー”の場合・・・DEMO2 “”空の場合・・・DEMO3 |
duration | 200 | スライドアニメーションの継続時間を調整出来ます。 |
easingOpen | “swing” | メニューをを開く時のアニメーション設定です。 jQuery UIなどのプラグインを併用する事でより多くのイージング関数が使えます。 わかりやすいEasingの早見表がありましたので色々なパターンを試してください。 “easeOutBounce”の場合・・・DEMO3 |
easingClose | “swing” | メニューをを閉じる時のアニメーション設定です。 jQuery UIなどのプラグインを併用する事でより多くのイージング関数が使えます。 わかりやすいEasingの早見表がありましたので色々なパターンを試してください。 |
closedSymbol | “►” | 子リンクがある場合、親リンクが閉じた状態で右横にくる要素DEMO4 |
openedSymbol | “▼” | 子リンクがある場合、親リンクが開いた状態で右横にくる要素DEMO4 |
prependTo | “body” | ここに指定するセレクタの直下にモバイルメニューを追加します。 デフォルトはbodyなので、最上部に来るようになっています。これは便利! |
allowParentLinks | false | クリック可能なリンクを親要素として許可します。 親要素にもリンクがある場合便利です。 trueの場合・・・DEMO4 |
showChildren | false | デフォルトで親リンクの子を表示します。 |
brand | “” | メニューバーにブランディング(メニュー名)を追加出来ます。 カテゴライズされたメニュー構成の場合などに使えるかもしれません。 |
※各DEMOがタイトルの下に来るようにPrependToで生成位置を指定しています。
$('.menu1').slicknav({ prependTo:'.menu1_prepend', });
$('.menu2').slicknav({ label: 'メニュー', prependTo:'.menu2_prepend' });
$('.menu3').slicknav({ label: '', prependTo:'.menu3_prepend', duration: 800, easingOpen: "easeOutBounce", });
$('.menu4').slicknav({ label: '', prependTo:'.menu4_prepend', closedSymbol: '開く', openedSymbol:'閉じる', allowParentLinks: 'true', });
$('.menu4').slicknav({ label: '', prependTo:'.menu5_prepend', brand:'コラム' });
SlickNavでも、ハンバーガーメニューでよくある、「クリックしメニューが開くとハンバーガーが×のような閉じるボタンに変化するエフェクト」が実装できます!
DEMOページ内のハンバーガーメニューは全てこの仕様になっています。 基本的にはコピペでOKですが、幅や高さなどの指定をしているので、細かい調整などはご自身の環境やデザインに合わせてお願いします。
/*ハンバーガーメニューのエフェクト*/ .slicknav_icon, .slicknav_icon span { display: inline-block; transition: all .4s; box-sizing: border-box; } .slicknav_icon { position: relative; width: 50px; height: 44px; } .slicknav_menu .slicknav_icon-bar{ position: absolute; left: 0; } .slicknav_icon span:nth-of-type(1) { top: 0; } .slicknav_icon span:nth-of-type(2) { top: 3px; } .slicknav_icon span:nth-of-type(3) { bottom: 0; } .active .slicknav_icon-bar:nth-of-type(1) { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); } .active .slicknav_icon-bar:nth-of-type(2) { opacity: 0; } .active .slicknav_icon-bar:nth-of-type(3) { -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); }
$(".slicknav_btn").click(function(){ $(this).toggleClass("active"); });
いかがでしたか?
レスポンシブのスマホ用メニュー実装方法は色々ありますが、その中でも本当に使いやすいプラグイン、SlickNavのオプション解説を中心に、ハンバーガーメニューのエフェクトを付けるといったアレンジまで紹介させていただいました。
cssでのデザインアレンジもとっても簡単です。
「レスポンシブ化でメニュー部分をどうしていいかわからない」という方にはとてもオススメですので、是非ご参考いただければと思います!
ハンバーガーメニューの実装方法などについては以下の記事で詳しく解説しておりますので、是非参考にしてみてください。