Advertisement

100css-menu

 

ウェブサイトにおいてユーザーが特に操作する機会の多い部分のひとつが、ナビゲーションメニューでしょう。モバイル端末でのアクセスが増えているいま、より使いやすいスタイルが求められるようになっています。

 

 

今回は HTML と CSS、わずかな JavaScript で実装できるさまざまなナビゲーションメニュー用コードスニペットをまとめてご紹介します。アコーディオン型やサークル型、ドロップダウンやフルスクリーン、水平型、モバイル用、Off-Canvasメニューなどをスタイル別に100個まとめています。あらゆるWebデザインプロジェクトで使えるスニペットを、きっと見つけることができるでしょう。

 

mobile-alternative-menu-1
ウェブサイトを制作しているひとなら、モバイル端末におけるハンバーガー型ナビゲーションメニューの見つけにくさと効率の悪さ、またどれだけUXデザインの邪魔になっているの

 

 

 

コンテンツ目次

 

 

アコーディオンメニュー

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.

目次へ戻る

 

海外サイト Free Frontend で公開された 110 CSS Menu より許可をもらい、特にピックアップしたい作品を中心に転載しています。

 

参照元リンク : 110 CSS Menu – FreeFrontend.com