echo-toggle
メニューを展開するためのトグルボタンを表示する。
.echo-button.echo-button-square
と同じ高さと幅を持つ。サイズの詳細は.echo-buttonを参照。
aria-expanded
属性を付与する前提となっており、値が true
のときにアイコンがアニメーションを伴い変化する。
aria-expanded = "false"
aria-expanded = "true"
<button class="echo-toggle" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
<button class="echo-toggle" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
sub class echo-toggle-fixed
(breakpoint) に関わらず常に同じサイズとなる。
デザイン等の理由で大きさを変更したくない場合に使用する。
aria-expanded = "false"
aria-expanded = "true"
<button class="echo-toggle echo-toggle-fixed" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
<button class="echo-toggle echo-toggle-fixed" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
sub class echo-toggle-inverse
トグルボタンの色を反転する。包括要素に濃い背景色を指定する必要がある。
aria-expanded = "false"
aria-expanded = "true"
<button class="echo-toggle echo-toggle-inverse" aria-expanded="false" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>
<button class="echo-toggle echo-toggle-inverse" aria-expanded="true" aria-label="Menu"><span class="echo-toggle-line"></span><span class="echo-sr">メニュー</span></button>