グローバルナビゲーションといえば作り込んだ感じのデザインや移動先のページの内容が把握しやすいようなアイコンなどを一緒に配置しているものをやはり多く見かけますが、中には特にミニマルデザインなサイトなどでテキストだけを並べたシンプルな水平メニューを取り入れているサイトもあります。ただパッと見はたしかにシンプルなデザインでもホバー時にアニメーションを加えたりしているサイトも多く、自分も普段からそのようなデザインの時にはせめてホバーぐらいはちょっと手を加えたいなと思うことが多いので、その際に参考になりそうなホバーエフェクトを備忘録兼ねてまとめました。全体的にボーダーを組み合わせたようなエフェクトが多く、実装は全てCSSで可能なものになっています。
※このページに表示しているものも含め、紹介しているサンプルはPCなどで閲覧したほうが動きの確認がしっかりできます。
少し前のものですが全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 #1198 – Menu vertical line effect on hover by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1231 – Menu with scissors style hover effect by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1189 – Horizontal menu items by LittleSnippets.net (@littlesnippets) on CodePen.
See the Pen #1164 – Menu with slide down hover effect by LittleSnippets.net (@littlesnippets) on CodePen.
その他のエフェクトについては以下で確認することができます。
See the Pen Blurry Menu by Joe Hana (@JoeHana) on CodePen.
こちらはこれまでのとは少し違ったタイプで、ホバーしている以外のナビゲーションにブラーエフェクト（ぼかし）がかかるというものです。
上で紹介したものに比べるとより簡易的なものになりますが、このブログでも以前テキストリンクに使えそうなエフェクトを幾つかまとめており、文字の拡大や回転、背景色のスライド表示など全15種類紹介しています。