MENU
カテゴリー
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

【コピペ可】ハンバーガーアイコンのサンプル集を作ってみた

ハンバーガーボタンアイコン

どうも、ダイチです。

今回はスマホ向けのWebサイトやアプリケーションで採用されることの多いハンバーガーメニューについて、アニメーションのパターンをいくつか紹介します。

CODE PENにまとめてるので、気になるパターンがあったら参考にしてみてください。

細かい解説が知りたい方は、先に下記記事をご覧ください。

あわせて読みたい
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)どうも、ダイチです。今回はスマートフォンやタブレット向けのWebサイトで採用されることの多いナビゲーションUI「ハンバーガーメニュー」の作り方をまとめました。最近...
目次

バーガーボタン

バツ印に変化

真ん中の線はbackground-color: transparentで消しています。

上下線はそれぞれ45°ずつ傾けることでバツ印になるようにしています。

See the Pen OJMQOxM by DAICHI (@03daichi18) on CodePen.

くるっと一回転してバツ印に変化

上下の線をそれぞれ135°傾けることで上のパターンより動きを大きく見せています。

See the Pen MWKQOqV by DAICHI (@03daichi18) on CodePen.

プラスに変化

色々指定の仕方はあると思いますが、下記の方法は片方の線を180°傾けて横線に、もう片方は270°傾けて縦線にすることで+になるように動かしています。

See the Pen PoZQOOZ by DAICHI (@03daichi18) on CodePen.

三本線が一本になる

上下の線にtransform: translateYで指定していた高さをそれぞれ0にすると真ん中に重なり一本の線となります。

See the Pen pogadqa by DAICHI (@03daichi18) on CodePen.

回転して一本になる

上下の線をtransform: rotate(180deg)で指定すると半回転します。

そうすると起点の真ん中の線に重なり一本の線になります。

See the Pen WNrMXPE by DAICHI (@03daichi18) on CodePen.

左向き矢印に変化

上下の線の幅を変え、かつ、transform: translateとrotateを同時に指定することで矢印の形に変形させています。

See the Pen BajYmEW by DAICHI (@03daichi18) on CodePen.

バツ印の周りを円で囲む

外枠btnクラスの擬似要素に対して透明な円を指定し、openクラスがついたら線に色をつけて表示させています。

See the Pen ZEQrvzq by DAICHI (@03daichi18) on CodePen.

三本線が斜めにずれる

上下の線に対してtransform: translateで横移動をさせています。

See the Pen vYLdpyX by DAICHI (@03daichi18) on CodePen.

ボタン内テキストが変化

背景色をつけ線を描写せず、擬似要素content内に「menu」と記述しています。

メニュー表示時はcontent内を「close」と書き換えています。

See the Pen xxZYLYw by DAICHI (@03daichi18) on CodePen.

ナビゲーションメニュー

基本的にはメニューの初期位置次第でどうとでもなる、というやつです。

右から表示させたければpositionでright-100%、左から表示させたければleft-100%にしておく。

jQueryのtoggleClassメソッドでクラスをつけてposition位置を0にすると、その方向に動いて表示されるように見えます。

左から表示

See the Pen wvMypdp by DAICHI (@03daichi18) on CodePen.

上から表示

See the Pen ExPQovY by DAICHI (@03daichi18) on CodePen.

全画面に表示

アニメーションをつけてませんが、これはvisibility: hiddenで初期状態を非表示にして、visibility: visibleで表示させるようにしています。

See the Pen vYLdpeg by DAICHI (@03daichi18) on CodePen.

まとめ

いかがでしたでしょうか?

ハンバーガーメニューは作成工程が若干多く、メンドウだなと感じることがありますが、実装パターンを知っておけば使い回しできます。

もし知らない方法などあればこの記事内の方法もコピペして使っちゃってください。

あわせて読みたい
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)
【レスポンシブ対応】ハンバーガーメニューの作り方解説(jQuery)どうも、ダイチです。今回はスマートフォンやタブレット向けのWebサイトで採用されることの多いナビゲーションUI「ハンバーガーメニュー」の作り方をまとめました。最近...

今回は自分がストックしていた簡単な方法だけ紹介していますが、オシャレなWebサイトを見て自分でも表現パターンを勉強するのも重要です。


また、この記事に辿り着いた方はコーディング学習中の方も多いかと思います。

デザインやコーディングの基礎知識を学びたい方向けに、書籍とUdemy、それぞれのオススメ教材をまとめてますので良かったら参考にしてみください!

あわせて読みたい
【書籍紹介】Web制作を学べるオススメ書籍紹介!
【書籍紹介】Web制作を学べるオススメ書籍紹介!どうもダイチです!今回はWeb制作関連のオススメ書籍を紹介します!オンライン学習サービスなどは多くありますが、知識を体系的に学ぶんだったら本が一番確実です。とは...

※Udemyはセール期間になればサイト内でお知らせします!

あわせて読みたい
【Udemy】Web制作学習のオススメ講座紹介!
【Udemy】Web制作学習のオススメ講座紹介!当記事では動画学習教材「Udemy」について、Web制作に関連するものを紹介します!Webデザインやプログラミングの優良な学習教材も数多くありますが、どれを選んだらいい...

それでは今回はこのへんで!

ハンバーガーボタンアイコン

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

コメント

コメントする

CAPTCHA


目次
閉じる