NavigationDesign
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Navigation Design Samples
~
ナビゲーションメニューには様々な実装方法があります。現在...
~
***CONTENTS
#contents2_1
~
**はじめに
メニューのUI（User Interface）デザインは、Webサイトの使い...
-メニューの存在そのものがわかること
&small(スマートフォンでは、ハンバーガーボタンが一般的にな...
-メニューの階層構造（実質的にサイトの階層構造）がわかりや...
-選択部分と非選択部分が明確に区別されること
-ポインティングしやすいこと
&small(A要素に padding を持たせてクリックエリアを広げるな...
レスポンシブなサイトでは、PC用とモバイル用で、インターフ...
-PC用の画面では、マウスホバーで対象が反応、また下の階層が...
-モバイルでは :hover がうまく機能しないので、クリックで下...
~
~
**HoverDown｜forPC
メインメニューのマウスホバー時に、下位のサブメニューが出...
CSSの hover 擬似クラスのみで実現します。
-''DEMO''：https://koichi-inoue.github.io/Navi-HoverDown/
-''CODE''：https://github.com/koichi-inoue/Navi-HoverDown
~
***HTML 付記
HTMLの方は、メインメニューである ul li の下位に サブメニ...
~
***CSS 付記
通常は非表示(visibility: hidden;)で、マウスホバーで表示(v...
要は、.mainMenuにおける li をposition: relative; として、...
~
~
**ToggleBasic
jQuery のSlideToggle() によりクリックで開閉する最もシンプ...
メニューアイコンには [[FontAwesome>https://fontawesome.co...
-''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-ToggleBasi...
-''CODE''：https://github.com/koichi-inoue/Navi-ToggleBas...
~
***CSS 付記
以下、要点のみ掲載します。
.menu {
position: absolute;
：
display: none;
}
.menu.isOpen {
display: block;
}
~
~
**ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。
-''DEMO''：https://koichi-inoue.github.io/Navi-ButtonAnim...
-''CODE''：https://github.com/koichi-inoue/Navi-ButtonAni...
~
~
**AccordionMenu
２段階のスライドトグルで、一般にアコーディオンメニューと...
-''DEMO''：https://koichi-inoue.github.io/Navi-Accordion/
-''CODE''：https://github.com/koichi-inoue/Navi-Accordion
~
~
***解説
再利用に配慮し、HTML側は最小限のクラス定義で実現するよう...
-HTMLのメニューの構造は標準的な階層リスト構造とし、第１レ...
<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 で ドロ...
~
~
**DrawerMenu
左からスライドして出現するタイプのメニューです。一般に、...
-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer
~
~
**DrawerMenu+
上記のサンプルに、ハンバーガーボタンアニメーションとサブ...
-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer-Plus/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer-Plus
~
~
**DrawerMenuCSS
HTML+CSS のみ（JavaScriptなし）で実装した事例です。煩雑で...
-''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 で読み...
<link rel="stylesheet" href="https://cdn.rawgit.com/balz...
--''Menu builder:'' の部分で、メニュー項目名の入力編集が...
デザインスタイル、色を選択すると、下段にコードが自動生成...
これを、あなたのサイトのナビゲーション部分に追加すればOK...
--メニューの２階層目をドロップダウン表示したい場合は、ア...
<li class="luxbar-item dropdown"><a href="#">Dropdown Me...
<ul>
<li class="luxbar-item" ><a href="#">Dropdown Item 1...
<li class="luxbar-item" ><a href="#">Dropdown Item 2...
<li class="luxbar-item" ><a href="#">Dropdown Item 3...
</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/
マウスのホバリングに反応する様々なアニメーションエフェク...
-1. 上記のサイトの DOWNLOAD から丸ごとダウンロード
-2. 必要なファイルは、CSSフォルダの中の hover.css のみで...
-3. hover.css をあなたのサイトフォルダに投入してください。
-4. htmlファイルの <head>部分で、それをリンクします。
<link rel="stylesheet" href="（CSSファイルのパス）/hover...
これで準備完了です。
-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/s...
-必要なファイルは以下の２つです。
-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){とりあえず、以下のようにすれば試すことができ...
-パッケージを以下のGitHubリポジトリからDLします。
https://github.com/Formstone/Formstone
-DLしたパッケージの dist フォルダの中の js と css をまる...
-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" ></...
<title>Formstone Sample</title>
</head>
-あとは [[DEMO>https://formstone.it/components/navigation...
<body>
<div class="nav_content">
<button type="button" class="nav_handle">Menu</b...
</div>
<nav class="navigation" data-navigation-handle=".nav...
<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>
~
~
~
終了行:
*Navigation Design Samples
~
ナビゲーションメニューには様々な実装方法があります。現在...
~
***CONTENTS
#contents2_1
~
**はじめに
メニューのUI（User Interface）デザインは、Webサイトの使い...
-メニューの存在そのものがわかること
&small(スマートフォンでは、ハンバーガーボタンが一般的にな...
-メニューの階層構造（実質的にサイトの階層構造）がわかりや...
-選択部分と非選択部分が明確に区別されること
-ポインティングしやすいこと
&small(A要素に padding を持たせてクリックエリアを広げるな...
レスポンシブなサイトでは、PC用とモバイル用で、インターフ...
-PC用の画面では、マウスホバーで対象が反応、また下の階層が...
-モバイルでは :hover がうまく機能しないので、クリックで下...
~
~
**HoverDown｜forPC
メインメニューのマウスホバー時に、下位のサブメニューが出...
CSSの hover 擬似クラスのみで実現します。
-''DEMO''：https://koichi-inoue.github.io/Navi-HoverDown/
-''CODE''：https://github.com/koichi-inoue/Navi-HoverDown
~
***HTML 付記
HTMLの方は、メインメニューである ul li の下位に サブメニ...
~
***CSS 付記
通常は非表示(visibility: hidden;)で、マウスホバーで表示(v...
要は、.mainMenuにおける li をposition: relative; として、...
~
~
**ToggleBasic
jQuery のSlideToggle() によりクリックで開閉する最もシンプ...
メニューアイコンには [[FontAwesome>https://fontawesome.co...
-''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-ToggleBasi...
-''CODE''：https://github.com/koichi-inoue/Navi-ToggleBas...
~
***CSS 付記
以下、要点のみ掲載します。
.menu {
position: absolute;
：
display: none;
}
.menu.isOpen {
display: block;
}
~
~
**ButtonAnimation
ハンバーガーアイコンをCSSでアニメーションさせています。
-''DEMO''：https://koichi-inoue.github.io/Navi-ButtonAnim...
-''CODE''：https://github.com/koichi-inoue/Navi-ButtonAni...
~
~
**AccordionMenu
２段階のスライドトグルで、一般にアコーディオンメニューと...
-''DEMO''：https://koichi-inoue.github.io/Navi-Accordion/
-''CODE''：https://github.com/koichi-inoue/Navi-Accordion
~
~
***解説
再利用に配慮し、HTML側は最小限のクラス定義で実現するよう...
-HTMLのメニューの構造は標準的な階層リスト構造とし、第１レ...
<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 で ドロ...
~
~
**DrawerMenu
左からスライドして出現するタイプのメニューです。一般に、...
-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer
~
~
**DrawerMenu+
上記のサンプルに、ハンバーガーボタンアニメーションとサブ...
-''DEMO''：https://koichi-inoue.github.io/Navi-Drawer-Plus/
-''CODE''：https://github.com/koichi-inoue/Navi-Drawer-Plus
~
~
**DrawerMenuCSS
HTML+CSS のみ（JavaScriptなし）で実装した事例です。煩雑で...
-''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 で読み...
<link rel="stylesheet" href="https://cdn.rawgit.com/balz...
--''Menu builder:'' の部分で、メニュー項目名の入力編集が...
デザインスタイル、色を選択すると、下段にコードが自動生成...
これを、あなたのサイトのナビゲーション部分に追加すればOK...
--メニューの２階層目をドロップダウン表示したい場合は、ア...
<li class="luxbar-item dropdown"><a href="#">Dropdown Me...
<ul>
<li class="luxbar-item" ><a href="#">Dropdown Item 1...
<li class="luxbar-item" ><a href="#">Dropdown Item 2...
<li class="luxbar-item" ><a href="#">Dropdown Item 3...
</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/
マウスのホバリングに反応する様々なアニメーションエフェク...
-1. 上記のサイトの DOWNLOAD から丸ごとダウンロード
-2. 必要なファイルは、CSSフォルダの中の hover.css のみで...
-3. hover.css をあなたのサイトフォルダに投入してください。
-4. htmlファイルの <head>部分で、それをリンクします。
<link rel="stylesheet" href="（CSSファイルのパス）/hover...
これで準備完了です。
-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/s...
-必要なファイルは以下の２つです。
-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){とりあえず、以下のようにすれば試すことができ...
-パッケージを以下のGitHubリポジトリからDLします。
https://github.com/Formstone/Formstone
-DLしたパッケージの dist フォルダの中の js と css をまる...
-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" ></...
<title>Formstone Sample</title>
</head>
-あとは [[DEMO>https://formstone.it/components/navigation...
<body>
<div class="nav_content">
<button type="button" class="nav_handle">Menu</b...
</div>
<nav class="navigation" data-navigation-handle=".nav...
<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>
~
~
~
ページ名:
