ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
![CSSで実装するハンバーガーメニュークリック時のエフェクト 10+ - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/32cf955c3c83de2e8ba7a992698cf95b2dbbf75b/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F12-css-hamburger-menu-active-effect.png)
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時(メニューが展開しているときなどのアクティブ時)のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
好みなものや気になるものを見つけてはメモしていたのが結構溜まってきたので、普段からよく利用させてもらっているのも含めて自分の備忘録用でまとめました。 いずれも手書き風デザインに相性が良さそうなフリーフォントで、この手のタイプの中では有名なものから割と新しいものまで和文・欧文それぞれ25種類ずつの全50種類です。 女性や子供が書いたような特徴的なものや可愛らしいタイプのもの、チョークや鉛筆で書かれたようなものまで様々なタイプがあります。 紹介しているフォントは、いずれも利用規約を守れば基本的にフリーで使用することができ、特に和文フォントに関しては全て個人・商用問わず無料で使用できます。 ただ、あくまでこのエントリー公開時の情報ということと中には無料で商用利用可能でも作者に連絡する必要があるフォントもあるので、使用する際はライセンス等を各自で再度確認してください。 紹介しているフォントを使用す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く