Collection of free HTML and CSS navigation menu code examples

102 CSS Menu Collection of free HTML and CSS navigation menu code examples. FULLSCREEN OVERLAY NAVIGATION BARFULLSCREEN OVERLAY NAVIGATION BARNAVIGA



102 CSS Menu


Collection of free HTML and CSS navigation menu code examples.



Author

  • Arefeh hatami

Made with

  • HTML / CSS

About a code

MENU

Menu in pure CSS.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

FULLSCREEN OVERLAY NAVIGATION BAR

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-




Author

  • James Hancock

Made with

  • HTML / CSS

About a code

FULLSCREEN OVERLAY NAVIGATION BAR

Transitioning clip-path and pseudo-element transforms to create smooth link hovers.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • whisnuys

Made with

  • HTML / CSS

About a code

NAVIGATION DOTTED HOVER EFFECT

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Yuhomyan

Made with

  • HTML / CSS

About a code

FULLSCREEN OVERLAY NAVIGATION BAR

Fullscreen overlay navigation bar with html & css neon effect.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:font-awesome.css



Author

  • Danny

Made with

  • HTML / CSS

About a code

CONTEXT MENU

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • Ivan Grozdic

Made with

  • HTML / CSS

About a code

PURE CSS MENU

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:bootstrap.css



Author

  • Bar Hatsor

Made with

  • HTML / CSS (SCSS)

About a code

NEUMORPHISM CONTEXT MENU

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • Chris Smith

Made with

  • HTML / CSS (SCSS)

About a code

SIMPLE NAVIGATION SYSTEM

Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • @BrawadaCom

Made with

  • HTML (Slim) / CSS (Sass)

About a code

CSS MENU

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:font-awesome.css



Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

FULLSCREEN MENU ENTER

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-




Author

  • Håvard Brynjulfsen

Made with

  • HTML / CSS (SCSS)

About a code

CONTEXT MENU WITH FEATHER ICONS

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:feather-icons.js




Author

  • Adir

Made with

  • HTML / CSS

About a code

CSS HAMBURGER MENU

Pure CSS menu interaction. Made using the HTML tags details and summary.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • G Rohit

Made with

  • HTML / CSS (SCSS)

About a code

TEXT FILL ON HOVER

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • Abhinav Kumar

Made with

  • HTML / CSS

About a code

LIST ITEM HOWER EFFECT

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Mary Lou

Made with

  • HTML / CSS

About a code

CSS-ONLY MARQUEE EFFECT

A simple CSS-only marquee effect for a menu.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Cassandra

Made with

  • HTML / CSS

About a code

CSS FULL-PAGE NAVIGATION

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Jhey

Made with

  • HTML (Pug) / CSS (Stylus)

About a code

RANDOMLY GENERATED CSS BLOBBY NAV

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-




Author

  • Ryan Mulligan

Made with

  • HTML / CSS (SCSS)

About a code

FULL-PAGE NAVIGATION

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Alex Hart

Made with

  • HTML / CSS

About a code

PURE CSS FULL PAGE NAV

Compatible browsers:Chrome, Edge, Firefox (partial), Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Cyd Stumpel

Made with

  • HTML / CSS (SCSS)

About a code

FOLD OUT MOBILE MENU

CSS only fold out mobile menu.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

MENU HOVER FILL TEXT

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • Swarup Kumar Kuila

Made with

  • HTML / CSS

About a code

MENU WITH AWESOME HOVER

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:bootstrap.css, bootstrap-social.css, font-awesome.css




Author

  • Jasmine G

Made with

  • HTML / CSS (SCSS)

About a code

CSS NAVIGATION BAR

Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • alphardex

Made with

  • HTML / CSS (SCSS)

About a code

MENU HOVER UNDERLINE

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Kyle Lavery

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

APPLE TV MENU INTERFACE

Compatible browsers:Chrome, Edge, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Deren

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

CSS STRANGE NAV

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Ludmila Tretyakova

Made with

  • HTML / CSS

About a code

NAVBAR WITH PURE CSS

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:font-awesome.css



Author

  • Himalaya Singh

Made with

  • HTML / CSS

About a code

NAVBAR INTERACTION

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Amli

Made with

  • HTML / CSS

About a code

OFF CANVAS MENU PURE CSS

Off canvas menu pure CSS by using only CSS.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • David

Made with

  • HTML / CSS

About a code

MENU BAR CSS

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Alberto León

Made with

  • HTML / CSS

About a code

VERTICAL DARK MENU WITH CSS

Simple vertical dark menu with CSS and icons.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:font-awesome.css



Author

  • Bennett Feely

Made with

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

About the code

MOVING UNDERLINE NAV MENU

Compatible browsers:Chrome, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Scott Kennedy
HTML / CSS

About the code

FUN HOVER NAVIGATION

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Jouan Marcel

Made with

  • HTML / CSS (SCSS)

About the code

NAVIGATION MENU

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

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-




Author

  • Chenius

Made with

  • HTML / CSS

About the code

3D NAVBAR

3D navbar in HTML and CSS.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Akhil Sai Ram

Made with

  • HTML / CSS

About the code

JUST ANOTHER MENU

Pure CSS floating menu animation.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:no

Dependencies:-



Author

  • Jhey

Made with

  • HTML / CSS (Stylus)

About the code

PURE CSS MENU

Pure CSS menu drawer with off-click.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Piotr Galor

Made with

  • HTML / CSS

About the code

CSS MENU FEAT. EMOJI

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • ycw

Made with

  • HTML / CSS

About the code

THE MENU

Table contents style menu.

Compatible browsers:Chrome, Edge, Firefox, Opera, Safari

Responsive:yes

Dependencies:-



Author

  • Comehope

Made with

  • HTML / CSS

About the code

MENU EFFECT

Reverse text color menu effects.

Compatible browsers:Chrome, Firefox, Opera, Safari

Responsive:yes

Dependencies:-


Demo image: CSS-Only Nested Dropdown Navigation (ARIA)

Author

  • Gabrielle Wee

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

CSS-ONLY NESTED DROPDOWN NAVIGATION

CSS only nested dropdown navigation with ARIA.


Demo Image: Full Page Off-Canvas Navigation
Demo Image: Full Page Off-Canvas Navigation

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.
Made by Caleb Varoga
June 17, 2016

Σχόλια