25+ CSS Horizontal Menus - Free Code + Demos
Collection of 25+ CSS Horizontal Menus. All items are 100% free and open-source.
1. Menu Hover Line Effect
Author: Mehmet Burak Erman (mburakerman)
Links: Source Code / Demo
Created on: December 18, 2017
Made with: HTML, SCSS
Tags: menu, hover, line
2. CSS Menu Concept (Clip-path)
Author: Charlie Marcotte (FUGU22)
Links: Source Code / Demo
Created on: September 5, 2017
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
3. Strikethrough Hover-effect
Hover effect for links. Use only one pseudo-element on link.
Author: Artyom (artyom-ivanov)
Links: Source Code / Demo
Created on: June 23, 2017
Made with: HTML, SCSS
Tags: css, hover, menu, link, effect
4. Lavalamp CSS Menu
Author: Patak (Patak)
Links: Source Code / Demo
Created on: February 22, 2017
Made with: HTML, CSS
Tags: css, lavalamp, menu
5. Icon Navigation
Simple SVG icon navigation with shadows using flex-box. Icon set: Dripicons by Amit Jakhu http://demo.amitjakhu.com/dripicons/
Author: Marco Biedermann (marcobiedermann)
Links: Source Code / Demo, Demo.amitjakhu.com
Created on: June 16, 2016
Made with: HTML, PostCSS
Tags: navigation, icons, shadow, css4, flex-box
6. Slide-Menu 2
This is a CSS-only slide menu.
Author: Aaron Benjamin (abenjamin)
Links: Source Code / Demo
Created on: April 29, 2015
Made with: HTML, CSS
Tags: menu, css
7. Skewed Menu
Using CSS3 properties to make a no-mainstream skewed menu.
Author: Claudio Holanda (kazzkiq)
Links: Source Code / Demo
Created on: March 7, 2015
Made with: HTML, Less
Tags: menu, css3
8. Navigation Effects
Author: bdbch (d2k)
Links: Source Code / Demo
Created on: January 18, 2015
Made with: HTML, CSS, JS
Tags: navigation, hover, navigationhover, css
9. Simple Menu Navigation
Just a simple menu.
Author: Karim Balaa (karimbalaa)
Links: Source Code / Demo
Created on: January 6, 2015
Made with: HTML, CSS
10. Transparent Fading Navigation Bar
Transparent Fading Navigation Bar with Mask Image
Author: MrPirrera (pirrera)
Links: Source Code / Demo
Created on: August 23, 2014
Made with: HTML, CSS, JS
Tags: transparent, fading, navigation, menu
11. Css3 Responsive Menu Effect
Responsive slide menu Effect
Author: Bogdan Blinnikov (bonkalol)
Links: Source Code / Demo
Created on: April 15, 2014
Made with: HTML, Less
Tags: css3, responsive, menu, css, effect
12. HTML5/CSS3 Horizontal Menu
This is pure HTML5 CSS3 Horizontal Menu. It requires no javascript or programming language to function. This was found on Google, further enhancements were made in css & is now published by me as a 'take-away' code. Note that the transation effect does not validate in W3C Validation, so yo...Read More
Author: Dhanush Badge (dhanushbadge)
Links: Source Code / Demo
Created on: May 15, 2013
Made with: HTML, CSS
Tags: html5css3-menu, css3-menu, pure-css3-horizontal-menu, html5-menu, horizontal-menu
13. Super Simple Horizontal Navbar
Here is sample code for a simple horizontal navbar.
Author: Daniel Muller (dmullerd)
Links: Source Code / Demo
Created on: November 26, 2015
Made with: HTML, CSS
Tags: nav, navbar, horizontal
14. Slide Horizontal CSS-only NavMenu
A menu of icons which slides from the top left corner of the window. - Font-Awesome Icons; - CSS only using the input checkbox type attribute.
Author: Riccardo Zanutta (rickzanutta)
Links: Source Code / Demo
Created on: September 1, 2014
Made with: HTML, SCSS
Tags: slide, css, menu, icons, webapp
15. My Quest For The Perfect Horizontal, Multi-level Dropdown And Responsive CSS Menu - Chapter 1
It has been a long quest, for month if not years I was struggling with adapting menus in the CSS code and trying out JQueries that I don't speak thus not understand and that didn't work as explained. Always just patchworking my way to my desired goals. Now I have finally made the importan...Read More
Author: Sofian777 (Sofian777)
Links: Source Code / Demo
Created on: June 27, 2015
Made with: HTML, CSS
Tags: multi-level, dropdown, responsive, css, menu
16. CSS Horizontal Menu Bar With Icons
A simple example of a CSS horizontal menu with icons.
Author: Graham Clark (Cheesetoast)
Links: Source Code / Demo
Created on: August 31, 2012
Made with: HTML, CSS
Tags: menu, icons
17. Horizontal Menu
Author: Carl Rosell (CarlRosell)
Links: Source Code / Demo
Created on: October 9, 2013
Made with: HTML, SCSS
Tags: horizontal, menu, flat, pure-css
18. Horizontal Menu
A beautiful horizontal menu which designed by Mike and developed in pure-CSS.
Author: Alireza (meness)
Links: Source Code / Demo
Created on: October 8, 2013
Made with: Haml, Less
CSS Pre-processor: Less
JS Pre-processor: None
HTML Pre-processor: Haml
Tags: horizontal, menu, flat, pure-css, font-awesome
19. #1226 - Horizontal Menu With Slide Down On Hover
Horizontal menu with slide down effect on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 25, 2015
Made with: HTML, CSS
Tags: menu
20. Simple Responsive Horizontal Navigation
Created for http://css-snippets.com/simple-horizontal-navigation/ Exploring two different methods for making the navigation horizontal on large screens. The snippet is responsive. It is a vertical menu on smaller screens and a horizontal menu on larger screens.
Author: Lisa Catalano (lisa_c)
Links: Source Code / Demo
Made with: HTML, CSS
21. Horizontal Menu
Author: Ilic Davor (webfacer)
Links: Source Code / Demo
Created on: October 14, 2013
Made with: HTML, SCSS
Tags: horizontal, menu, flat, pure-css
22. #1189 - Horizontal Menu Items
Horizontal menu items corner animation on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 6, 2015
Made with: HTML, CSS
Tags: horizontal, menu, navigation, css3
23. #1175 - Menu Sliding Border On Hover
Horizontal menu items sliding border on hover
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 2, 2015
Made with: HTML, CSS
Tags: menu, border
24. #1217 - Horizonatal Menu
Horizontal menu with top and bottom border hover effect
Author: LittleSnippets.net (littlesnippets)
Links: Source Code / Demo
Created on: November 23, 2015
Made with: HTML, CSS
Tags: menu
More Awesome Lists:
Share: