スマホのメニューを気持ちよく表示させるjQuery「drawer.js」

スマホのメニューを気持ちよく表示させるjQuery「drawer.js」

スポンサーリンク

スポンサーリンク

webサイトのスマートフォン最適化に伴い、必須となってくるのがナビゲーションメニューのユーザビリティ向上です。

パソコン表示ではCSSによる装飾で綺麗に表示することが可能なナビゲーションメニューですが、スマートフォンを始めとするモバイル端末では、綺麗に表示させることが難しかったりします。

そんなときに役立つのが今回紹介するドロワーナビゲーションメニューです。

利用するjqueryはdrawer.js

スマホ操作の際に、メニューボタンをタップすることでスルスルッと左側からナビゲーションメニューの一覧画面が出てきて表示されるという、便利な上に見栄えも良いナビゲーションメニューを実装することが出来ます。

本サイトもスマートフォンやタブレットで閲覧した際にはドロワーナビゲーションが動作するようにしていますので、お時間がある方はぜひご確認ください。

以下、デモ画面です。(※デモ画面のドロワーナビゲーションメニューも、是非スマートフォンで実際の動作をご確認ください。)

デモ画面

対応ブラウザ

本記事で紹介するドロワーナビゲーションはCSS3による装飾が必須となっているので、CSS3に対応している以下のブラウザでのみ対応となりますのでご注意ください。

  • Internet Explorer 10以上
  • GoogleChrome
  • Safari
  • Firefox

では、実装方法を説明していきます。

ドロワーナビゲーションの実装方法

ドロワーナビゲーションを実装するためには、

  1. 動作させるために必要なCDNを読み込む
  2. HTML上にナビゲーションメニューを構成する記述を加える
  3. スクリプトとなる記述を加える

の3工程が必要となります。

基礎となる部分は以下に記載するコピペで事足りるので、あとはメニュー部分を構成するためのHTMLとCSSさえそれなりに編集が出来る方でしたら、簡単に実装することが出来るかと思います。

動作させるために必要なCDNを読み込む

まずは以下のCDNを読み込みます。丸々コピペで大丈夫です。

CDNで読み込ませるのではなく、CSSやJSファイルをサーバー内に設置して読み込ませたいという方は、

GitHub/https://github.com/blivesta/drawer/

から必要なファイルをダウンロードしてお使いください。

個人的にはCDNで読み込ませる方法がオススメです。理由はCDNだと負荷が少なくて済む上に、ドロワーナビゲーションの表示速度も向上するからです。

HTML上にナビゲーションメニューを構成する記述を加える

ナベゲーションメニューとなるHTMLを<body>内に加えます。実装するwebサイトのコンテンツに合わせて、リストアイテムにリンクを設置してください。

※上記ではid=”wrapper”を記述するために<header>を<div>タグで囲んでいますが、<div>タグを記述しない場合はclass=”drawer drawer–left”の記述を<body>タグに記述してください

スクリプトとなる記述を加える

最後に、スクリプトとなる以下の記述を加えます。丸々コピペで大丈夫です。

以上までが、drawer.jsの実装方法となります。

ドロワーナビゲーションまとめ

先日、「Googleが公式に「モバイル専用のインデックスを公開」することを発表」という記事を書きましたが、モバイル専用のインデックスが公開された場合、webサイトの全主要ページへのリンクが設置されているナビゲーションメニューの有用性は格段に上がると考えています。

それどころか、画面の上部にメニュー画面へのリンクとなるボタン(本記事のドロワーナビゲーションメニューのボタンのような)が、固定設置されていることがモバイルフレンドリーのスタンダードとなるかもしれません。

本サイトでもスマートフォンやタブレットで閲覧をした際には、画面の上部に常にメニュー画面へのリンクとなるボタンを固定表示させることで、どのページを閲覧しているときでもメニュー画面をすぐに表示させることが出来るようにしています。

機能性だけではなくSEO対策にも有効なドロワーナビゲーション、是非あなたのwebサイトにも実装してみてください。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク