絶対他力

凡人の凡人による凡人のためのWebサービス開発

ドロワーメニューのCSSを作成しました_PWDD-160125

      2016/03/23

チームPocoです。
ポコ帳ワイヤーフレーム開発日記(PWDD)です。

前回の日記で「メニューのボタン化」ができなくて困ってましたが、なんとか…それっぽい見た目にすることが出来ました。
(ボタン化されたメニューは、「ドロワーメニュー」と呼ぶらしいです)

現時点でのスクリーンショットは、↓な感じです。
※デベロッパーツールの設定:iPhone6
HTMLスクリーンショット

赤い四角がボタンになっていて…
それを押すと、↓のようにメニューが出てきます。
HTMLスクリーンショット

「メニューを出現させた時、そのスペースを作るために周りの要素も一緒に動いてしまう」など…
気になる点はいくつかありますが、かなり見た目がすっきりしたので満足しています。

また、チェックボックスと間接セレクタを組み合わせて使うことで、CSSのみで「ドロワーメニュー」を実現していますが…↓のサイトを参考にして作成しました。

 

ただし、ググって調べた感じだと、ドロワーメニューは「JavaScript」という言語を使って作成するのが普通っぽいです。

しかし、私たちはJavaScriptをまだ勉強しておらず、全く分からないので困っていたところ…上記のサイトを見つけました。

次回は、ボタンの見た目を調整したいと考えています。

また、CSSは↓です。
(長くなる一方ですが…編集するのが面倒なので、全文コピペを続けます)

HTMLは、↓です。

本日のPWDDは以上です。

 - PWDD