Menu maker in css

Online CSS Menu Generator

Supported by all other major browsers (including IE8+).

Layout

Rich HTML mega menu, or unlimited multi-level dropdowns.

Step 1

Has Sub Menus

Breakpoint

• The CSS Menu will support the breakpoint (responsive feature) only when it has no sub-menus.
  Please use McMenu: Responsive Menu when your menu has sub-menus.

• If checked, the menu HTML will contain sub-menus.
• If unchecked, the menu HTML will contain only single-level menu items (no sub-menus), and if breakpoint is set, the menu will become the hamburger icon when the window width is less than the breakpoint, and clicking on the icon will toggle the menu display.

You can uncheck the Has Sub Menus option, or use McMenu instead.

For details please see the note below.

It is the responsiveness setting: the menu will become a hamburger icon when the window width is less than the setting, and clicking on the icon will toggle the menu display.

Step 2: Choose style template

Select the style template that best fits your needs. Your style customization in next step will be based on the chosen template.

Step 3: Styles

Display

Alignment

Background Color

Border Color

Arrow Thickness

Arrow Size

• Inline-block: The menu allows other adjacent inline elements stay in the same line.
• Block: The menu takes up the full block. Other adjacent elements will NOT stay in the same line.

The menu will slide in from this position when menu icon is clicked.

Note:
Some style codes, such as menu icon position, menu animations in mobile mode, are generated based on this option and the above Position option. Those codes are between the /*—begin mark1—*/ and /*—end mark1—*/ in cssmenu.css.

If you dislike the default generated styles, you can directly eidt those codes.

Following is an example of the updated code:

Padding X

Padding Y

The font in the list is Google Fonts except the Default. If a Google Font has been chosen, there will be a Google Font link in the head section in your download HTML demo page.

Источник

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

Источник

World’s best CSS menu maker

Create beautiful pure CSS drop down menus in minutes!

Easily create fantastic CSS drop down menus for your website without writing a single line of code. Easy CSS Menu generates pure CSS drop down menu code that works in all web browsers and does not require JavaScript. Easy CSS Menu works well both for beginners and experts. 100% free for non-commercial use.

• Visual drag & drop menu editor
  Direct visual menu editor is easy and pleasant to work with
• Full web browser support
  Supports all modern and all popular but old browsers
• Works without JavaScript
  Uses no JavaScript, therefore works if JavaScript is turned off

• Create mobile-ready menus
  Create menus that work on tablets and smartphones New!
• Generates pure CSS code
  Our CSS menu maker creates valid and pure CSS menu code
• HTML 5 compatible
  Produces modern, yet backwards-compatible HTML 5 code

• Loads of icons and templates
  Easy CSS Menu comes packed with instant templates and icons
• Search engine friendly
  CSS menus are seen and processed by search engines
• Easy to insert and update
  Created menus are easy to publish and update

Better than other free CSS drop down menu tools

• Much faster and smoother
  Create a really good menu in seconds by picking a template or build any design from scratch in minutes.
• Create better-looking menus
  Instead of throwing away a few free templates to harvest your e-mail or ad-clicks, we are here to serve you professionally.
• No CSS coding headaches
  Time is money. Save hours of modifying and debugging free CSS code samples. Just use Easy CSS Menu!

Better than other commercial CSS menu tools

• Better value
  Unlimited websites, full set of templates, no expiration, everything included. Priced from just $29.95, Easy CSS Menu is the best choice.
• Designer-approved templates
  Our menu templates are approved by professional designer and usability expert. Color contrast, font sizes and spacing are just right!
• Fanatic customer service
  If necessary, we will actually look at your website and consult you.

Free CSS menu maker

Easy CSS Menu Free edition is fully functional but stripped-down version of our commercial CSS menu maker. Free version includes only 20 templates and limited features, but it is still usable for creating simple CSS menus.

Easy CSS Menu Free edition does not include dedicated customer support and advanced features. Free version is for personal, non-commercial use only.

Free edition serves also as an evaluation version for those customers who are ready to buy the full thing.

More features for just $29 .95

Источник