Table of Contents
  1. TEXT FILL ON HOVER
    1. Author
    2. Links
    3. Made with
  2. CIRCLE LINKS
    1. Author
    2. Links
    3. Made with
  3. CSS FULL-PAGE NAVIGATION
    1. Author
    2. Links
    3. Made with
    4. PURE CSS SINGLE PAGE APPLICATION
      1. Author
      2. Links
      3. Made with
  4. RANDOMLY GENERATED CSS BLOBBY NAV
    1. Author
    2. Links
    3. Made with
  5. FULL-PAGE NAVIGATION
    1. Author
    2. Links
    3. Made with
  6. PURE CSS FULL PAGE NAV
    1. Author
    2. Links
    3. Made with
  7. FULL PAGE NAV
    1. Author
    2. Links
    3. Made with
  8. FOLD OUT MOBILE MENU
    1. Author
    2. Links
    3. Made with
  9. MENU HOVER FILL TEXT
    1. Author
    2. Links
    3. Made with
  10. DROP DOWN MENU
    1. Author
    2. Links
    3. Made with
  11. MENU WITH AWESOME HOVER
    1. Author
    2. Links
    3. Made with
  12. MENU HOVER UNDERLINE
    1. Author
    2. Links
    3. Made with
  13. APPLE TV MENU INTERFACE
    1. Author
    2. Links
    3. Made with
  14. CSS STRANGE NAV
    1. Author
    2. Links
    3. Made with
  15. NAVIGATION WITH SUB-NAVIGATION
    1. Author
    2. Links
    3. Made with
  16. CSS NAVIGATION
    1. Author
    2. Links
    3. Made with
  17. NAVBAR WITH PURE CSS
    1. Author
    2. Links
    3. Made with
  18. NAVBAR INTERACTION
    1. Author
    2. Links
    3. Made with
  19. PURE CSS DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  20. THE CIRCULAR MENU
    1. Author
    2. Links
    3. Made with
  21. OFF CANVAS MENU PURE CSS
    1. Author
    2. Links
    3. Made with
  22. MENU BAR CSS
    1. Author
    2. Links
    3. Made with
  23. VERTICAL DARK MENU WITH CSS
    1. Author
    2. Links
    3. Made with
  24. THE MORE MENU
    1. Author
    2. Links
    3. Made with
  25. OFF-CANVAS MENU
    1. Author
    2. Links
    3. Made with
  26. MOVING UNDERLINE NAV MENU
    1. Author
    2. Links
    3. Made with
  27. CSS FOLDING MENU
    1. Author
    2. Links
    3. Made with
  28. FUN HOVER NAVIGATION
    1. Author
    2. Links
  29. PURE CSS MAGIC LINE NAVBAR
    1. Author
    2. Links
    3. Made with
  30. CIRCLE MENU
    1. Author
    2. Links
    3. Made with
  31. POSITION STICKY SUBNAV
    1. Author
    2. Links
    3. Made with
  32. DROP DOWN MENU
    1. Author
    2. Links
    3. Made with
  33. NAVIGATION MENU
    1. Author
    2. Links
    3. Made with
  34. 3D NAVBAR
    1. Author
    2. Links
    3. Made with
  35. JUST ANOTHER MENU
    1. Author
    2. Links
    3. Made with
  36. PURE CSS MENU
    1. Author
    2. Links
    3. Made with
  37. CSS MENU FEAT. EMOJI
    1. Author
    2. Links
    3. Made with
  38. THE MENU
    1. Author
    2. Links
    3. Made with
  39. CIRCLE MENU
    1. Author
    2. Links
    3. Made with
  40. PERSPECTIVE MENUS
    1. Author
    2. Links
    3. Made with
  41. MENU EFFECT
    1. Author
    2. Links
    3. Made with
  42. HOVER EFFECT FOR HORIZONTAL MENU
    1. Author
    2. Links
    3. Made with
  43. CSS-ONLY NESTED DROPDOWN NAVIGATION
    1. Author
    2. Links
    3. Made with
  44. Full Page Off-Canvas Navigation
    1. Author
    2. Made with
  45. Simple Radial Menu
    1. Author
    2. Made with
  46. Accordion Menu
    1. Author
    2. Made with
  47. Mobile Filter Menu
    1. Author
    2. Made with
  48. FULLSCREEN MENU FLEXBOX STYLE
    1. Author
    2. Links
    3. Made with
  49. DROPDOWN MENU ANIMATION
    1. Author
    2. Links
    3. Made with
  50. MOBILE NAVIGATION ANIMATION
    1. Author
    2. Links
    3. Made with
  51. SVG UI NAVIGATION CONCEPT
    1. Author
    2. Links
    3. Made with
  52. DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  53. DROPDOWN
    1. Author
    2. Links
    3. Made with
  54. SVG GOOEY HOVER MENU CONCEPT
    1. Author
    2. Links
    3. Made with
  55. SIDEBAR NAVIGATION
    1. Author
    2. Links
    3. Made with
  56. FULLSCREEN NAVIGATION
    1. Author
    2. Links
    3. Made with
  57. Header Navigation Menu
    1. Author
    2. Made with
  58. MENU FULLSCREEN
    1. Author
    2. Links
    3. Made with
  59. Fullscreen Flexbox Overlay Navigation
    1. Author
    2. Made with
  60. DETAILS INFO & NAVIGATION
    1. Author
    2. Links
    3. Made with
  61. CSS3 + jQuery Fullscreen Menu
    1. Author
    2. Made with
  62. FULL SCREEN NAVIGATION OVERLAY
    1. Author
    2. Links
    3. Made with
  63. CIRCULAR MATERIAL MENU
    1. Author
    2. Links
    3. Made with
  64. Semicircular Gooey Menu
    1. Author
    2. Made with
  65. Sliding Navigation Menu
    1. Author
    2. Made with
  66. 4 Fullscreen Navigation
    1. Author
    2. Made with
  67. Fullscreen Navigation
    1. Author
    2. Made with
  68. FROSTY NAV TOGGLE EFFECT
    1. Author
    2. Links
    3. Made with
  69. Hamburger Icon With Morphing Menu
    1. Author
    2. Made with
  70. Dropdown Navigation
    1. Author
    2. Made with
  71. Full Screen Navigation Using SVG
    1. Author
    2. Made with
  72. GOOEY MOBILE NAVIGATION
    1. Author
    2. Links
    3. Made with
  73. FULLSCREEN NAVIGATION
    1. Author
    2. Links
    3. Made with
  74. Colourful Navigation
    1. Author
    2. Made with
  75. Simple JS Mobile Navigation
    1. Author
    2. Made with
  76. FULLSCREEN MENU
    1. Author
    2. Links
    3. Made with
  77. Explosive Menu
    1. Author
    2. Made with
  78. OFF CANVAS NAV
    1. Author
    2. Links
    3. Made with
  79. Solution For Long Drop Down Items
    1. Author
    2. Made with
  80. Full-Screen Menu Overlay
    1. Author
    2. Made with
  81. CSS DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  82. Fullscreen Menu
    1. Author
    2. Made with
  83. MOBILE MENU
    1. Author
    2. Links
    3. Made with
  84. ACCESSIBLE FULLSCREEN OVERLAY MENU
    1. Author
    2. Links
    3. Made with
  85. QUICK AND EASY FULLSCREEN MENU
    1. Author
    2. Links
    3. Made with
  86. FULL PAGE OFF-CANVAS NAVIGATION
    1. Author
    2. Links
    3. Made with
  87. Offcanvas Sidebar Menu With A Twist
    1. Author
    2. Made with
  88. Off Canvas Menu
    1. Author
    2. Made with
  89. Accordion Drop Down Menu
    1. Author
    2. Made with
  90. Flat Vertical Navigation
    1. Author
    2. Made with
  91. A SIMPLE DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  92. Material Design Navigation
    1. Author
    2. Made with
  93. Triangular Mobile Toggle Navigation
    1. Author
    2. Made with
  94. CSS3 Funny Side Menu
    1. Author
    2. Made with
  95. FLAT HORIZONTAL NAVIGATION
    1. Author
    2. Links
    3. Made with
  96. Flat Vertical Navigation
    1. Author
    2. Made with
  97. FULLSCREEN MENU
    1. Author
    2. Links
    3. Made with
  98. OFF-CANVAS MENU EFFECTS
    1. Author
    2. Links
    3. Made with
  99. RADIAL MENU
    1. Author
    2. Links
    3. Made with
  100. Toggle Menu
    1. Author
    2. Made with
  101. PURE CSS TRANSITION EFFECTS FOR OFF-CANVAS VIEWS
    1. Author
    2. Links
    3. Made with
  102. CSS OFF CANVAS MENU
    1. Author
    2. Links
    3. Made with
  103. Side Accordion Menu
    1. Author
    2. Made with
  104. Fixed Flyout/Off-Canvas Navigation
    1. Author
    2. Made with
  105. DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  106. CIRCULAR NAVIGATION POPOUT
    1. Author
    2. Links
    3. Made with
  107. Animated Menu
    1. Author
    2. Made with
  108. DROPDOWN MENU UI
    1. Author
    2. Links
    3. Made with
  109. TOUCH DEVICE JELLY MENU CONCEPT
    1. Author
    2. Links
    3. Made with
  110. Vertical Accordion Menu Using jQuery And CSS3
    1. Author
    2. Made with
  111. CIRCULAR LINKS MENU
    1. Author
    2. Links
    3. Made with
  112. HORIZONTAL MENU
    1. Author
    2. Links
    3. Made with
  113. BOUNCE MOBILE MENU
    1. Author
    2. Links
    3. Made with
  114. CIRCULAR NAVIGATION WITH CSS
    1. Author
    2. Links
    3. Made with
  115. FLEXBOX OFF CANVAS MENU
    1. Author
    2. Links
    3. Made with
  116. DROPDOWN MENU
    1. Author
    2. Links
    3. Made with
  117. OFF CANVAS MENU WITH ANIMATED LINKS
    1. Author
    2. Links
    3. Made with
  118. MEGA DROPDOWN
    1. Author
    2. Links
    3. Made with
  119. RESPONSIVE MEGA MENU
    1. Author
    2. Links
    3. Made with
  120. RESPONSIVE MEGA MENU
    1. Author
    2. Links
    3. Made with
  121. SEXY FLEXY MEGA MENU
    1. Author
    2. Links
    3. Made with
  122. RESPONSIVE MEGA MENU
    1. Author
    2. Links
    3. Made with
  123. MEGA MENU DROPDOWNS WITH FOUNDATION 5
    1. Author
    2. Links
    3. Made with

