補助表示

ハンバーガーメニュー

主にスマートフォンで採用する隠しメニューです。通常は画面の左上に設置します。サイト内ひとつに限定して設置してください。

通常:

ID hamburger がトリガーとなりイベントを発生させます。

スマホ用メニューボタン

<button type="button" id="hamburger" class="hamburger" aria-label="メニューを開く" aria-controls="headerNav" aria-expanded="false"><span aria-hidden="true">スマホ用メニューボタン</span></button>

丸枠:

ID hamburger がトリガーとなりイベントを発生させます。

ハンバーガーメニュー

<button type="button" id="hamburger" class="hamburger circleType label" aria-label="メニューを開く" aria-controls="headerNav" aria-expanded="false"><span aria-hidden="true">スマホ用メニューボタン</span></button>

プルダウン

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

通常:

• コンテンツ
• コンテンツ
  • サブコンテンツ
  • サブコンテンツ
  • サブコンテンツ
• コンテンツ
• コンテンツ
  • サブコンテンツ
  • サブコンテンツ

<nav id="gNav">
<ul>
<li class="active"><a href="#">コンテンツ</a></li>
<li class="subMenuWrap"><a href="#" aria-haspopup="true" aria-expanded="false">コンテンツ</a>
<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"><a href="#" aria-haspopup="true" aria-expanded="false">コンテンツ</a>
<ul class="subMenu">
<li><a href="#">サブコンテンツ</a></li>
<li><a href="#">サブコンテンツ</a></li>
</ul>
</li>
<li><a href="#"></a></li>
</ul>
</nav>

ポップアップ

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

通常:

要素の近くにポップアップがされます。（表示領域に対して左右表示が変わります。）

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

<div class="popUpBtnsWrap">
--- ここから↓↓↓ ---
この範囲に予め表示させるHTMLの記述をします。
--- ここまで↑↑↑ ---
<ul class="popUpBtns">
<li class="moreSelectWrap"><button type="button" class="circleType sub dotte sm" aria-haspopup="menu"><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 is-disabled">
<li class="moreSelectWrap"><button type="button" class="circleType sub dotte sm is-disabled" aria-haspopup="menu"><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>

実行内容を選択するボタン

オプションの値に出現させたいポップアップのIDを設定することで、出現するポップアップが変化します。SELECTタグのdata-labelの値に埋め込まれたCLASS名で、アクティブ化されたボタンのデザインを設定します。（CLASS名については上記『デザイン - 種類』参照）

<div class="matomeSelect">
<div class="flexTable">
<select data-label="sub" class="selectBtn lg">
<option value="">選択してください</option>
<option value="madal-targetA">項目A</option>
<option value="madal-targetB">項目B</option>
</select>
<button type="button" data-madal-target="" data-madal-size="" data-madal-scroll="" class="labelType smallHeight is-disabled modalBtn" disabled><span>実行</span></button>
</div>
</div>

吹き出しアイコンボタン

オプションの値に出現させたいポップアップのIDを設定することで、出現するポップアップが変化します。SELECTタグのdata-labelの値に埋め込まれたCLASS名で、アクティブ化されたボタンのデザインを設定します。（CLASS名については上記『デザイン - 種類』参照）

• 追加

  追加
• 複写

  複写
• 削除

  削除

<ul class="flex">
<li><div class="iconBtnWrap"><div  id="tooltip-add" class="fukidashi"  role="tooltip">吹き出しのテキスト</div><button type="button" class="iconType"><span class="add">アイコンのテキスト</span></button></div></li>
<li><div class="iconBtnWrap"><div  id="tooltip-copy" class="fukidashi"  role="tooltip">吹き出しのテキスト</div><button type="button" class="iconType"><span class="copyPlus">アイコンのテキスト</span></button></div></li>
<li><div class="iconBtnWrap"><div  id="tooltip-delete" class="fukidashi"  role="tooltip">吹き出しのテキスト</div><button type="button" class="iconType"><span class="del">アイコンのテキスト</span></button></div></li>
</ul>