このページ左側にあるメニューです。
JavaScriptのモジュールと対応するCSSで構成。
最初は汎用性が高かったが、機能追加してゆく過程で設置手順が難解になってしまった。
ユーザーインターフェイスとしては平易なナビなのですが・・・。
後から行ったframesetもどきの対応で、奇天烈難解な太っちょモジュールになってしまった。
framesetもどきは追い出してシェイプアップさる予定です。追い出すと云っても、ドロワーメニュー機能を継承利用した新たなクラスにするつもり。
プチ ドロワーメニューの構成
ドロワーの構成
- １．ドロワーをクリックすると開閉*2,*7
- ２．ハンバーガー(三本線とばってん)がクリックされたらドロワーメニューを開閉*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ステップ未満のシンプルなコードなので読解してください。