TEXT FILL ON HOVER

Filling the text with a different color on hover – a creative text effect.

Author

  • G Rohit

Made with

  • HTML / CSS (SCSS)

Author

  • Dan Benmore

Made with

  • HTML / CSS

CSS FULL-PAGE NAVIGATION

Author

  • Cassandra

Made with

  • HTML / CSS

PURE CSS SINGLE PAGE APPLICATION

Author

  • Cassandra

Made with

  • HTML / CSS

RANDOMLY GENERATED CSS BLOBBY NAV

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter, and SVG filter.

Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

FULL-PAGE NAVIGATION

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

PURE CSS FULL PAGE NAV

Author

  • Alex Hart

Made with

  • HTML / CSS

FULL PAGE NAV

A concept design of full-page navigation, full of typography, and using icons as large images.

Author

  • Takane Ichinose

Made with

  • HTML / CSS

FOLD OUT MOBILE MENU

CSS only fold out mobile menu.

Author

  • Cyd Stumpel

Made with

  • HTML / CSS (SCSS)

Menu hover fill text (color + background-clip).

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

Smooth drop down menu.

Author

  • Mark

Made with

  • HTML / CSS (SCSS)

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

APPLE TV MENU INTERFACE

Author

  • Kyle Lavery

Made with

  • HTML (Pug) / CSS (SCSS)

CSS STRANGE NAV

Made a strange navigation. CSS only. Let’s Click!

Author

  • Deren

Made with

  • HTML (Pug) / CSS (SCSS)

Author

  • Cassidy Williams

Made with

  • HTML / CSS (SCSS)

CSS NAVIGATION

Click the toggle to open the menu and see the magic. This experiment relies on the only CSS to style, animate and position elements.

Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

Author

  • Ludmila Tretyakova

Made with

  • HTML / CSS

Author

  • Himalaya Singh

Made with

  • HTML / CSS

PURE CSS DROPDOWN MENU

Author

  • Garet McKinley

Made with

  • HTML / CSS

THE CIRCULAR MENU

Using border-radius and clipping paths to create a circular fan like menu.

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

OFF CANVAS MENU PURE CSS

Off canvas menu pure CSS by using only CSS.

Author

  • Amli

Made with

  • HTML / CSS

Author

  • David

Made with

  • HTML / CSS

VERTICAL DARK MENU WITH CSS

Simple vertical dark menu with CSS and icons.

Author

  • Alberto León

Made with

  • HTML / CSS

THE MORE MENU

Using clip-path times two to make an irregular shaped object fill out a cut-out shape in an unfold open menu effect.

Author

  • Mikael Ainalem

Made with

  • HTML / CSS

OFF-CANVAS MENU

Pure CSS off-canvas menu.

Author

  • Andrej Sharapov

Made with

  • HTML (Pug) / CSS (SCSS)

MOVING UNDERLINE NAV MENU

Author

  • Bennett Feely

Made with

  • HTML (Slim) / CSS (SCSS) / JS

CSS FOLDING MENU

A simple yet beautiful folding menu made in CSS.

Author

  • Animated Creativity

Made with

  • HTML / CSS

FUN HOVER NAVIGATION

Fun navigation effect using CSS keyframes. A quick jump back to the old school.

Author

  • Scott Kennedy
HTML / CSS

PURE CSS MAGIC LINE NAVBAR

It’s pure CSS. All links need to have a consistent dimensions for this to work. You have to set everything up yourself in terms of telling the nav how many items there are and where the .line should move to whenever one of the links gets hovered.

Author

  • seto89

Made with

  • HTML / CSS

CIRCLE MENU

nice pure CSS circle menu.

Author

  • Erin McKinney

Made with

  • HTML / CSS

POSITION STICKY SUBNAV

Sticky subnavigation in pure CSS.

Author

  • tris timb

Made with

  • HTML / CSS (SCSS)

CSS only drop down menu.

Author

  • steven

Made with

  • HTML / CSS

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

Author

  • Jouan Marcel

Made with

  • HTML / CSS (SCSS)

3D NAVBAR

3D navbar in HTML and CSS.

Author

  • Chenius

Made with

  • HTML / CSS

JUST ANOTHER MENU

Pure CSS floating menu animation.

Author

  • Akhil Sai Ram

Made with

  • HTML / CSS

PURE CSS MENU

Pure CSS menu drawer with off-click.

Author

  • Jhey

Made with

  • HTML / CSS (Stylus)

CSS MENU FEAT. EMOJI

Author

  • Piotr Galor

Made with

  • HTML / CSS

THE MENU

Table contents style menu.

Author

  • ycw

Made with

  • HTML / CSS

CIRCLE MENU

Pure CSS circle menu.

Author

  • 0guzhan

Made with

  • HTML / CSS

PERSPECTIVE MENUS

CSS only perspective menus.

Author

  • Mehmet Burak Erman

Made with

  • HTML (Pug) / CSS (Stylus)

Reverse text color menu effects.

Author

  • Comehope

Made with

  • HTML / CSS

HOVER EFFECT FOR HORIZONTAL MENU

Pure CSS fading out for siblings menu options on option hover.

Author

  • Stas Melnikov

Made with

  • HTML / CSS

CSS-ONLY NESTED DROPDOWN NAVIGATION

CSS only nested dropdown navigation with ARIA.

Author

  • Gabrielle Wee

Made with

  • HTML/Haml
  • CSS/SCSS

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Demo Image: Full Page Off-Canvas Navigation

Author

  • Caleb Varoga

Made with

  • Html / CSS
Demo and Download Demo and Download

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.

Demo Image: Simple Radial Menu

Author

  • Nikolay Talanov

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.

Demo Image: Simple accordion menu with HTML, CSS and JavaScript

Author

  • JuliaRietveld

Made with

  • Html / CSS / Javascript
Demo and Download Demo and Download

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.

Demo Image: Mobile Filter Menu

Author

  • Arjun Amgain

Made with

  • Html / CSS
Demo and Download Demo and Download

FULLSCREEN MENU FLEXBOX STYLE

Chrome and Firefox good… IE bad, no transition support for flex property.

Demo image: Fullscreen Menu Flexbox Style

Author

  • Marcus Hall

Made with

  • HTML/Slim
  • CSS/SCSS
  • JavaScript (jquery.js)

Nice dropdown menu with animation.

