ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。
今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。
コンテンツ目次
- 1. アコーディオンメニュー
- 2. サークル型ナビメニュー
- 3. ドロップダウンメニュー
- 4. フルスクリーンメニュー
- 5. 水平型ナビメニュー
- 6. モバイルメニュー
- 7. Off-Canvas ナビメニュー
- 8. トグル型ナビメニュー
- 9. スライド式ナビメニュー
アコーディオンメニュー
Swanky Pure CSS Drop Down Menu
HTMLとCSSのみで表現できるドロップダウンメニュー。
See the Pen Swanky Pure CSS Drop Down Menu V2.0 by Jamie Coulter (@jcoulterdesign) on CodePen.
Accordion Menu
シンプルで使い勝手の良いアコーディオン型ナビゲーションメニュー。
See the Pen Accordion menu by JuliaRietveld (@MrsColombo) on CodePen.
Accordion DropDown Menu
クリックで展開するアコーディオン型ドロップダウンメニュー。
See the Pen Menú despegable estilo acordeón | Accordion Menu by Agustin Ortiz (@Creaticode) on CodePen.
Side Accordion Menu
サイドバーに最適なアコーディオン型ナビメニュー。
See the Pen Accordion Menu by Benjamin (@maggiben) on CodePen.
Only CSS3 Dropdown Menu
CSS3のみでスタイリングし、ボヨンとしたエフェクトを加えています。
See the Pen Only CSS3 Dropdown Menu by Pedro Nauck (@pedronauck) on CodePen.
Flat Vertical Navigation 2.0
Font Awesome と Animate.css を利用した、実践的な垂直ナビゲーションメニュー。
See the Pen Flat Vertical Navigation 2.0 by Andy Tran (@andytran) on CodePen.
Flat Vertical Navigation
シンプルなフラットスタイルのドロップダウンメニュー。
See the Pen Flat Vertical Navigation by Andy Tran (@andytran) on CodePen.
サークル型メニュー
Simple Radial Menu
ハンバーガーメニューをクリックすると、円形にSNSアイコンが展開します。
See the Pen Simple radial menu by Nikolay Talanov (@suez) on CodePen.
Colorful Flower Popup Menu
ポップアップ表示されるナビメニューは、花びらのように次々に展開していきます。
See the Pen Colourful Flower Popup Menu by Jordan LaChance (@jordanlachance) on CodePen.
Warp Drive! A Pure CSS 3D Radial Menu
近未来的なアニメーションをCSSのみで表現した新型ナビメニュー。
See the Pen Warp Drive! A pure CSS 3D Radial Menu by Jamie Coulter (@jcoulterdesign) on CodePen.
Gooey Menu
CSSとSVGフィルターで作成されあた、ぬるりと展開するナビメニュー。
See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.
Pure CS Circle Menu
中心部分をクリックするとふわりとアイコンが表示されるサークル型メニュー。
See the Pen Pure CSS Circle Menu by Hadar Weiss (@hadarweiss) on CodePen.
CSS Radial Menu
中心のハンバーガーメニューをホバーすると、画像イメージが表示されます。
See the Pen CSS radial menu by web-tiki (@web-tiki) on CodePen.
Circular Menu
マウスホバーすると各メニューを標識のように展開するユニークなスタイル。
See the Pen Circular Menu by Andrew Myers (@maskedcoder) on CodePen.
Radial Menu
HTMLとCSS、そしてわずかなJSを加えることで、360度全方向に展開するナビメニュー。
See the Pen Radial menu by Carlos (@bartoloxs) on CodePen.
Animated Radial / Circular Menu
See the Pen Animated radial / circular menu by Creative Punch (@CreativePunch) on CodePen.
Pure CSS Spin-out Menu
メニューにホバーすると回転しながら複数のコンテンツが展開されるサークル型メニュー。
See the Pen Pure CSS “Spin-out” Menu by Billy Crist (@billyysea) on CodePen.
Circular Links Menu (Responsive)
レスポンシブにも対応した、ダイアル式のホバーメニューエフェクト。
See the Pen circular links menu (responsive) by Rachel Smith (@rachsmith) on CodePen.
ドロップダウン型メニュー
Simple Pure CSS Dropdown Menu
マウスホバーで展開するシンプルで使い勝手の良いメニュースタイル。
See the Pen Simple Pure CSS Dropdown Menu by Connor Brassington (@connorbrassington) on CodePen.
Dropdown Navigation
テキストホバーエフェクトや矢印型ドロップダウンなど、細部にこだわりを魅せたスタイル。
See the Pen Dropdown Navigation by Ryan Morr (@ryanmorr) on CodePen.
Simple Pure CSS Dropdown Menu with Following Subnav
ナビメニューの親要素にマウスホバーすることで、サブメニューがするりと上部から登場するスタイル。
See the Pen Simple PureCss dropdown menu with following subnav by Robert Borghesi (@dghez) on CodePen.
A Simple Dropdown Menu
See the Pen A simple Dropdown Menu by Mike Rojas (@mikerojas87) on CodePen.
Dropdown Menus
マウスホバーするとアニメーション付きで展開するドロップダウン型メニュー。
See the Pen Dropdown Menus by Kevin (@kkrueger) on CodePen.
Zigzag Dropdown Menu Concept
ナビメニューをジグザグ上に表示するコンセプトデザイン。
See the Pen Zigzag dropdown menu concept by Catalin Rosu (@catalinred) on CodePen.
Simple CSS Only Responsive Menu
HTML/CSSのみで作成されたシンプルナビメニュー。
See the Pen Simple, CSS only, responsive menu by John Urbank (@jurbank) on CodePen.
フルスクリーン型メニュー
Material Design Menu
Googleのマテリアルデザインをコンセプトにしたスタイル。
See the Pen Material Design Menu by Arjan Jassal (@arjancodes) on CodePen.
Burger Menu Mobile Optimized
モバイル用に最適化されたフルスクリーン型メニュー。
See the Pen Burger Menu. Mobile Optimized. Modal. by Christopher Mally (@Papawhoop) on CodePen.
Velocity.js Fullscreen Flexbox Overlay Navigaton
Flexboxレイアウトを活用した、アニメーション豊かなナビメニュー。
See the Pen Velocity.js fullscreen flexbox overlay navigation by Mirko Zorić (@fluxus) on CodePen.
Full Page Off-Canvas Navigation
ページ横からスライド式で展開するフルスクリーン型ナビメニュー。
See the Pen Full Page Off-Canvas Navigation by Caleb Varoga (@calebv) on CodePen.
Fullscreen Menu Flexbox Method
See the Pen Fullscreen Menu Flexbox Method by Marcus Hall (@flurrd) on CodePen.
Pure CSS Fullscreen Navigation Menu
中心からサークル上に徐々に広がるフルスクリーン型メニュー。
See the Pen Pure CSS Fullscreen Navigation Menu by Brenden Palmer (@brenden) on CodePen.
CSS3 + jQuery Fullscreen Menu
各メニューにホバーすると背景をバックにハイライトで表示するテクニック。
See the Pen CSS3 + jQuery Fullscreen Menu by Anton Petrov (@apetrov) on CodePen.
Fullscreen Navigation
4種類のさまざまなパネル展開方法を活用したナビメニュースタイル。
See the Pen Fullscreen Navigation by ari (@tari) on CodePen.
Fullscreen Navigation
ハンバーガーメニューからサークル状に広がるフルスクリーンメニューは、多彩なアニメーションにも注目です。
See the Pen Fullscreen Navigation by Marcus Bizal (@marcbizal) on CodePen.
Full Screen Navigation Using SVG
メニューをクリックするとカーテン状に上から下に各リストが表示されます。
See the Pen Full Screen Navigation Using SVG by Anas Ashraf (@tossedwarrior) on CodePen.
Explosive Menu
メニューボタンをクリックするとカラフルに爆発しながら展開するナビメニュー。
See the Pen Explosive Menu by Harris Carney (@HarrisCarney) on CodePen.
Full-Screen Menu Overlay
上下左右からメニューが展開されるフルスクリーン型ナビメニュー。
See the Pen Full-Screen Menu Overlay by Ettrics (@ettrics) on CodePen.
Full-Screen Navigation
左から右にスライド式で展開するフルスクリーン型メニュー。
See the Pen Full-Screen Navigation by Anas Ashraf (@tossedwarrior) on CodePen.
Fullscreen Menu | Type 1
フルスクリーンで表示するときにアニメーションを加えることで、よりエレガントな仕上がりに。
See the Pen Fullscreen Menu | Type #1 by Paul van Oijen (@PaulVanO) on CodePen.
Animated Menu
フルスクリーン型メニューをはじめて試すときに活用したい、シンプルなブループリント的テンプレート。
See the Pen Animated Menu by Una Kravets (@una) on CodePen.
水平型ナビメニュー
A Clean Navigation Slider
各リンクに移動するたびユニークなスライダーエフェクトを追加しています。
See the Pen A clean navigation slider by Roemerdt (@Roemerdt) on CodePen.
Icon Navigation
ふわりとしたドロップシャドウを再現したアイコン付きナビゲーションメニュー。
See the Pen Icon Navigation by Marco Biedermann (@marcobiedermann) on CodePen.
Colorful Navigation
マウスホバーに合わせてドット点が移動し、リンクカラーに合わせて変化します。
See the Pen Colourful navigation by Lewi Hussey (@Lewitje) on CodePen.
Slide-Menu 2
See the Pen Slide-Menu 2 by Aaron Benjamin (@abenjamin) on CodePen.
Navigation Effects
7種類のホバーエフェクトを再現したナビメニューセット。下方向にスクロールすることで全てを確認できます。
See the Pen Navigation Effects by Dominik Biedebach (@d2k) on CodePen.
Skewed Menu
斜め方向のスリットラインを活用したナビメニュー。
See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.
Simple Menu Navigation
マウスホバーで各リンクを拡大するアニメーションエフェクト付き。
See the Pen Simple Menu Navigation by Karim Balaa (@karimbalaa) on CodePen.
Transparet Fading Navigation Bar
左右両サイドをフェードアウトさせた半透明ナビメニュー。
See the Pen Transparent Fading Navigation Bar by MrPirrera (@pirrera) on CodePen.
CSS3 Responsive Menu Effect
レスポンシブに対応でき、各リンクごとに背景カラーが切り替わるアニメーションも◎。
See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.
モバイルメニュー
Animated Navigation
左端からポップアップでサークル状に表示されるモバイル向けナビメニュー。
See the Pen Animated Navigation by Greg Hovanesyan (@gregh) on CodePen.
Secret UI Project
See the Pen Secret Project by Mohan Khadka (@khadkamhn) on CodePen.
Filter Menu
マテリアルデザインに採用されているスタイルを再現したナビメニュー。
See the Pen Filter Menu by Arjun Amgain (@arjunamgain) on CodePen.
App Navigation
各リンクが重なるように表示される立体感のあるナビメニュー。
See the Pen App Navigation by Ian Turner (@iamturner) on CodePen.
Mobile Navigation Animation
斜めラインで画面全体が展開するモバイル向けナビメニュー。
See the Pen Mobile navigation animation by Karlo Videk (@karlovidek) on CodePen.
SVG UI Navigation Concept
See the Pen SVG UI Navigation Concept by Alex Permyakov (@alexdevp) on CodePen.
Gooey Mobile Navigation
モバイルスクリーンの下に配置することで、操作性をうまく考慮したアイコン型ナビメニュー。
See the Pen Gooey mobile navigation by BjurhagerStudios (@Bjurhager) on CodePen.
Mobile Navigation #1
左からスライドしながら展開する、デスクトップにも対応できるナビメニュー。
See the Pen Mobile Navigation #1 by Paul van Oijen (@PaulVanO) on CodePen.
Frosty Nav Toggle Effect
メニューアイコンをクリックすると、背景にぼかしを加えた状態で各リンクが表示されます。
See the Pen Frosty Nav Toggle Effect by Graham Wilsdon (@GrahamWilsdon) on CodePen.
Menu 1
See the Pen Menu 1 by Virgil Pana (@virgilpana) on CodePen.
Touch Device Jelly Menu Concept
スクロールしながら各リンクを選択しようとすると、ゼリーのようなプルルンとしたエフェクトが実装されています。
See the Pen Touch device jelly menu concept by LegoMushroom (@sol0mka) on CodePen.
Bounce Menu
左下からボヨンと弾みながら展開するモバイル向けナビメニュー。
See the Pen Bounce Menu by Matt Hoiland (@matthoiland) on CodePen.
オフキャンバス型メニュー
Side Menu Animation with Burger Icon
滑らかな動きが特長のオフキャンバスメニュー。
See the Pen Side menu animation with burger icon by Maxime (@maximeP) on CodePen.
CSS3 Side Panel with Menu
CSSのみで実現できるスライドパネル型メニュー。
See the Pen CSS3 side panel with menu by Darren Huskie (@Huskie) on CodePen.
Offcanvas Sidebar menu with a Twist
通常のナビメニューにひねりを加えた、立体的な動きを表現したコンセプト。
See the Pen Offcanvas sidebar menu with a twist by Devilish Alchemist (@devilishalchemist) on CodePen.
Off Canvas Menu
クリックすると上部からするりと各リンクが登場するオフキャンバスメニュー。
See the Pen Off canvas menu by Mark Murray (@markmurray) on CodePen.
Material Design Navigation
ページを重ねたようなスタイルが特長のシンプルで、清潔感のあるナビメニュー。
See the Pen Material design navigation by Lewi Hussey (@Lewitje) on CodePen.
Pure CSS Off-Screen Navigation Menu
CSSのみで実装可能となっており、シンプルな構造はさまざまなサイトデザインにも使いやすいでしょう。
See the Pen Pure CSS Off-Screen Navigation Menu by SitePoint (@SitePoint) on CodePen.
Fixed Flyout / Off-Canvas Navigation
横からスライド式で各リンクが展開し、アニメーションを加えることでより滑らかな動きを表現しています。
See the Pen Fixed Flyout/Off-Canvas Navigation by Colin (@cmcg) on CodePen.
Fixed Hover Navigation
左側に固定されたナビメニューは、マウスホバーで展開するスタイル。
See the Pen Fixed Hover Navigation by Vince Brown (@Vince_Brown) on CodePen.
Fully Responsive CSS3 Menu
あらゆるスクリーンサイズに対応できる、CSSのみで作成されたナビメニュー。
See the Pen Fully responsive CSS3 menu by Claudio Holanda (@kazzkiq) on CodePen.
Side Sliding Menu CSS
See the Pen Side Sliding Menu CSS by Eduard L. (@EduardL) on CodePen.
3D Rotaing Navigation
マウスホバーで各リンクが立体的に回転するCSSアニメーション。
See the Pen 3D Rotating Navigation by Arjan Jassal (@arjancodes) on CodePen.
CSS3 Funny Menu
高く積まれたブロックがゆらゆらと揺れているようなエフェクトが面白いナビメニュー。
See the Pen CSS3 Funny Menu by FreeFrontend (@cssparadise) on CodePen.
Pure CSS Mega Dropdown Menu with Animation (Vertical)
複数のマルチ階層にも対応できる垂直型メガメニュー。
See the Pen Pure CSS3 Mega Dropdown Menu With Animation (Vertical) by Rizky Kurniawan Ritonga (@rizky_k_r) on CodePen.
Sidebar Menu Hover Show/Hide CSS
See the Pen Sidebar Menu Hover Show/Hide CSS by JFarrow (@JFarrow) on CodePen.
Fixed Nav Hover Effect
各リンクがアニメーション付きで展開する、疑似要素を利用したナビメニュー。
See the Pen Fixed nav hover effect by Terence Devine (@tdevine33) on CodePen.
トグル型ナビメニュー
Hidden Menu
ボタンにマウスカーソルを合わせると各リンクが展開するトグル型ミニメニュー。
See the Pen Hidden menu (CSS & HTML5) by José Reyes González (@jreyesgs) on CodePen.
Vertical Layout with Navigation
ハンバーガーメニューから垂直方向に展開し、アニメーションも手軽にカスタマイズ可能。
See the Pen Vertical Layout with Navigation by Ettrics (@ettrics) on CodePen.
Header Navigation Menu
アイコンをクリックすると左右方向に展開する、ヘッダー向けナビメニュー。
See the Pen Header Navigation Menu by Kyle Lavery (@koenigsegg1) on CodePen.
Pure CSS Toggle Menu
上記スニペット同様、マウスクリックで各リンクが展開されるナビメニュー。
See the Pen Pure CSS Toggle Menu by Akshay Nair (@phenax) on CodePen.
Hamburger Icon with Morphic Menu
半透明のサークル円が重なったようなモーフィングエフェクトを実装しています。
See the Pen Hamburger icon with Morphing Menu by Sergio (@sergioandrade) on CodePen.
Menu Toggle Button with Flat Menu
See the Pen Menu Toggle button with flat menu by Geoffrey Crofte (@CreativeJuiz) on CodePen.
Simple JS Mobile Navigation
HTML/CSS、わずかなJSのみで実装できるトグル型ナビメニュー。
See the Pen Simple JS mobile navigation by Kieran Hunter (@kieranfivestars) on CodePen.
CSS Gooey Menu (Version 4)
ぬるりとした動きをCSSとSVGフィルタ機能を利用して実現しています。
See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.
Triangular Mobile Toggle Navigation
逆ピラミッドのような三角形を利用したナビメニュー。
See the Pen Triangular mobile navigation by MoKev (@MoKev) on CodePen.
Menu
マウスクリックで下方向へ展開し、文字テキストとアイコンを一緒に利用した実践的なスタイル。
See the Pen Menu by Yoann (@yoannhel) on CodePen.
スライド式ナビメニュー
Angled Menu
斜めに切り込みを入れたスライド式ナビメニューで、各リンクをアニメーション付きで表示します。
See the Pen Angled Menu by Keith Light (@keefyboooo) on CodePen.
Menu Shelf
左サイドに固定されたロゴをクリックすると展開する、ブランディングにも適したメニュー用スニペット。
See the Pen Menu Shelf by Alex Coven (@alcoven) on CodePen.
Pure CSS Slide Out Menu
メニューバーにマウスカーソルを合わせるとスライド式に展開するナビメニュー。
See the Pen Pure CSS Slide Out Menu by Max Kurapov (@mkurapov) on CodePen.
3D Off-Canvas Navigation
CSSアニメーションを活用することで、なめらかな展開方法を表現できるスタイル。
See the Pen 3D Off-canvas navigation by iamarend (@iamarend) on CodePen.
Off Canvas Menu
See the Pen Off canvas menu by Aleh Isakau (@piupiupiu) on CodePen.
Multi Level CSS Only Push Menu
HTMLとCSSのみでスタイリングでき、複数の階層まで対応できるスライド式ナビメニュー。
See the Pen Multi level css only push menu by Shven (@Shven) on CodePen.
参照元リンク : 110 CSS Menu – FreeFrontend.com
