Table of Contents

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)

CIRCLE LINKS

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

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

Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

DROP DOWN MENU

Smooth drop down menu.

Author

  • Mark

Made with

  • HTML / CSS (SCSS)

MENU WITH AWESOME HOVER

Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

MENU HOVER UNDERLINE

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)

NAVIGATION WITH SUB-NAVIGATION

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)

NAVBAR WITH PURE CSS

Author

  • Ludmila Tretyakova

Made with

  • HTML / CSS

NAVBAR INTERACTION

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

MENU BAR 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.

See the Pen Pure CSS Magic Line Navbar by Rock Starwind (@RockStarwind) on CodePen.

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)

DROP DOWN MENU

CSS only drop down menu.

Author

  • steven

Made with

  • HTML / CSS

NAVIGATION MENU

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

See the Pen Futuristic 3D Hover Effect 🛸 by Jouan Marcel (@jouanmarcel) on CodePen.

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)

MENU EFFECT

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)

DROPDOWN MENU ANIMATION

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

Dropdown menu with little jQuery.

Demo image: Dropdown Menu

Author

  • Kyle Lavery

Made with

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

DROPDOWN

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

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

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

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

DROPDOWN MENU

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

DROPDOWN MENU UI

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

CIRCULAR LINKS MENU

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)

DROPDOWN MENU

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)

OFF CANVAS MENU WITH ANIMATED LINKS

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)