Navigation Design Samples
ナビゲーションメニューには様々な実装方法があります。現在では、UI用の様々なjQueryプラグインが公開されていて、それらを利用すれば、煩雑な仕組みのメニューも、HTMLにCLASSを追加するだけで実装可能ですが、まずは自分で、基本的なコードを書いて仕組みを理解することが重要です。ここでは、基本的なパターンのサンプル、またいくつかのプラグインの利用について紹介しています。
CONTENTS
- はじめに
- HoverDown|forPC
- ToggleBasic
- ToggleBasic2
- ButtonAnimation
- AccordionMenu
- DrawerMenu
- DrawerMenu+
- DrawerMenuCSS
- Plugins for Navigation
- APPENDIX
はじめに
メニューのUI(User Interface)デザインは、Webサイトの使い勝手に大きく影響します。以下のような点に配慮が必要です。
- メニューの存在そのものがわかること
スマートフォンでは、ハンバーガーボタンが一般的になりました。 - メニューの階層構造(実質的にサイトの階層構造)がわかりやすいこと
- 選択部分と非選択部分が明確に区別されること
- ポインティングしやすいこと
A要素に padding を持たせてクリックエリアを広げるなどの工夫が必要です。
レスポンシブなサイトでは、PC用とモバイル用で、インターフェイスを変更する配慮が必要です。
- PC用の画面では、マウスホバーで対象が反応、また下の階層がある場合はそれが表示されるようにします。一般に :hover 擬似クラスで実現します。
- モバイルでは :hover がうまく機能しないので、クリックで下の階層が出るように設計します。クリックしなくても下の階層の有無がわかるよう、メニューの第一レベルには「▼」や「+」などのマークを表示するとよいでしょう。一般に JavaScript(jQuery)でサブメニューの出入りを制御します。
HoverDown|forPC
メインメニューのマウスホバー時に、下位のサブメニューが出現する例です。
CSSの hover 擬似クラスのみで実現します。
- DEMO:https://koichi-inoue.github.io/Navi-HoverDown/
- CODE:https://github.com/koichi-inoue/Navi-HoverDown
HTML 付記
HTMLの方は、メインメニューである ul li の下位に サブメニューの ul li が入れ子になる形で記述します。メインメニューのブロックに class = "mainMenu"を定義。またサブメニューのブロックに class = "subMenu" を定義しています。
CSS 付記
通常は非表示(visibility: hidden;)で、マウスホバーで表示(visibility: visible;)。
要は、.mainMenuにおける li をposition: relative; として、そこを基準に .subMenu の場所を position: absolute; で指定する形でサブメニューの出現する位置を定めています。
ToggleBasic
jQuery のSlideToggle() によりクリックで開閉する最もシンプルな事例です。
メニューアイコンには FontAwesomeを利用しています。
- DEMO:https://koichi-inoue.github.io/Navi-ToggleBasic/
- CODE:https://github.com/koichi-inoue/Navi-ToggleBasic
ToggleBasic2
jQuery の toggleClasss() でCLASSの付け替えを行うパターンです。
- DEMO:https://koichi-inoue.github.io/Navi-ToggleBasic2/
- CODE:https://github.com/koichi-inoue/Navi-ToggleBasic2
CSS 付記
以下、要点のみ掲載します。
.menu { position: absolute; : display: none; } .menu.isOpen { display: block; }
ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。
- DEMO:https://koichi-inoue.github.io/Navi-ButtonAnimation/
- CODE:https://github.com/koichi-inoue/Navi-ButtonAnimation
AccordionMenu
2段階のスライドトグルで、一般にアコーディオンメニューと言います。
- DEMO:https://koichi-inoue.github.io/Navi-Accordion/
- CODE:https://github.com/koichi-inoue/Navi-Accordion
解説
再利用に配慮し、HTML側は最小限のクラス定義で実現するようにしたため、CSS と JavaScript が若干複雑になっています。
- HTMLのメニューの構造は標準的な階層リスト構造とし、第1レベルと第2レベルの <ul> タグに .menu menu-child をそれぞれ付すだけです。
<ul class="menu"> <li><a href="">ITEM-01</a> <ul class="menu-child"> <li><a href="#">ITEM-01-01</a></li> <li><a href="#">ITEM-01-02</a></li> </ul> </li> <li><a href="">ITEM-02</a> <ul class="menu-child"> <li><a href="#">ITEM-02-01</a></li> <li><a href="#">ITEM-02-02</a></li> <li><a href="#">ITEM-02-03</a></li> </ul> </li> :
- 下位レベルに menu-child をもつ要素に JavaScript で ドロップダウンボタンを動的に付し、isOpen と isClosed の2つの状態をCSS に記載しています。
DrawerMenu
左からスライドして出現するタイプのメニューです。一般に、メニュー出現時にはコンテンツ部分に半透明のオーバーレイをかけて、閉じる際には、オーバーレイ部分のクリックでもそれが可能になるようにします。
DrawerMenu+
上記のサンプルに、ハンバーガーボタンアニメーションとサブメニューのドロップダウンを加えたものです。組み合わせただけなので、コードはGitHubのページでご確認下さい。
- DEMO:https://koichi-inoue.github.io/Navi-Drawer-Plus/
- CODE:https://github.com/koichi-inoue/Navi-Drawer-Plus
DrawerMenuCSS
HTML+CSS のみ(JavaScriptなし)で実装した事例です。煩雑でわかりにくいので、こちらで解説しています。> CSS/SlideMenu
- DEMO:https://koichi-inoue.github.io/Navi-Drawer-CSS/
- CODE:https://github.com/koichi-inoue/Navi-Drawer-CSS
Plugins for Navigation
Luxbar Sample
CSS のみで実装された軽量ナビゲーションバー。埋め込みコードの生成も自動化されているので、簡単なサイトの制作を急ぎで行う場合は便利です。
https://github.com/balzss/luxbar
- DEMO:https://koichi-inoue.github.io/Luxbar_Sample/
- CODE:https://github.com/koichi-inoue/Luxbar_Sample
- 利用方法
- コードの自動生成ができるデモページに接続してください
https://balzss.github.io/luxbar/ - Getting started: の部分で、3つめの方法「CDN で読み込む」のコードを取得して、あなたのサイトの <head> に追加して下さい(以下の1行がそれです)。
<link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css">
- Menu builder: の部分で、メニュー項目名の入力編集ができます。
デザインスタイル、色を選択すると、下段にコードが自動生成されます。
これを、あなたのサイトのナビゲーション部分に追加すればOKです。 - メニューの2階層目をドロップダウン表示したい場合は、アイテム部分を以下のように2階層化したコードで書けばOKです。
<li class="luxbar-item dropdown"><a href="#">Dropdown Menu</a> <ul> <li class="luxbar-item" ><a href="#">Dropdown Item 1</a></li> <li class="luxbar-item" ><a href="#">Dropdown Item 2</a></li> <li class="luxbar-item" ><a href="#">Dropdown Item 3</a></li> </ul> </li>
- なお、ブレイクポイントは、786px に固定されているようです。
- コードの自動生成ができるデモページに接続してください
MaterialDesign Sample
GoogleのMaterialDesignを使用したメニューのサンプルです
Bootstrap が提供するフレームワークを利用しています。
- DEMO:https://koichi-inoue.github.io/MaterialDesign/
- CODE:https://github.com/koichi-inoue/MaterialDesign
MaterialDesignの解説はこちら > MaterialDesign
APPENDIX
その他のツールの紹介
Hover.CSS - A collection of CSS3 powered hover effects
http://ianlunn.github.io/Hover/
マウスのホバリングに反応する様々なアニメーションエフェクトを簡単に適用することができる CSSファイルです。
- 1. 上記のサイトの DOWNLOAD から丸ごとダウンロード
- 2. 必要なファイルは、CSSフォルダの中の hover.css のみです。
- 3. hover.css をあなたのサイトフォルダに投入してください。
- 4. htmlファイルの <head>部分で、それをリンクします。
<link rel="stylesheet" href="(CSSファイルのパス)/hover.css">
これで準備完了です。 - 5. デモサイト上で使いたい効果の部分のクラス名を抽出して(ブラウザで「要素の検証」するとクラス名がわかります)任意のタグで
<a class="クラス名" href="#">MENU</a>
などと追加記述すれば、効果が適用されます。
Slicknav
http://ww1.slicknav.com/
以下にデモサイトがあります
https://pecopla.net/wp-content/themes/2015.pecopla/demo/slicknav/sample-1.html
- 必要なファイルは以下の2つです。
- jquery.slicknav.min.js
- slicknav.css
Accordion Menu
シンプルなアコーディオン型ナビゲーションメニュー
https://codepen.io/MrsColombo/pen/mEeQwy
Swanky Pure CSS Drop Down Menu
HTMLとCSSのみで表現できるドロップダウンメニュー
https://codepen.io/jcoulterdesign/pen/qdWxEm
Simple radial menu
ハンバーガーメニューをクリックすると、円形にSNSアイコンが展開します
https://codepen.io/suez/pen/vAais
Formstone
フロントエンド用の様々なコンポーネントのコレクションです
https://formstone.it/
以下にナビゲーションのデモがあります
https://formstone.it/components/navigation/demo/
使い方解説
とりあえず、以下のようにすれば試すことができますが、JSフレームワークを使いこなすには学習コストがかかります。
- パッケージを以下のGitHubリポジトリからDLします。
https://github.com/Formstone/Formstone - DLしたパッケージの dist フォルダの中の js と css をまるごと自身のWebサイトのディレクトリ直下に投入します。
- Navigationコンポーネントのドキュメント(以下)を確認して下さい。
https://formstone.it/components/navigation/ - 以下のファイルの読み込みが必要であることが記載されています。
- Main
navigation.js navigation.css
- Dependencies
jQuery core.js mediaquery.js swap.js
- Main
- ということで、これらを<head>で読み込むみます。
<head> <meta charset="UTF-8"> <script src="js/jquery-3.4.1.min.js"></script> <script src="js/core.js"></script> <script src="js/mediaquery.js"></script> <script src="js/swap.js"></script> <script src="js/navigation.js"></script> <link href="css/navigation.css" rel="stylesheet" ></link> <title>Formstone Sample</title> </head>
- あとは DEMO にある HTML とJS を以下のように書いてお試し下さい。
<body> <div class="nav_content"> <button type="button" class="nav_handle">Menu</button> </div> <nav class="navigation" data-navigation-handle=".nav_handle" data-navigation-content=".nav_content"> <a href="#">One</a> <a href="#">Two</a> <a href="#">Three</a> </nav> : <script> $(function(){ $(".navigation").navigation({ type: "reveal", gravity: "left", maxWidth: "10000px" }); }); </script> </body>