スライドメニュー

メニューなど共通的な項目をスライドさせる部品である。 スライドした際には、他の要素をユーザーが誤操作しないように背景(background)を利用して隠蔽する。

マークアップ仕様

任意の場所(表示したいメニュー領域外でも良い)にマーカーCSSクラス nablarch_SlideMenu を指定する。 表示、非表示を切り替える場合に利用するボタンなどは -open 、 -close にjQueryのセレクタを指定する。

指定したopen, close の要素はメニューの表示、非表示によりスタイルを切り替えられるように、クラス属性が追加、削除される。 明示的に要素のstyleプロパティは制御しないため、別途スタイルシートで定義する必要がある。

下記の例では、メニューの表示、非表示でclass属性が変更される点を示す。

• 初期表示のマークアップ

<div class="nablarch_SlideMenu -open #openMenu -close #closeMenu -context div.aside_menu -slideFrom left">
  <span id="openMenu" class="show"><i class="fa fa-bars"></i></span>
  <span id="closeMenu" class="hide"><i class="fa fa-cancel"></i></span>
</div>
<div class="aside_menu hide">...</div>

• openをクリックし、メニュを表示状態に変更した場合

<div class="nablarch_SlideMenu -open #openMenu -close #closeMenu -context div.aside_menu -slideFrom left">
  <span id="openMenu" class="hide"><i class="fa fa-bars"></i></span>
  <span id="closeMenu" class="show"><i class="fa fa-cancel"></i></span>
</div>
<div class="aside_menu show">...</div>

• closeもしくは背景要素をクリックし、メニュー非表示状態に変更した場合

<div class="nablarch_SlideMenu -open #openMenu -close #closeMenu -context div.aside_menu -slideFrom left">
  <span id="openMenu" class="show"><i class="fa fa-bars"></i></span>
  <span id="closeMenu" class="hide"><i class="fa fa-cancel"></i></span>
</div>
<div class="aside_menu hide">...</div>

TouchDeviceのサポート

メニュー領域のスタイルを変更できるよう、 touchイベントをサポートするデバイスでは -context で指定された要素のclass属性に "touchdevice" を追加する。