Demo image: Dropdown Menu Animation

Author

  • Dany Santos

Made with

  • HTML
  • CSS
  • JavaScript

MOBILE NAVIGATION ANIMATION

Mobile navigation open and close animations using GSAP TweenMax and TimelineMax. Still needs some transition tweaking…

Demo image: Mobile Navigation Animation

Author

  • Karlo Videk

Made with

  • HTML
  • CSS
  • JavaScript

SVG UI NAVIGATION CONCEPT

Just SVG & CSS3 animations, without any animation libraries.

Demo image: SVG UI Navigation Concept

Author

  • Alex Permyakov

Made with

  • HTML
  • CSS
  • JavaScript

Dropdown menu with little jQuery.

Demo image: Dropdown Menu

Author

  • Kyle Lavery

Made with

  • HTML/Pug
  • CSS/SCSS
  • JavaScript (jquery.js)

Pretty dropdown menu.

Demo image: Dropdown

Author

  • Ariana Lynn

Made with

  • HTML
  • CSS
  • JavaScript

SVG GOOEY HOVER MENU CONCEPT

Uses SVG path manipulation based on mouse position to ‘chase’ the user’s position.

Demo image: SVG Gooey Hover Menu Concept

Author

  • Michael Leonard

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

Sidebar navigation with tooltips.

Demo image: Sidebar Navigation

Author

  • Daniel

Made with

  • HTML
  • CSS/SCSS (font-awesome.css)
  • JavaScript (jquery.js)

FULLSCREEN NAVIGATION

Includes a burger with pure CSS animations, fadeIn animations from animate.css, minimal JS.

Demo image: Fullscreen Navigation

Author

  • Rob McFadzean

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Header Navigation Menu

Header navigation menu with HTML, CSS and jQuery.

Demo Image: Header Navigation Menu

Author

  • Kyle Lavery

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

Menu fullscreen CSS.

Demo image: Menu Fullscreen CSS

Author

  • Felipe Espinoza

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Fullscreen Flexbox Overlay Navigation

Fullscreen flexbox overlay navigation in HTML, CSS and jQuery.

Demo Image: Fullscreen Flexbox Overlay Navigation

Author

  • Mirko Zorić

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

DETAILS INFO & NAVIGATION

Navigation with jQuery, CSS and HTML.

Demo image: Details Info & Navigation

Author

  • Mohan Khadka

Made with

  • HTML
  • CSS
  • JavaScript

CSS3 + jQuery Fullscreen Menu

Simple, basic and elegant CSS3 and jQuery driven fullscreen menu.

Demo Image: CSS3 + jQuery Fullscreen Menu

Author

  • Anton Petrov

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

FULL SCREEN NAVIGATION OVERLAY

An example of a full screen navigation overlay utilizing flexbox.

Demo image: Full Screen Navigation Overlay

Author

  • Tania

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jQuery.js)

CIRCULAR MATERIAL MENU

Unusual circular menu.

Demo image: Circular Material Menu

Author

  • Simon Gooder

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Semicircular Gooey Menu

Gooey menu with CSS and SVG filters. Version 1.

Demo Image: Semicircular Gooey Menu

Author

  • Lucas Bebber

Made with

  • Html / CSS
Demo and Download Demo and Download

Sliding Navigation Menu

Sliding navigation menu is hidden by default.

Demo Image: Sliding Navigation Menu

Author

  • Aleh Isakau

Made with

  • Html / CSS
Demo and Download Demo and Download

4 Fullscreen Navigation

4 Fullscreen navigation with HTML, CSS and jQuery.

Demo Image: Fullscreen Navigation

Author

  • ari

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

Fullscreen Navigation

CSS hamburger animation taken fromhttp://codepen.io/designcouch/details/Atyop/

Demo Image: Fullscreen Navigation

Author

  • Marcus Bizal

Made with

  • Html / CSS
Demo and Download Demo and Download

FROSTY NAV TOGGLE EFFECT

HTML, CSS and jQuery frosty navigation toggle effect.

Demo image: Frosty Nav Toggle Effect

Author

  • Graham Wilsdon

Made with

  • HTML
  • CSS
  • JavaScript

Hamburger Icon With Morphing Menu

Creative menu made with HTML, SASS/CSS3 and JQuery.

Demo Image: Hamburger Icon With Morphing Menu

Author

  • Sergio

Made with

  • Html / CSS (SCSS) / JQuery
Demo and Download Demo and Download

Dropdown navigation with HTML, CSS and JavaScript

Demo Image: Dropdown Navigation

Author

  • Ryan Morr

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download

Full Screen Navigation Using SVG

Full screen navigation using SVG, HTML, CSS and jQuery.

Demo Image: Full Screen Navigation Using SVG

Author

  • Anas Ashraf

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

GOOEY MOBILE NAVIGATION

The cool gooey effect applied to a mobilestyle menu. jQuery and CSS transitions for the animations.

Demo image: Gooey Mobile Navigation

Author

  • BjurhagerStudios

Made with

  • HTML
  • CSS
  • JavaScript

FULLSCREEN NAVIGATION

Fullscreen navigation with HTML, CSS and JS.

Demo image: Fullscreen Navigation

Author

  • Marcus Bizal

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Colourful Navigation

When you hover the colourful navigation the dot follows your moves to the current item. When you leave it goes back to the active item.

Demo Image: Colourful Navigation

Author

  • Lewi Hussey

Made with

  • Html / CSS
Demo and Download Demo and Download

Simple JS Mobile Navigation

Simple JS mobile navigation with HTML and CSS.

Demo Image: Simple JS Mobile Navigation

Author

  • Kieran Hunter

Made with

  • Html / CSS
Demo and Download Demo and Download

FULLSCREEN MENU

Simple fullscreen menu.

Demo image: Fullscreen Menu

Author

  • Jannik Baranczyk

Made with

  • HTML
  • CSS/SCSS
  • JavaScript/Babel (jquery.js)

Explosive Menu

A, rather explosive, menu is just a click away. All you have to do is say fire.

Demo Image: Explosive Menu

Author

  • Harris Carney

Made with

  • Html / CSS
Demo and Download Demo and Download

OFF CANVAS NAV

Sass off-canvas navigation.

Demo image: Sass Off Canvas Nav

Author

  • Tyler Fowle

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

Solution For Long Drop Down Items

Problem with long drop down menus? Well, try this simple solution with the use of JavaScript and jQuery.

Demo Image: Solution For Long Drop Down Items

Author

  • Geams Parangan

Made with

  • Html / CSS / JavaScript
Demo and Download Demo and Download

Full-Screen Menu Overlay

A full-screen menu, showcasing your brand and website navigation. Built using SCSS and vanilla JS.

Demo Image: Full-Screen Menu Overlay

Author

  • Ettrics

Made with

  • Html / CSS (SCSS) / JS
Demo and Download Demo and Download

CSS DROPDOWN MENU

Full CSS dropdown navigation. Drops down on click by the use of a hidden checkbox.

Demo image: CSS Dropdown Menu

Author

  • Rlski

Made with

  • HTML
  • CSS

Fullscreen Menu

HTML, CSS and jQuery fullscreen menu.

Demo Image: Fullscreen Menu

Author

  • Paul van Oijen

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

MOBILE MENU

HTML, CSS and jQuery effect for mobile menu.

Demo image: Mobile Menu

Author

  • Virgil Pana

Made with

  • HTML
  • CSS
  • JavaScript

ACCESSIBLE FULLSCREEN OVERLAY MENU

A fairly accessible fullscreen overlay menu built with jQuery and CSS.

Demo image: Accessible Fullscreen Overlay Menu

Author

  • RaziTazi

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

QUICK AND EASY FULLSCREEN MENU

Crafted and debugged in 5 minutes, IE10+ compatible. Might not be ideal for production but would help you if you need a quick working responsive and modern menu.

Demo image: Quick And Easy Fullscreen Menu

Author

  • Luigi Mannoni

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

FULL PAGE OFF-CANVAS NAVIGATION

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.

Demo image: Full Page Off-Canvas Navigation

Author

  • Caleb Varoga

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

Offcanvas Sidebar Menu With A Twist

HTML, CSS and jQuery offcanvas sidebar menu with a twist.

Demo Image: Offcanvas Sidebar Menu With A Twist

Author

  • Devilish Alchemist

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

Off Canvas Menu

Little off canvas animated menu.

Demo Image: Off Canvas Menu

Author

  • Mark Murray

Made with

  • Html / CSS
