Top 11 CSS Horizontal Menus

MENU HOVER LINE EFFECT

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

See the Pen Menu Hover Line Effect by Mehmet Burak Erman 🧛🏽‍♂️ (@mburakerman) on CodePen.light

Author

  • Mehmet Burak Erman

Made with

  • HTML / CSS (SCSS)

CSS HORIZONTAL MENU

Pure CSS horizontal menu concept with clip-path property.

See the Pen CSS Menu Concept (Clip-path) by Charlie Marcotte (@FUGU22) on CodePen.light

Author

  • Charlie Marcotte

Made with

  • HTML (Pug) / CSS (Sass)

STRIKETHROUGH HOVER EFFECT FOR MENU

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

See the Pen Strikethrough hover-effect by Artyom (@artyom-ivanov) on CodePen.light

Author

  • Artyom

Made with

  • HTML / CSS (SCSS)

LAVALAMP CSS MENU

Horizontal CSS menu with lavalamp hover effect.

See the Pen Lavalamp CSS Menu by Patak (@Patak) on CodePen.light

Author

  • Irvine Potok

Made with

  • HTML / CSS

HORIZONTAL ICON NAVIGATION

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

See the Pen Icon Navigation by Marco Biedermann (@marcobiedermann) on CodePen.light

Author

  • Marco Biedermann

Made with

  • HTML / CSS (PostCSS)

SLIDE HORIZONTAL MENU

This is a CSS only horizontal slide menu.

See the Pen Slide-Menu 2 by Aaron Benjamin (@abenjamin) on CodePen.light

Author

  • Aaron Benjamin

Made with

  • HTML / CSS

SKEWED MENU IN HTML AND CSS

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

See the Pen Skewed Menu by Claudio Holanda (@kazzkiq) on CodePen.light

Author

  • Claudio Holanda

Made with

  • HTML / CSS (Less)

HORIZONTAL NAVIGATION EFFECTS

Beautiful hover effects for horizontal navigation.

See the Pen Navigation Effects by bdbch (@d2k) on CodePen.light

Author

  • Dominik Biedebach

Made with

  • HTML / CSS

SIMPLE MENU NAVIGATION

Just a simple horizontal menu.

See the Pen Simple Menu Navigation by Karim Balaa (@karimbalaa) on CodePen.light

Author

  • Karim Balaa

Made with

  • HTML / CSS

TRANSPARENT FADING NAVIGATION BAR

Transparent fading horizontal navigation bar with mask image.

See the Pen Transparent Fading Navigation Bar by MrPirrera (@pirrera) on CodePen.light

Author

  • MrPirrera

Made with

  • HTML / CSS

RESPONSIVE MENU EFFECT

CSS3 responsive slide menu effect.

See the Pen css3 Responsive menu effect by Bogdan Blinnikov (@bonkalol) on CodePen.light

Author

  • Bogdan Blinnikov

Made with

  • HTML / CSS (Less)