LogoMark.png

NavigationDesign の変更点

#author("2021-09-25T11:05:50+09:00;2020-02-25T20:30:54+09:00","default:inoue.ko","inoue.ko")
*Navigation Design Samples
~

ナビゲーションメニューには様々な実装方法があります。現在では、UI用の様々なjQueryプラグインが公開されていて、それらを利用すれば、煩雑な仕組みのメニューも、HTMLにCLASSを追加するだけで実装可能ですが、まずは自分で、基本的なコードを書いて仕組みを理解することが重要です。ここでは、基本的なパターンのサンプル、またいくつかのプラグインの利用について紹介しています。
~

***CONTENTS
#contents2_1
~

**はじめに
メニューのUI（User Interface）デザインは、Webサイトの使い勝手に大きく影響します。以下のような点に配慮が必要です。
-メニューの存在そのものがわかること
&small(スマートフォンでは、ハンバーガーボタンが一般的になりました。);
-メニューの階層構造（実質的にサイトの階層構造）がわかりやすいこと
-選択部分と非選択部分が明確に区別されること
-ポインティングしやすいこと
&small(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>https://fontawesome.com/]]を利用しています。

-''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
２段階のスライドトグルで、一般にアコーディオンメニューと言います。

-''DEMO''：https://koichi-inoue.github.io/Navi-Accordion/
-''CODE''：https://github.com/koichi-inoue/Navi-Accordion
~
~

***解説
再利用に配慮し、HTML側は最小限のクラス定義で実現するようにしたため、CSS と JavaScript が若干複雑になっています。

-HTMLのメニューの構造は標準的な階層リスト構造とし、第１レベルと第２レベルの <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 の２つの状態をCSS に記載しています。
~
~

**DrawerMenu
左からスライドして出現するタイプのメニューです。一般に、メニュー出現時にはコンテンツ部分に半透明のオーバーレイをかけて、閉じる際には、オーバーレイ部分のクリックでもそれが可能になるようにします。

-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer
~
~

**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:'' の部分で、３つめの方法「CDN で読み込む」のコードを取得して、あなたのサイトの <head> に追加して下さい（以下の１行がそれです）。
 <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css">
--''Menu builder:'' の部分で、メニュー項目名の入力編集ができます。
デザインスタイル、色を選択すると、下段にコードが自動生成されます。
これを、あなたのサイトのナビゲーション部分に追加すればOKです。
--メニューの２階層目をドロップダウン表示したい場合は、アイテム部分を以下のように２階層化したコードで書けば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. [[デモサイト>http://ianlunn.github.io/Hover/]]上で使いたい効果の部分のクラス名を抽出して（ブラウザで「要素の検証」するとクラス名がわかります）任意のタグで
 <a class="クラス名" href="#">MENU</a>
などと追加記述すれば、効果が適用されます。
~

***Slicknav
http://ww1.slicknav.com/
以下にデモサイトがあります
https://pecopla.net/wp-content/themes/2015.pecopla/demo/slicknav/sample-1.html
-必要なファイルは以下の２つです。
-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/

''使い方解説''
&color(red){とりあえず、以下のようにすれば試すことができますが、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
-ということで、これらを＜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>https://formstone.it/components/navigation/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>
~
~

~