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

Feb 27, 2015

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

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

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

実装例

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

例1例2例3例4

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

実装の仕方

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

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

白坂翔
白坂翔

1984年生まれ。ボードゲームカフェJELLY JELLY CAFEオーナー、将棋カフェCOBINオーナー、マーダーミステリー専門店Rabbitholeプロデューサー、株式会社人狼の代表取締役。ポーカーとゴルフが好きです。MORE

あわせてどうぞ

宇多丸の映画批評本「ザ・シネマハスラー」を買いました