Collection of hand-picked free HTML and CSS horizontal menu code examples.

  1. CSS Menus
  2. CSS Circle Menus
  3. CSS Dropdown Menus
  4. CSS Mobile Menus
  5. CSS Sidebar Menus
  6. CSS Fullscreen Menus
  7. CSS Sliding Menus
  8. CSS Toggle Menus
  9. CSS Off-Canvas Menus
Demo image: Menu Hover Line Effect Menu Hover Line Effect - GIF Demo

Creator

  • Mehmet Burak Erman

Programming language

  • HTML / CSS (SCSS)

Information the code

Menu Hover Line Effect

Nice and simple horizontal menu with hover line effect in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: CSS Horizontal Menu CSS Horizontal Menu - GIF Demo

Creator

  • Charlie Marcotte

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

CSS Horizontal Menu

Pure CSS horizontal menu concept with clip-path property.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Strikethrough Hover Effect for Menu Strikethrough Hover Effect for Menu - GIF Demo

Creator

  • Artyom

Programming language

  • HTML / CSS (SCSS)

Information the code

Strikethrough Hover Effect for Menu

Hover effect for menu links. Use only one pseudo-element on link.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Lavalamp CSS Menu Lavalamp CSS Menu - GIF Demo

Creator

  • Irvine Potok

Programming language

  • HTML / CSS

Information the code

Lavalamp CSS Menu

Horizontal CSS menu with lavalamp hover effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Horizontal Icon Navigation Horizontal Icon Navigation - GIF Demo

Creator

  • Marco Biedermann

Programming language

  • HTML / CSS (PostCSS)

Information the code

Horizontal Icon Navigation

Simple SVG icon horizontal navigation with shadows using flex-box.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Slide Horizontal Menu Slide Horizontal Menu - GIF Demo

Creator

  • Aaron Benjamin

Programming language

  • HTML / CSS

Information the code

Slide Horizontal Menu

This is a CSS only horizontal slide menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Skewed Menu in HTML and CSS

Creator

  • Claudio Holanda

Programming language

  • HTML / CSS (Less)

Information the code

Skewed Menu in HTML and CSS

Using CSS3 properties to make a no-mainstream skewed menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Horizontal Navigation Effects Horizontal Navigation Effects - GIF Demo

Creator

  • Dominik Biedebach

Programming language

  • HTML / CSS

Information the code

Horizontal Navigation Effects

Beautiful hover effects for horizontal navigation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Simple Menu Navigation Simple Menu Navigation - GIF Demo

Creator

  • Karim Balaa

Programming language

  • HTML / CSS

Information the code

Simple Menu Navigation

Just a simple horizontal menu.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Transparent Fading Navigation Bar Transparent Fading Navigation Bar - GIF Demo

Creator

  • MrPirrera

Programming language

  • HTML / CSS

Information the code

Transparent Fading Navigation Bar

Transparent fading horizontal navigation bar with mask image.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Menu Effect Responsive Menu Effect - GIF Demo

Creator

  • Bogdan Blinnikov

Programming language

  • HTML / CSS (Less)

Information the code

Responsive Menu Effect

CSS3 responsive slide menu effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: