Open menu with css

102 CSS Menu

Collection of free HTML and CSS navigation menu code examples. Update of May 2020 collection. 27 new items.

Table of Contents

Related Articles

Author

Links

Made with

About a code

Menu

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

Author

Links

Made with

About a code

Fullscreen Overlay Navigation Bar

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

Author

Links

Made with

About a code

Three Fancy Link Hover Effects

Transitioning clip-path and pseudo-element transform s to create smooth link hovers.

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

Author

Links

Made with

About a code

Navigation Dotted Hover Effect

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

Author

Links

Made with

About a code

Fullscreen Overlay Navigation Bar

Fullscreen overlay navigation bar with html & css neon effect.

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

Author

Links

Made with

About a code

Context Menu

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

Author

Links

Made with

About a code

Pure CSS Menu

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

Author

Links

Made with

About a code

Neumorphism Context Menu

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

Author

Links

Made with

About a code

Simple Navigation System

Simple system for navigating a hierarchy in a confined space. Uses standard HTML and CSS, no JavaScript.

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

Author

Links

Made with

About a code

CSS Menu

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

Author

Links

Made with

About a code

Fullscreen Menu Enter

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

Author

Links

Made with

About a code

Context Menu with Feather Icons

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

Author

Links

Made with

About a code

CSS Hamburger Menu

Pure CSS menu interaction. Made using the HTML tags details and summary .

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

Author

Links

Made with

About a code

Text Fill on Hover

Filling the text with a different color on hover — a creative text effect.

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

Author

Links

Made with

About a code

List Item Hower Effect

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

Author

Links

Made with

About a code

CSS-Only Marquee Effect

A simple CSS-only marquee effect for a menu.

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

Author

Links

Made with

About a code

CSS Full-Page Navigation

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

Author

Links

Made with

About a code

Randomly Generated CSS Blobby Nav

A randomly generated blobby nav created with CSS. Has smooth anchor scrolling, uses backdrop-filter , and SVG filter.

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

Author

Links

Made with

About a code

Full-Page Navigation

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

Author

Links

Made with

About a code

Pure CSS Full Page Nav

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

Author

Links

Made with

About a code

Fold Out Mobile Menu

CSS only fold out mobile menu.

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

Author

Links

Made with

About a code

Menu Hover Fill Text

Menu hover fill text ( color + background-clip ).

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

Author

Links

Made with

About a code

Menu with Awesome Hover

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

Dependencies: bootstrap.css, bootstrap-social.css, font-awesome.css

Author

Links

Made with

About a code

CSS Navigation Bar

Implemented a minimal navigation bar that changes color on hovering. Written using only HTML and SCSS.

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

Author

Links

Made with

About a code

Menu Hover Underline

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

Author

Links

Made with

About a code

Apple TV Menu Interface

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About a code

CSS Strange Nav

Made a strange navigation. CSS only. Let’s Click!

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

Author

Links

Made with

About a code

Navbar with Pure CSS

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

Author

Links

Made with

About a code

Navbar Interaction

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

Author

Links

Made with

About a code

Off Canvas Menu Pure CSS

Off canvas menu pure CSS by using only CSS.

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

Author

Links

Made with

About a code

Menu Bar CSS

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

Author

Links

Made with

About a code

Vertical Dark Menu with CSS

Simple vertical dark menu with CSS and icons.

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

Author

Links

Made with

About the code

Moving Underline Nav Menu

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Author

Links

Made with

About the code

Navigation Menu

Usable as navigation, menu or effect. It uses CSS transform and perspective to create a unique hololens-like animation effect.

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

Author

Links

Made with

About the code

3D Navbar

3D navbar in HTML and CSS.

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

Author

Links

Made with

About the code

Just Another Menu

Pure CSS floating menu animation.

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

Author

Links

Made with

About the code

Pure CSS Menu

Pure CSS menu drawer with off-click.

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

Author

Links

Made with

About the code

CSS Menu Feat. Emoji

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

Author

Links

Made with

About the code

The Menu

Table contents style menu.

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

Author

Links

Made with

About the code

Menu Effect

Reverse text color menu effects.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS-Only Nested Dropdown Navigation

CSS only nested dropdown navigation with ARIA.

Full Page Off-Canvas Navigation

An example of how to build a full page navigation that exists off of the screen canvas, sliding into view when clicking the menu option. Added spice with a changing background color depending on navigation item hover.
Made by Caleb Varoga
June 17, 2016

Simple Radial Menu

HTML, CSS, JavaScript simple radial menu with social icons.
Made by Nikolay Talanov
June 13, 2016

