プログラミング

公開日：2020-01-05 / 更新日：2020-12-19

ハンバーガーメニュー等を実装できるjQueryプラグイン20選！高機能で読みやすいモバイルメニューをより制作しやすく

speckyboy

Speckyboy is an online magazine for designers with its focus on sharing helpful resources, exploring new techniques, sharing useful tips, and inspiring you to build a better web.

本記事は、20 Responsive Navigation Solutions and Tutorialsを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

6,232 views

読了時間 : 約6分8秒

レスポンシブレイアウトを作る際、最も厄介なのがモバイル版のメニューの企画製作だろう。読みやすさと機能性を器用に両立しなければならない。

かつては、ナビゲーションをドロップダウンメニュー化するだけで済んだが、現在では、ハンバーガーメニュー（3本線アイコンのメニュー）、トグルメニュー, ナビドロワー、スライドアニメーションによるメニューが主流だ。

ここでは、そんな中きっと皆さんの役に立つソリューションをご紹介しよう。

Basic Responsive Hamburger Menu (CSS & jQuery)

このチュートリアルでは、短めのコーディングのみでレスポンシブサイトを実現し、これ以上マークアップを加えなくても、ハンバーガーメニューを作ることができる。マークアップを追加する場合は、jQueryを一緒に使うことで可能だ。

Basic Responsive “Three Line” Menu

Responsive Multi-Level Navigation (CSS & jQuery)

こちらのレスポンシブナビゲーションにおける手法は、大規模なマルチレベルメニューをメディアクエリとjQueryの使用により作成しつつ、マークアップをシンプルに、かつ外部ソースをできるだけ最小限に抑える方法だ。

目的は、大きめのスクリーンにて、水平方向のドロップダウンメニューを作成し、メインメニューを表示したまま、その下に最大２段階のサブ・メニューを表示できるようなものにすることだ。そして、モバイルなどの小さめのスクリーンでは、メニューは垂直方向に表示され、メインメニューがクリックもしくはタッチされると、サブメニューが表示される仕組みにする。

Responsive Multi-Level Navigation

RESPONSIVE TOGGLE MENU (css & jQuery)

ブラウザーウィンドウがモバイルサイズの際に、どのようにして手品のようにドロップダウンリストに変化するナビゲーションバーを作るか、そして、タブレットサイズ以上の場合は、メニューバーが水平方向に表示された状態をキープするのかが学べるチュートリアルだ。

Animated jPaneslMenu (jQuery Plugin)

jPanelMenuはjQueryによるプラグインで、動画スタイルのパネルメニュー（FacebookやGoogleのモバイルバージョンで見られるようなもの）を作るものだ。動画はハードウェアアクセレレーションで対応ブラウザのCSSトランジションにより製作可能である。CSSトランジションに対応していないブラウザの場合は、jQuery動画エンジンはフォールバックとして機能する。

CSS: Responsive Navigation Menu (CSS-only)

このテクニックにより、JavaScriptを使用せず、クリーンかつセマンティックなHTML5によるマークアップを使用し、レスポンシブメニューを作成することができる。メニューは左にも右にも中央にも設置でき、カーソルをのせるだけでトグルが可能なので、クリックメニューよりはるかに使いやすい。このテクニックはInternet Exploreを含め、あらゆるモバイルとデスクトップブラウザで使用できる。

CSS: Responsive Navigation Menu

Smooth Responsive Dropdown Menu-Top Drawer (CSS&jQuery)

このチュートリアルでは、JavaScriptでアニメーション化するのではなく、CSS3を使用した、スムーズに表示されるモバイルメニューの作り方が学べる。メニューアイコンをクリックすると、アクティブクラスをドロワーに付与し、ドロップダウンメニューをスムーズに表示するようトランスレートを行うことができる。

Modernizrで使用しているデバイスがCSS transformに対応しているか検証可能で、対応していない場合は、メニューの出し入れがボタンのクリックによって可能だ。

Top Drawer

Simple Responsive Navigation (css & jQuery)

このチュートリアルでは、少しのCSS3メディアクエリとjQueryの使用で、モバイルの小さなスクリーンで表示するためのレスポンシブメニューを作るための非常にシンプルな方法が学べる。

Simple Responsive Navigation

Mobile Drawer-Style Menu (jQueryプラグイン)

このjQueryのモバイルメニュー・プラグインはiOSデバイスで見られるようなドロワースタイルのナビゲーションをモバイルサイトで作成する方法だ。

Mobile Drawer-Style Menu

MeanMenue – A Media Query Independent Navigation (jQuery Plugin)

MeanMenu

CSS3 Responsive Menu (CSS-only)

このチュートリアルでは様々なスクリーンサイズに適応した、blockスタイルのレスポンシブナビゲーションメニューを作成するステップを丁寧に解説している。

CSS3 Responsive Menu

Simple & Responsive Mobile First Navigation (CSS- Only)

このチュートリアルで学べるのは、モバイル上でのシンプルでわかりやすいレイアウトとナビゲーションの作り方だ。更に、スクリーンサイズを察知するためのメディアクエリを使用し、必要に応じてスタイルや機能を追加しつつ、大きめのスクリーン向けにデザインを着実にグレードアップする方法も教えてくれる。

Simple & Responsive Mobile First Navigation

Stacking Responsive Menu (Proof of Concept)

このソリューションは概念実証のためのもので、実用のためのものではないが、ぜひデモ（下記リンク）をご覧いただき、ウィンドウの大きさを変換してみてほしい。各セクションの素晴らしい「スタッキング効果」が確認できるだろう。‘

Stacking’ Responsive Menu

Progressive and Responsive Navigation Tutorial

こちらのチュートリアルは、Smashing Magazineに掲載されているものだ。ナビゲーションのコーディングをステップごとに解説してくれる。ここでは、初めから着実なエンハンスを計画し、最終的には何らかのレスポンシブ要素を用いることで、デスクトップでもモバイルでも、機能性が低めのブラウザやモダンブラウザにも簡単に対応するナビゲーションの作成を目標としている。

Progressive And Responsive Navigation →

Responsive Navigation Menu Tutorial

このチュートリアルでは、コーディングによりシンプルで効果的なグリッドレイアウトのレスポンシブナビゲーションメニューを作成し、その後も調整や再利用しやすいものに仕上げる方法を説明している。

Responsive Navigation Menu →

TinyNav.js jQuery Plugin

TinyNav.js は小さなjQueryのプラグイン（362バイトに縮小・圧縮されている）であり、 <ul>と<ol>のナビゲーションを変換し、モバイルスクリーンにてドロップダウンを選択することが可能だ。また、自動的に見ているページを選択し、selected=”selected”を追加することができる。

TinyNav.js →