トグルボタンとは

トグル(ボタン)とは、ひとつのボタンで、「開く・閉じる(オン・オフ)」の切り替え操作が実現できるスイッチのようなものを指します。電気のスイッチなど、身の回りにもたくさんトグルボタンがあり、誰もが普段の生活の中から、トグルスイッチとして、利用しているのです。トグルスイッチは、ボタンとして、ウェブサイト上に利用されています。スマホの場合、指先で操作するので、できるだけ押しやすくわかりやすく配置することが重要です。ボタンを、クリック及びタップをするとメニューが展開し、さらに同じ動作をすると展開していたメニューを閉じることができる優れたボタンです。

名称の種類

ハンバーガー
スマートフォンでよく見かけるメニューを開閉する三本ラインのメニューボタン。その見た目から、「ハンバーガーメニュー」などとも、呼ばれています。
ドロワー
また、「ドロワーメニュー」と呼ばれることもあります。ドロワー(引き出し)という意味です。三本ラインの中に、コンテンツメニューを集約することから、あたかも引き出しのように捉えられています。
(呼称の違いはあっても、実際同じものを指していますので、捉え方にご注意ください。)

作成方法

トグルボタンは、様々な手法が使われています。代表的なものでは、font-awesomeで表現するトグルボタン、CSSで実装するトグルボタン、その他プラグインを利用して実装できるものなどがあります。どの手法を使っても、見た目は、あまり変わりがありません。
トグルボタンをクリックした後、【×】になる、あるいは変わらない、【三】から【×】に変化する際のアニメーションなど、様々な演出があります。ユーザーにわかりやすくする、操作が楽しいなどのメリットはありますが、コンテンツへ誘導させることが本来の目的なので、演出にこだわる必要性は、特にありません。

▶ 【作ってみる実践編】

CSSで作るトグルボタン

● font-awesomeの場合は、こちらで解説しています。
【仕上がりサンプル】http://cocohp.com/menu/001/font_awesome/

● プラグインDrawerを使って実装する手法は、こちらで解説しています。