プチ ドロワー系バーガーメニュー

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

このページ左側にあるメニューです。

JavaScriptのモジュールと対応するCSSで構成。
最初は汎用性が高かったが、機能追加してゆく過程で設置手順が難解になってしまった。
ユーザーインターフェイスとしては平易なナビなのですが・・・。

後から行ったframesetもどきの対応で、奇天烈難解な太っちょモジュールになってしまった。
framesetもどきは追い出してシェイプアップさる予定です。追い出すと云っても、ドロワーメニュー機能を継承利用した新たなクラスにするつもり。

プチ ドロワーメニューの構成

ドロワーの構成

  • 1.ドロワーをクリックすると開閉*2,*7
  • 2.ハンバーガー(三本線とばってん)がクリックされたらドロワーメニューを開閉*1,*7
  • メニュータトルの縦帯がクリックされたらドロワーメニューを開閉*2,*7
  • ドロワーが開いている時にコンテンツの覆いをクリックするとドロワーを閉じる
  • ドロワーメニュー部分からフォーカスが外れるとドロワーメニューを閉じる*3
  • ドロワーメニュー部分からフォーカスが入ったらドロワーメニューを開く*4
  • メニューが選択されたらドロワーメニューを閉じる*5
  • ドロワーメニューが開いている時にページの覆い*5
  • Window幅842px以上(72dpiの場合のA4長辺サイズ)で左右frameset風に切り替わる*8

HTML要素のクラス属性名でCSSとJavaScriptが連携

HTML⇔CSS⇔JavaScriptはクラス属性名で連携しています。
仕様はコードをリバエンして下さい。
クラス属性名は換えられます。JavaScriptのコードを参照してください。

JavaScriptはmodule

必要に応じてimportして利用できます。
class記述(prototype関数の糖衣構文)ですので、やる気になればページ内の上下左右に複数のドロワーメニューが設置できます。

コード記述

HTMLのコード

HTMLはこのページのソースをリバエンして下さい。
headの抱え込んでいるJavaScript部分に留意してください。
参考ですが、headのJavaScriptの部分や、body中のメニュー部分はincludeして保守性を確保しています。

CSSのコード

cssのコードはこれ
お好みなスタイルで宜しいかと思います。ちょっとコードが長いことと、ゴミ記述が紛れ込んでいるのはご愛嬌です。

JavaScriptのコード

JavaScriptのコードはこれ
100ステップ未満のシンプルなコードなので読解してください。