スマホサイトのハンバーガーボタンはクリックしたらバッテンになるべき

Feb 27, 2015

スマホサイトでよく見かけるハンバーガーボタン(←これのこと)。

メニュー開閉ボタンとして使うことが多いと思いますが、このボタンをクリックした後、「どこを押せばメニューを閉じられるか分からない!!」というユーザーは意外と多いようです。

そんな問題を解決する一番スマートな方法は、「クリックしたらバッテンになる」だと思っているのですがいかがでしょうか。

実装例

自社で作ったサイトで実装した例です。クリックしてご確認いただけます。

例1例2例3例4

クリックされるとハンバーガーのパティがフェードアウトしつつバンズがクロスしてCLOSEボタンになります。CSS3のアニメーションを使っています。

実装の仕方

下記よりご確認ください。

「ハンバーガーボタン アニメーション」Let me google that for you

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

あわせてどうぞ

マックのレジの所のメニューが無くなってた。