Collection of hand-picked free HTML and CSS horizontal menu code examples from codepen and other resources. Update of December 2018 collection. 5 new items.

Related Articles

  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

Author

  • seto89

Made with

  • HTML / CSS

About the code

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.

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

Responsive: yes

Dependencies: -

Author

  • tris timb

Made with

  • HTML / CSS (SCSS)

About the code

Position Sticky Subnav

Sticky subnavigation in pure CSS.

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

Responsive: yes

Dependencies: -

Author

  • Mehmet Burak Erman

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Perspective Menus

CSS only perspective menus.

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

Responsive: yes

Dependencies: -

Author

  • Stas Melnikov

Made with

  • HTML / CSS

About the code

Hover Effect for Horizontal Menu

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

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

Responsive: yes

Dependencies: -

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

Author

  • Mehmet Burak Erman

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

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

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

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

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

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

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

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

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

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

Made with

  • HTML / CSS (Less)

About the code

Responsive Menu Effect

CSS3 responsive slide menu effect.

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

Dependencies: -

Author

  • Carl Rosell

Made with

  • HTML / CSS (SCSS)

About the code

Horizontal Menu

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

Responsive: yes

Dependencies: font-awesome.css