LogoMark.png

NavigationDesign

これらのキーワードがハイライトされています:Navi

Navigation Design Samples


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

CONTENTS


はじめに

メニューのUI(User Interface)デザインは、Webサイトの使い勝手に大きく影響します。以下のような点に配慮が必要です。

レスポンシブなサイトでは、PC用とモバイル用で、インターフェイスを変更する配慮が必要です。

HoverDown|forPC

メインメニューのマウスホバー時に、下位のサブメニューが出現する例です。
CSSの hover 擬似クラスのみで実現します。

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を利用しています。

ToggleBasic2

jQuery の toggleClasss() でCLASSの付け替えを行うパターンです。

CSS 付記

以下、要点のみ掲載します。

.menu {
  position: absolute;
     :
  display: none;
}
.menu.isOpen {
  display: block;
}




ButtonAnimation

ハンバーガーアイコンをCSSでアニメーションさせています。

AccordionMenu

2段階のスライドトグルで、一般にアコーディオンメニューと言います。

解説

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

DrawerMenu

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

DrawerMenu+

上記のサンプルに、ハンバーガーボタンアニメーションとサブメニューのドロップダウンを加えたものです。組み合わせただけなので、コードはGitHubのページでご確認下さい。

DrawerMenuCSS

HTML+CSS のみ(JavaScriptなし)で実装した事例です。煩雑でわかりにくいので、こちらで解説しています。> CSS/SlideMenu

Plugins for Navigation

Luxbar Sample

CSS のみで実装された軽量ナビゲーションバー。埋め込みコードの生成も自動化されているので、簡単なサイトの制作を急ぎで行う場合は便利です。
https://github.com/balzss/luxbar


MaterialDesign Sample

GoogleのMaterialDesignを使用したメニューのサンプルです
Bootstrap が提供するフレームワークを利用しています。

MaterialDesignの解説はこちら > MaterialDesign




APPENDIX

その他のツールの紹介

Hover.CSS - A collection of CSS3 powered hover effects

http://ianlunn.github.io/Hover/

マウスのホバリングに反応する様々なアニメーションエフェクトを簡単に適用することができる CSSファイルです。

Slicknav

http://ww1.slicknav.com/
以下にデモサイトがあります
https://pecopla.net/wp-content/themes/2015.pecopla/demo/slicknav/sample-1.html

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フレームワークを使いこなすには学習コストがかかります。


PAGES

GUIDE

DATA

Last-modified: 2021-09-25 (土) 11:05:50