Accordion Menu

Simple accordion menu with HTML, CSS and JavaScript.
Made by JuliaRietveld
June 8, 2016

Mobile Filter Menu

Filter menu created by Anton Aheichanka that has been converted into web version.
Made by Arjun Amgain
June 1, 2016

Author

Источник

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Источник

25 creative CSS menus (creative examples)

A good user flow contributes enormously to a successful website. The content, positioning and appearance of your menu/navigation should therefore be well thought out. Here you can find some inspiration and examples for your own CSS menu!

Partially in this list are “normal” CSS menus, for a very simple reason: the usability comes first and only then the appearance. Normal menu bars can also look very chic. With the right effects and animations they become a real eye-catcher.

The same of course applies to mobile displays, often called “hamburgers”. I have also compiled a large collection of CSS hamburger menus for you in the linked post.

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Cool Nav Menu Hover

See the Pen Nav Menu Hover by Hans Engebretsen (@hans) on CodePen.

Author: Hans Engebretsen;
Coded in: HTML, CSS (SCSS);

#2 Sticky Navigation Menu with Smooth Scrolling

Author: Praveen Bisht;
Coded in: HTML (Pug), CSS (SCSS), JS (jQuery);

#3 Pure CSS DropDown Menu

Author: Andor Nagy;
Coded in: HTML, CSS;

#4 Accessibility menu

Author: Lee Kiernan;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#5 CSS Menu hover effects

Author: Sarath AR;
Coded in: HTML, CSS;

#6 Icon Menu

See the Pen Nav/Menu Button by Graham Pyne (@gpyne) on CodePen.

Author: Graham Pyne;
Coded in: HTML, CSS;

#7 Snap.svg Menu animation

Author: romagny jerome;
Coded in: HTML, CSS (SCSS), JS (Snap.svg);

#8 Standard Nav Bar

See the Pen Nav Bar by Justin (@nilbog) on CodePen.

Author: Justin;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#9 Half-page Menu

See the Pen menu by mp_graphic (@mp_graphic) on CodePen.

Author: mp_graphic;
Coded in: HTML, CSS, JS (jQuery);

#10 CSS menu transitions

Author: Khaos;
Coded in: HTML, CSS;

#11 Vertical Navigation Menu

Author: Madalin Tudose;
Coded in: HTML, CSS, JS (jQuery);

#12 Portfolio Icon Nav

See the Pen Portfolio by Ridho Ahmad Batubara (@beteer) on CodePen.

Author: Ridho Ahmad Batubara;
Coded in: HTML, CSS, JS (jQuery);

#13 Responsive navigation multilevel

Author: Stéphanie Walter;
Coded in: HTML, CSS (Less), JS (jQuery);

#14 Nav Menu Design

See the Pen Nav Menu Design by Abdullah Al Amin (@billionbd) on CodePen.

Author: Abdullah Al Amin;
Coded in: HTML, CSS, JS;

#15 Full page drop down – GSAP

Author: Rath;
Coded in: HTML, CSS, JS (jQuery, TweenMax.js);

#16 Lavalamp CSS Menu

Author: Patak;
Coded in: HTML, CSS;

#17 Circle Nav

See the Pen Circle Nav by Corey Roth (@coreyroth) on CodePen.

Author: Corey Roth;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#18 Magic Line Menu

Author: Collin Smith;
Coded in: HTML (Pug), CSS (Stylus), JS (jQuery);

#19 Sliding Menu

Author: Florian-Gropp;
Coded in: HTML, CSS, JS;

#20 Another Circle Menu

See the Pen circle menu by Pierre (@Piewe) on CodePen.

Author: Pierre;
Coded in: HTML, CSS, JS;

#21 Pure CSS One page vertical navigation

Author: Hrtzt;
Coded in: HTML (Pug), CSS (Sass), JS;

#22 CSS Menu Concept (Clip-path)

Author: Charlie Marcotte;
Coded in: HTML (Pug), CSS (Sass), JS;

#23 💪 CSS menu feat. emoji

Author: Piotr Galor;
Coded in: HTML, CSS, JS;

#24 Pure CSS Menu Navigation

Author: Izzy Skye;
Coded in: HTML, CSS, JS;

#25 Pure CSS Menu

See the Pen Pure CSS Menu by Karim Khan (@icodefx) on CodePen.

Author: Karim Khan;
Coded in: HTML, CSS, JS;

Conclusion

Did you code your own fancy menu, which should appear in this list? Please let me know! 🙂

Note: All buttons are all published on codepen.io and not by me .

Not enough? Then this could be something for you:

Источник