サイト制作をする際にメニューにドロップダウンを使うという場面、多いのではないでしょうか？
javascriptやjqueryなどを使用すれば簡単に実装ができますが、実はSEO的にjsで書いたものはGoogleのクロールbotが読み込まない仕様になっているため、あまりよくありません。
ただjs使わないときれいなメニューやドロップダウンが作れない・・・とお思いの方もいらっしゃるのではないでしょうか。
そこで今回はCSSだけで実装出来るオシャレなドロップダウンメニューをご紹介します。
色やフォントを変えるだけでそのまま使ってしまえるので、サイト制作をされる方、ぜひご参考までに。
ZIGZAG DROPDOWN MENU
See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.
RESPONSIVE MENU
See the Pen Simple, CSS only, responsive menu by John Urbank (@jurbank) on CodePen.
HTML & CSS DROPDOWN MENU
See the Pen #CodePenChallenge: Menu by Marco Besagni (@marcobesagni) on CodePen.
GRADIENT MENU
See the Pen #CodePenChallenge – Menu – Gradient Menu by Halida Astatin (@halidaa) on CodePen.
CSS MENU
See the Pen Menu #codepenchallenge by Jenning (@jenning) on CodePen.
CSS DROPDOWN MENU
See the Pen Menu cpc-menus #CodePenChallenge by Vincent Durand (@onediv) on CodePen.
SIMPLE PURE CSS DROPDOWN MENU1
See the Pen Simple PureCss dropdown menu with following subnav by Robert Borghesi (@dghez) on CodePen.
SIMPLE PURE CSS DROPDOWN MENU2
See the Pen Simple Pure CSS Dropdown Menu by Connor Brassington (@connorbrassington) on CodePen.
DROPDOWN MENUS
See the Pen Dropdown Menus by Kevin (@kkrueger) on CodePen.
DROPDOWN MENU
See the Pen CodePen Challenge: Menu by Adam Kuhn (@cobra_winfrey) on CodePen.
FANCY MENU
See the Pen Fancy Menu #CodePenChallenge by Jesus Rodriguez (@J_Enrique) on CodePen.
RECURSIVE HOVER NAVIGATION
See the Pen Recursive Hover Nav ( Only CSS ) by sean_codes (@sean_codes) on CodePen.
COOL DROPDOWN MENU EFFECTS
See the Pen Cool Dropdown Menu Effects Pure Css by Ruslan Pivovarov (@mrspok407) on CodePen.
DROPDOWN MENU
See the Pen Pure Css dropdown menu by Sathish kumar (@sathishlxg) on CodePen.
