デザインシステム 法令整備・編さんデータベース

概要

表示領域に対して、表示させたいメニューが多い場合隠しメニューを使用します。

ハンバーガーメニュー

主にスマートフォンで採用する隠しメニューです。通常は画面の左上に設置します。

通常:

CLASS hBtn がトリガーとなりイベントを発生させます。data-target=""で、表示させるメニューを紐づけます。

ハンバーガーメニュー

<button type="button" data-target="hMenu" class="iconBtn hamburger hBtn"><span>ハンバーガーメニュー</span></button>

丸枠:

CLASS hBtn がトリガーとなりイベントを発生させます。data-target=""で、表示させるメニューを紐づけます。scrollは、メニュー数が多い場合、スクロールを発生させるために設置します。

ハンバーガーメニュー

<button type="button" data-target="hMenu" class="circleType label small hamburger hBtn"><span>ハンバーガーメニュー</span></button>

表示メニュー:

呼び出し側のボタンのdata-target=""の値と同じ値をCLASSに設置してボタンとメニューを紐づけます。基本的にBODY直下に配置場所しますが、グローバルメニューなどと共有する際は適時スタイルシートを変更してください。

<nav class="hMenu">
<button type="button" class="iconClosed">閉じる</button>
<div class="scroll">
<ul>
<li><a href="#" class="textBlack">メニュー文言</a></li>
<li><a href="#" class="textBlack">メニュー文言</a></li>
<li><a href="#" class="textBlack">メニュー文言</a></li>
</ul>
</div>
</nav>

JAVASCRIPT:

BODY直前 jQuery と tips.js の間に以下の読み込みタグを追加してください。

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

プルダウン

主にグローバルメニューでサブカテゴリ以下に遷移したい場合に利用します。

通常:

<nav id="gNav">
<ul>
<li class="active"><a href="#" class="textBlack">コンテンツ</a></li>
<li class="subMenuWrap"><span>コンテンツ</span>
<ul class="subMenu">
<li><a href="#">サブコンテンツ</a></li>
<li><a href="#">サブコンテンツ</a></li>
<li><a href="#">サブコンテンツ</a></li>
</ul>
</li>
<li><a href="#" class="textBlack">コンテンツ</a></li>
<li class="subMenuWrap"><span class="textBlack">コンテンツ</span>
<ul class="subMenu">
<li><a href="#">サブコンテンツ</a></li>
<li><a href="#">サブコンテンツ</a></li>
</ul>
</li>
<li><a href="#" class="textBlack"></a></li>
</ul>
</nav>

ポップアップ

ページ内で操作したいアクションに対して、表示領域が少ない際に利用します。。

通常:

要素の右上にナビが設置されます。

• ・・・
  • テキストサンプル
  • テキストサンプル
  • テキストサンプル
  • テキストサンプル

<div class="popUpBtnsWrap">
--- ここから↓↓↓ ---
この範囲に予め表示させるHTMLの記述をします。
--- ここまで↑↑↑ ---
<ul class="popUpBtns">
<li class="moreSelectWrap"><button type="button" class="iconBtn dotte noText circleType label small"><span>・・・</span></button>
--- ここからポップアップ内の要素の記述をします。 ---
<div class="moreSelectBox">
<ul>
<li><button type="button"><span>テキストサンプル</span></button></li>
<li><button type="button"><span>テキストサンプル</span></button></li>
<li><button type="button"><span>テキストサンプル</span></button></li>
</ul>
</div>
--- ここまでポップアップ内の要素の記述をします。 ---
</li>
</ul>
</div>

非アクティブ:

要素の右上にナビが設置されます。

• ・・・
  • テキストサンプル
  • テキストサンプル
  • テキストサンプル
  • テキストサンプル

<div class="popUpBtnsWrap">
<ul class="popUpBtns disabled">
<li class="moreSelectWrap"><button type="button" class="iconBtn dotte noText circleType label small disabled"><span>・・・</span></button>
<div class="moreSelectBox">
<ul>
<li><button type="button"><span>テキストサンプル</span></button></li>
<li><button type="button"><span>テキストサンプル</span></button></li>
<li><button type="button"><span>テキストサンプル</span></button></li>
</ul>
</div>
</li>
</ul>
</div>