#1テーマ 「ドロワー」 サンプルコード
Opened this issue · 4 comments
konitter commented
@w3gjp さんにサンプルコードを用意してもらいました。
https://w3g.jp/sample/jsgirl/drawer
これをベースにみんなもコードを書いてみてほしいです。
ファイルはどこかにアップして、URL含めここに投稿してください。
難易度の調整などを議論していきましょう。
konitter commented
ドロワー作ってみました。IE?なにそれ?
あんまりオリジナル感を出すと比較しづらいので、 @w3gjp さんのやつにだいぶ寄せてます。
メニューボタンにはこだわりました。(え
https://dl.dropboxusercontent.com/u/851158/jsgirls/drawer/index.html
作るうえでのポイントとか適当まとめ。
- ドロワーメニューやメニューボタンとかをを最初から用意しとくか、JSで挿入するか
- それぞれかもしれないけど、個人的には最初から入っててもええんちゃう系
- イベントの発火に、タッチデバイス用にtouch系を使うかどうか
- touch系使えば反応が良いが初心者には難易度高い?(約300ms問題のアレ)
- Win8以降のことを考慮しだすとハマる(IE10とChromeとかのtouch系の仕様の違い)
- スライドアニメーションをJSでやるか、CSSでやるか
- タッチデバイスのことを考えればCSS一択
- ハードウェアアクセラレーション周りの話も?
参加者のレベル感が不透明なのであれだけど、ある程度のHTMLとCSSは用意してあげた方がいいのかなと思いました。
matsuoshi commented
こちらにもURL貼っておきます
http://matsuoshi.github.io/jsg-drawer/
konitter commented
ハンズオン用のファイルセットです。
https://github.com/jsgirls-osaka/handson01-drawer
ドロワーとは
- ドロワーは、スマホサイトやアプリなどでよく見られるUI
- 画面の狭いデバイスにおいて、グローバルナビなどのメニューを画面の右や左に一時的に隠しておき、メインのコンテンツを少しでも多くファーストビューに収まるようにするもの
- ドロワーの開閉には、三本線のアイコンのボタンが多く用いられ、俗に「ハンバーガーアイコン」や「ハンバーガーメニュー」などと呼ばれる
- ハンバーガーアイコンは今でこそ多くのスマホサイトやアプリで使われているが、リテラシーの低いユーザーにとっては、それがなんのためのアイコンであるか伝わりにくい側面があり、アイコンの横に「メニュー」などのテキストを添えたりなど工夫が必要な場合がある
ハンズオン仕様
- 今回はレスポンシブWebデザインの想定で、任意のウィンドウサイズ(ブレークポイントという)でグローバルナビとメニューボタンの表示・非表示を切り替える
- メニューボタンを押したときにドロワーメニューが右から開くように実装してみる
- メニューボタンのイベントは、clickでも良いが、touchstartとか使ったほうがモッサリしない
- スライドアニメーションは、JSでもCSSでもOKだが、CSSでやったほうがスムーズ(ハードウェアアクセラレーション)
- 最低限PCで動かせて欲しいが、できればスマホでも動くように実装・確認してほしい