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

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

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

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

実装例

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

例1・例2・例3・例4

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

実装の仕方

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

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