Post thumbnail: 11 CSS Horizontal Menus

11 CSS Horizontal Menus

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

Related Articles

  1. CSS Menus
  2. CSS Dropdown Menus
  3. CSS Mobile Menus
  4. CSS Sidebar Menus
  5. CSS Fullscreen Menus
  6. CSS Toggle Menus
  7. CSS Off-Canvas Menus

Demo image: Menu Hover Line Effect Menu Hover Line Effect - GIF Demo

Author

  • Mehmet Burak Erman

Links

Made with

  • HTML / CSS (SCSS)

About the code

Menu Hover Line Effect

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

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

Dependencies: -

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

Author

  • Charlie Marcotte

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

CSS Horizontal Menu

Pure CSS horizontal menu concept with clip-path property.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Artyom

Links

Made with

  • HTML / CSS (SCSS)

About the code

Strikethrough Hover Effect for Menu

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

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

Dependencies: -

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

Author

  • Irvine Potok

Links

Made with

  • HTML / CSS

About the code

Lavalamp CSS Menu

Horizontal CSS menu with lavalamp hover effect.

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

Dependencies: -

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

Author

  • Marco Biedermann

Links

Made with

  • HTML / CSS (PostCSS)

About the code

Horizontal Icon Navigation

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

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

Dependencies: -

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

Author

  • Aaron Benjamin

Links

Made with

  • HTML / CSS

About the code

Slide Horizontal Menu

This is a CSS only horizontal slide menu.

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

Dependencies: -

Demo image: Skewed Menu in HTML and CSS

Author

  • Claudio Holanda

Links

Made with

  • HTML / CSS (Less)

About the code

Skewed Menu in HTML and CSS

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

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

Dependencies: -

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

Author

  • Dominik Biedebach

Links

Made with

  • HTML / CSS

About the code

Horizontal Navigation Effects

Beautiful hover effects for horizontal navigation.

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

Dependencies: -

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

Author

  • Karim Balaa

Links

Made with

  • HTML / CSS

About the code

Simple Menu Navigation

Just a simple horizontal menu.

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

Dependencies: -

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

Author

  • MrPirrera

Links

Made with

  • HTML / CSS

About the code

Transparent Fading Navigation Bar

Transparent fading horizontal navigation bar with mask image.

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

Dependencies: -

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

Author

  • Bogdan Blinnikov

Links

Made with

  • HTML / CSS (Less)

About the code

Responsive Menu Effect

CSS3 responsive slide menu effect.

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

Dependencies: -

back to top