【完全オリジナル改訂版】Vueフロントエンジニアがおすすめ！迷わないナビゲーションバーエフェクトまとめ２３選

[![スクリーンショット 2020-07-12 20.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/5aabf089-9e2f-ebbf-9805-f676ca426cf3.png)
](https://www.twinzlabo.com/category/css%e3%82%a2%e3%83%8b%e3%83%a1%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3-%e3%82%a8%e3%83%95%e3%82%a7%e3%82%af%e3%83%88/)

こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○


---
##【直感的デザイン】cssで作るナビゲーションバーエフェクト３選

**動きは下の画像のような感じになります**

###１. hoverしたボタンのみ背景色で強調するナビゲーションバーデザイン

![css-navbar-animation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8e1ce356-58b8-5ed0-5747-146493d8cd65.png)


###２. 円を描くように720度回転＋拡大ナビゲーションバーデザイン

![css-navbar-animation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c1253a14-0880-7e02-4c0f-b3812bbd3d67.png)


###３. 360度横回転しながら拡大する直感的なナビゲーションバーデザイン

![css-navbar-animation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/82d9b5b2-92d3-b3b8-edbf-ff663dd76551.png)



---
##transform:rotate(X,Y,Z,3d)で回転するナビゲーションバー４選

**動きは下の画像のような感じになります**

###１. transform:rotateXとscaleで縦回転するナビゲーションバーデザイン

![transform-rotate-xyz3d-navbar1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/20799810-6a73-e32e-8f1f-586d55ee99bf.png)


###２. transform:rotateYとscaleで横回転するナビゲーションバーデザイン

![transform-rotate-xyz3d-navbar2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/804f73b8-1e19-ca07-8507-697abe85f963.png)


###３. transform:rotateZとscaleでくるっと回転するナビゲーションバーデザイン

![transform-rotate-xyz3d-navbar3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2a95ec0a-8c0b-8292-4e8f-5db051392606.png)


###４. transform:rotate3dとscaleで立体感のあるナビゲーションバーデザイン

![transform-rotate-xyz3d-navbar4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/fb66d4c3-e7e1-d0e1-dc53-c966815768e4.png)



---
##【CSSで作る】動くシンプルなナビゲーションバーデザイン３選

**動きは下の画像のような感じになります**

###１. ちょっとエフェクト効いてるよくありがちなナビゲーションバーデザイン

![navigation-simple-design1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/6e8c521f-c472-f696-259b-1b39eb2c6f66.png)


###２. くるっと回転してちょっと楽しいナビゲーションバーデザイン

![navigation-simple-design2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cdf76963-5065-229f-1a3f-86fd2208091b.png)


###３. 斜めに伸びてかわいいナビゲーションバーデザイン

![navigation-simple-design3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3a575227-572f-4f82-86cc-366098081f45.png)



---

##ヘッダーデザインにコピペで使えるナビゲーションメニュー４選

**動きは下の画像のような感じになります**

###１. ヘッダーで使いやすいシンプルなナビゲーションメニュー

![header-design-navigation-animation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c4447373-98c6-06c3-b6f4-e8cde0f7f283.png)

###２. ボタンが滑らかに拡大するかわいらしいナビゲーションメニュー

![header-design-navigation-animation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d169fd94-4c9d-4749-70fd-4d6fc715608b.png)

###３. ボタンが縮小しながら立体的に浮き出るナビゲーションメニュー

![header-design-navigation-animation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/15d59959-192d-67ad-0a46-d33bb2b3acee.png)

###4. ボタンが凹みながら縮小する超動くナビゲーションメニュー

![header-design-navigation-animation4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/801aed57-1652-362b-73f3-22ff046400e7.png)


---
##マウスオーバーでドロップダウンするナビゲーションメニュー３選

**動きは下の画像のような感じになります**

###１. ドロップダウンするシンプルなナビゲーションメニュー

![hover-animation-navigation-dropdown1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b437baac-1c2a-6cc6-30b5-20ed84961405.png)

###２. ボタンが浮く！独特でかわいいナビゲーションメニュー

![matereal-design-navigation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/9eb0ae81-7c8d-594d-eec4-41810c059013.png)

###３. マウスオーバーでドロップダウン！UIナビゲーションメニュー

![hover-animation-navigation-dropdown3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0bb61f59-e677-6f9e-305e-af349823dfe0.png)


---
##絶対失敗しないナビゲーションメニューサンプル３選

**動きは下の画像のような感じになります**

###１. hoverするとボタンが浮き上がるナビゲーションメニュー

![matereal-design-navigation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7e613a70-9642-fa0a-22aa-c6859552efee.png)

###２. hoverするとボタンが凹むナビゲーションメニュー

![matereal-design-navigation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3bee3b2f-9b8e-cf30-29af-5cb4f9b9b1f9.png)


###３. hoverするとボタンが立体的に浮き出るナビゲーションメニュー

![matereal-design-navigation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0769fa4f-19a4-73f5-6443-3ad1c9ead9e8.png)



---
##初心者でも簡単！動きのあるナビゲーションバーデザイン３選

**動きは下の画像のような感じになります**

###１. マウスオーバーで文字が太くなるナビゲーションバーデザイン

![navigation-bar-animation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/fb1d6ba0-bbfa-2ad9-be20-27261584e6bf.png)


###２. マウスオーバーで文字が傾くナビゲーションバーデザイン

![navigation-bar-animation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/aedc17b0-35b0-c5d2-cd1e-8a639247bb59.png)


###３. transform: skew＋hoverでシンプルなナビゲーションバーデザイン

![navigation-bar-animation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/15b88309-c7d7-8259-5252-e0385f341cd8.png)