#1テーマ「ドロワー」サンプルコード

Question

Opened this issue 10 years ago · 4 comments

@w3gjp さんにサンプルコードを用意してもらいました。
https://w3g.jp/sample/jsgirl/drawer

これをベースにみんなもコードを書いてみてほしいです。
ファイルはどこかにアップして、URL含めここに投稿してください。

難易度の調整などを議論していきましょう。

Answer 1 · 2014-06-20T07:38:50.000Z

ドロワー作ってみました。IE？なにそれ？
あんまりオリジナル感を出すと比較しづらいので、 @w3gjp さんのやつにだいぶ寄せてます。
メニューボタンにはこだわりました。（え

作るうえでのポイントとか適当まとめ。

ドロワーメニューやメニューボタンとかをを最初から用意しとくか、JSで挿入するか
- それぞれかもしれないけど、個人的には最初から入っててもええんちゃう系
イベントの発火に、タッチデバイス用にtouch系を使うかどうか
- touch系使えば反応が良いが初心者には難易度高い？（約300ms問題のアレ）
- Win8以降のことを考慮しだすとハマる（IE10とChromeとかのtouch系の仕様の違い）
スライドアニメーションをJSでやるか、CSSでやるか
- タッチデバイスのことを考えればCSS一択
- ハードウェアアクセラレーション周りの話も？

参加者のレベル感が不透明なのであれだけど、ある程度のHTMLとCSSは用意してあげた方がいいのかなと思いました。

Answer 2 · 2014-07-03T10:45:08.000Z

こちらにもURL貼っておきます
http://matsuoshi.github.io/jsg-drawer/

Answer 3 · 2014-07-04T11:12:04.000Z

@konitter さん drawer の配布ベースの作成お願いしても大丈夫ですか???

hanson01-drawer

Answer 4 · 2014-07-05T01:05:56.000Z

ハンズオン用のファイルセットです。

ドロワーとは

ドロワーは、スマホサイトやアプリなどでよく見られるUI
画面の狭いデバイスにおいて、グローバルナビなどのメニューを画面の右や左に一時的に隠しておき、メインのコンテンツを少しでも多くファーストビューに収まるようにするもの
ドロワーの開閉には、三本線のアイコンのボタンが多く用いられ、俗に「ハンバーガーアイコン」や「ハンバーガーメニュー」などと呼ばれる
ハンバーガーアイコンは今でこそ多くのスマホサイトやアプリで使われているが、リテラシーの低いユーザーにとっては、それがなんのためのアイコンであるか伝わりにくい側面があり、アイコンの横に「メニュー」などのテキストを添えたりなど工夫が必要な場合がある