Demo and Download Demo and Download

Accordion Drop Down Menu

HTML, CSS accordion menu with jQuery. No plugins.

Demo Image: Accordion drop down menu

Author

  • Agustin Ortiz

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

Flat Vertical Navigation

A simple flat vertical navigation with multi animated drop down menu. Also including Font Awesome and Animate.css.

Demo Image: Flat Vertical Navigation

Author

  • Andy Tran

Made with

  • Html / CSS
Demo and Download Demo and Download

A SIMPLE DROPDOWN MENU

Just a simple HTML and CSS dropdown menu.

Demo image: A Simple Dropdown Menu

Author

  • Mike Rojas

Made with

  • HTML/Pug
  • CSS/SCSS

Material Design Navigation

The page slides to reveal a clean, simple navigation.

Demo Image: Material Design Navigation

Author

  • Lewi Hussey

Made with

  • Html / CSS
Demo and Download Demo and Download

Triangular Mobile Toggle Navigation

Triangular mobile toggle navigation with HTML and CSS.

Demo Image: Triangular Mobile Toggle Navigation

Author

  • MoKev

Made with

  • Html / CSS
Demo and Download Demo and Download

CSS3 Funny Side Menu

A funny CSS3 menu.

Demo Image: CSS3 Funny Side Menu

Author

  • Wagner Moschini

Made with

  • Html / CSS
Demo and Download Demo and Download

FLAT HORIZONTAL NAVIGATION

A flat horizontal navigation that uses jQuery for a clean dropdown menu alongside with animate.css for the nice flip at the beginning.

Demo image: Flat Horizontal Navigation

Author

  • Andy Tran

Made with

  • HTML/Haml
  • CSS/Less
  • JavaScript (jquery.js)

Flat Vertical Navigation

A simple flat vertical navigation with a simple dropdown menu.

Demo Image: Flat Vertical Navigation

Author

  • Andy Tran

Made with

  • Html / CSS
Demo and Download Demo and Download

FULLSCREEN MENU

Fullscreen hamburger menu.

Demo image: Fullscreen Menu

Author

  • Gerhard Bliedung

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

OFF-CANVAS MENU EFFECTS

Some inspiration for off-canvas menu effects and styles using CSS transitions and SVG path animations.

Demo image: Off-Canvas Menu Effects

Author

  • Mary Lou

Made with

  • HTML
  • CSS
  • JavaScript (bounce.js,
    snap.svg)

RADIAL MENU

Animated radial menu.

Demo image: Radial Menu

Author

  • Carlos

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Toggle Menu

Toggle menu with HTML, CSS and jQuery.

Demo Image: Toggle Menu

Author

  • Yoann

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

PURE CSS TRANSITION EFFECTS FOR OFF-CANVAS VIEWS

You have probably all seen the “drawer menu/off-canvas” navigation style made popular by Facebook a few years back. There are a lot of great javascript plugins that offers this functionality, but I thought it would be cool to try and do this with the new cool features of css. No javascript required. – Thomas Wilthil

Demo image: Pure CSS Transition Effects For Off-Canvas Views

Author

  • Thomas Wilthil

Made with

  • HTML
  • CSS

CSS OFF CANVAS MENU

Another off canvas menu using the checkbox hack to active mobile navigation.

Demo image: CSS Off Canvas Menu

Author

  • Nicholas M. Smith

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Side Accordion Menu

HTML, CSS, jQuery sidebar accordion menu.

Demo Image: Side accordion menu

Author

  • Benjamin

Made with

  • Html / CSS / jQuery
Demo and Download Demo and Download

Fixed Flyout/Off-Canvas Navigation

A responsive fixed menu that’s always right there.

Demo Image: Fixed Flyout/Off-Canvas Navigation

Author

  • Colin

Made with

  • Html / CSS
Demo and Download Demo and Download

The hover menu is pure CSS. The toggle menu utilizes a minimal amount of JavaScript, but will degrade gracefully because it only uses JavaScript to close the menu when the user clicks outside of the menu.

Demo image: Dropdown Menu

Author

  • Eric Sadowski

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

CIRCULAR NAVIGATION POPOUT

Full circular animated navigation in CSS. Perfect for mobile. Based on codrops’s circular navigation.

Demo image: Circular Navigation Popout

