Table of Contents

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Author

  • Bogdan Blinnikov

Made with

  • HTML / CSS (Less)