ハンバーガーメニュー「三」が「☓」にトランスフォームするアレ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

何故、日本のpodcastのIT系ジャンルのモノには、おっさんが淡々とつぶやいていたり、聴いている側を無視したテンションでのいわゆるオタク受けするモノしかないんだろう???となんとなく不満を感じている下駄です。
 

ITに強い人はどうしても見た目もコミュニケーションも弱い人が多いのも事実で、そうした人達の集まる飲み会に参加すると、どの言語を使っているかという探り合いから、自分がどれだけすごい経験をしたか(どれだけコアな技術を扱ったか)というマウントの取り合いが、非常に嫌で、数人いる中でマウントを取れた人のドヤ顔が非常に見るに耐えられない感覚なんです。
 

悪口ばかり言ってすみません・・・
 

一つ言えるのは同年代かどうかというのもあり、おそらく別年代から見た下駄は、同じ様に見られているんでしょうね・・・
 

スマホが市民権を得て、政府もスマホアプリで災害情報サイトなどを構築してそれに対する助成金などをばらまいているのですが、そんなスマートフォンにハンバーガーメニューを付ける事に抵抗がかなり無くなってきました。
 

今回は、そんなハンバーガーメニューのデモを作ったので、ソースコードとサンプル(デモ)を掲載しておきます。

ハンバーガーメニュー

今やwikipediaにも掲載されているハンバーガーメニューボタンですが、スマートフォンが出てきてから作られたと思っていたら、かなり昔からインターフェイスアイコンとして存在していたんですね。(知らんかった・・・)
 

https://ja.wikipedia.org/wiki/%E3%83%8F%E3%83%B3%E3%83%90%E3%83%BC%E3%82%AC%E3%83%BC%E3%83%9C%E3%82%BF%E3%83%B3
 

正確には「折りたたみボタン」というんですが、3つの線をハンバーガーというところなどはアメリカンな感じがして、当時非常におもろかったのを覚えています。
 

スマホ登場初期の頃に、ヘッダメニューにこれを設置したら、「このボタンの意味がわからない」と外すように支持された事もよく覚えています。
 

確かに一目見て、内容を理解させられるアイコンってすごいインターフェイスの一因を担っているということがその時に理解できたんですが、一度市民権を得られると、色々なバージョンも発生してきて、いまでは、ハンバーガーメニューをクリックすると、メニューが表示されて、そのメニューのバツボタンに変形するというケースが非常に多く増えているように感じます。
 

とある会社のホームページを作る時に、その仕様を求められて作ってみたので、転記も簡単に作ったので、ソースコードを掲載しておきますね。

ソース

 

デモ

See the Pen
Humbarger menu
by YugetaKoji (@geta1972)
on CodePen.

あとがき

残念ながら、cssだけで完結しなかったので、jsを使ったバージョンなのですが、サイトの配置したい箇所に、HTMLを突っ込んで貰えれば動作すると思います。
 

ただ、メニューリストの表示や、閉じる処理、カラーバランスなどは、自己責任にて、ご使用ください。
 

こういう話を飲み会でしても、盛り上がるか盛り上がらないかはあなた次第・・・

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です