Author

  • Niels Van Limberghen

Made with

  • HTML
  • CSS/SCSS
  • JavaScript (jquery.js)

Animated Menu

A simple fullscreen menu.

Demo Image: Animated Menu

Author

  • Una Kravets

Made with

  • Html / CSS
Demo and Download Demo and Download

Pure CSS dropdown menu.

Demo image: Dropdown Menu UI

Author

  • Jeplaa

Made with

  • HTML
  • CSS

TOUCH DEVICE JELLY MENU CONCEPT

Touch device jelly menu concept with HTML, CSS and JavaScript.

Demo image: Touch Device Jelly Menu Concept

Author

  • LegoMushroom

Made with

  • HTML
  • CSS
  • JavaScript

Vertical Accordion Menu Using jQuery And CSS3

A sleek vertical accordion menu for your next website/app. The headings use Font Awesome icon font. CSS3 gradients, transitions, and shadows have been used in the demo along with minimalistic use of jQuery for sliding the link lists.

Demo Image: Vertical accordion menu using jQuery and CSS3

Author

  • thecodeplayer

Made with

  • Html / CSS / jQuery
Demo and Download

Responsive circular links menu.

Demo image: Circular Links Menu

Author

  • Rachel Smith

Made with

  • HTML
  • CSS
  • JavaScript

HORIZONTAL MENU

Author

  • Carl Rosell

Made with

  • HTML / CSS (SCSS)

BOUNCE MOBILE MENU

Menu animation with HTML, CSS and jQuery.

Demo image: Bounce Mobile Menu

Author

  • Matt Hoiland

Made with

  • HTML
  • CSS
  • JavaScript

CIRCULAR NAVIGATION WITH CSS

A tutorial on how to create a circular navigation using CSS transforms.

Demo image: Circular Navigation With CSS

Author

  • Sara Soueidan

Made with

  • HTML
  • CSS
  • JavaScript (classie.js)

FLEXBOX OFF CANVAS MENU

Lightweight, simple, easy to use.

Demo image: Flexbox Off Canvas Menu

Author

  • Oliver Knoblich

Made with

  • HTML/Haml
  • CSS/SCSS
  • JavaScript (jquery.js)

This is a simple dropdown menu made using unsorted lists and CSS3 transitions.

Demo image: Dropdown Menu

Author

  • Lauren

Made with

  • HTML
  • CSS/LESS
  • JavaScript (jquery.js)

A simple off canvas mobile navigation with delayed link animation. The links have a simple transition effect of fading in from right to left when the navigation is toggled. But the animation occurs in a chained way where the links animate one after the other. This is done by adding a transition-delay to every link.

Demo image: Off Canvas Menu with Animated Links

Author

  • thecodeplayer

Made with

  • HTML
  • CSS

MEGA DROPDOWN

A responsive and easy to customise mega-dropdown component.

Demo image: Mega Dropdown

Author

  • codyhouse.co

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js,
    jquery.menu-aim.js)

RESPONSIVE MEGA MENU

Responsive mega menu for mobile view.

Demo image: Responsive Mega Menu

Author

  • Droidadda Inc

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

RESPONSIVE MEGA MENU

Responsive mega menu with flexbox.

Demo image: Responsive Mega Menu

Author

  • Kalpesh Singh

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

SEXY FLEXY MEGA MENU

I saw a gif of this style menu on Scout’s page on Dribbble and decided to take a shot at it, I thought it was pretty cool to add some subtle animation to the active menu and I also wanted to use flexbox a bit to help lay this out. – Mike Torosian

Demo image: Sexy Flexy Mega Menu

Author

  • Mike Torosian

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

RESPONSIVE MEGA MENU

Responsive mega menu with blog, images and drop down.

Demo image: Responsive Mega Menu

Author

  • Arjun Amgain

Made with

  • HTML
  • CSS
  • JavaScript (jquery.js)

MEGA MENU DROPDOWNS WITH FOUNDATION 5

A mega menu (a big, 2-dimensional drop-down panel) groups navigation options to eliminate scrolling and use typography, icons, and tooltips to explain users’ choices.

Demo image: Mega Menu Dropdowns with Foundation 5

Author

  • SitePoint

Made with

  • HTML
  • CSS/SCSS (foundation.css)
  • JavaScript (jquery.js, foundation.js)