シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ

  • Posted on
  • Category : Tips
シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ

グローバルナビゲーションといえば作り込んだ感じのデザインや移動先のページの内容が把握しやすいようなアイコンなどを一緒に配置しているものをやはり多く見かけますが、中には特にミニマルデザインなサイトなどでテキストだけを並べたシンプルな水平メニューを取り入れているサイトもあります。ただパッと見はたしかにシンプルなデザインでもホバー時にアニメーションを加えたりしているサイトも多く、自分も普段からそのようなデザインの時にはせめてホバーぐらいはちょっと手を加えたいなと思うことが多いので、その際に参考になりそうなホバーエフェクトを備忘録兼ねてまとめました。全体的にボーダーを組み合わせたようなエフェクトが多く、実装は全てCSSで可能なものになっています。

2016年1月6日 追記
「Inspiration for Line Menu Styles」を追記しました。

※このページに表示しているものも含め、紹介しているサンプルはPCなどで閲覧したほうが動きの確認がしっかりできます。

Creative Link Effects

少し前のものですが全21種類のエフェクトがまとめられており、ボーダーやテキストにアニメーションを加えて様々な見せ方を実装しています。

See the Pen Navigation Animation by EvyatarDa (@EvyatarDa) on CodePen.

上で紹介した「Codrops」からインスピレーションをもらっているものなので似たようなエフェクトも多いですが、全15種類のエフェクトがまとめられています。

See the Pen Cool CSS3 Link Ideas by Brenden Palmer (@brenden) on CodePen.

シンプルにボーダーを引きたいだけであれば、こちらがひと通りのものが揃っているのでおすすめです。
左から、中央から、上下に、全体を囲むなど全10種類です。

See the Pen mVVzEv by Sebastian Bailey (@sebcglbailey) on CodePen.

Menus Archives – LittleSnippets.net

ホバーエフェクトを中心に様々なスニペットが集まっている「LittleSnippets.net」では、メニューで使えそうなエフェクトも多数まとめられています。
数が数なので全部は紹介できませんが、例えば以下のようなものがあります。

See the Pen #1284 – Menu by LittleSnippets.net (@littlesnippets) on CodePen.

See the Pen #1189 – Horizontal menu items by LittleSnippets.net (@littlesnippets) on CodePen.

その他のエフェクトについては以下で確認することができます。

See the Pen Blurry Menu by Joe Hana (@JoeHana) on CodePen.

こちらはこれまでのとは少し違ったタイプで、ホバーしている以外のナビゲーションにブラーエフェクト(ぼかし)がかかるというものです。

テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15

上で紹介したものに比べるとより簡易的なものになりますが、このブログでも以前テキストリンクに使えそうなエフェクトを幾つかまとめており、文字の拡大や回転、背景色のスライド表示など全15種類紹介しています。

Inspiration for Line Menu Styles

正確にはホバーエフェクトではなくクリックした際のエフェクトですが、上のイメージのようにラインを用いたかっこいいエフェクトが多数紹介されています。

Back to Top

シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ

シンプルな水平メニューと相性が良さそうな、CSSホバーエフェクトのまとめ

/ Tips

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。