Online CSS Menu Generator
Online CSS Menu code generator
FREE to use
Browser Compatibility
Supported by all other major browsers (including IE8+).
Layout
Rich HTML mega menu, or unlimited multi-level dropdowns.
-
Step 1
Has Sub Menus
Breakpoint
Note:-
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.
Disabled.
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.
-
The CSS Menu will support the breakpoint (responsive feature) only when it has no sub-menus.
-
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
pxArrow 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:
/*--begin mark1--*/ #cssmenu { position:fixed;top:0;bottom:0;left:0;right:0; height:100%!important; transition:all 411ms ease; opacity:0; } #cssmenu.active { opacity:1; } #cssmenu {z-index:1000000004;} .mobile-fixed-bg {display:none;} .menu-icon.active { position:fixed;top:12px;left:12px;z-index:1000000006; } /*--end mark1--*/px -
Padding X
Padding Y
This Padding Y and Font Size determine the height of the menu bar.
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.
Text Color
Hover Text Color
Font Size
Hover Background
Font Weight
Uppercase
Letter Spacing
Font
-
Min-Width
It specifies either the min-width of sub-menu UL, or if any, the min-width of each column (DIV.clm) under the full-width dropdown DIV.
Set it to 0 or initial if no specific min width is required.
We are using CSS box-shadow property to specify the border shadow effect.
If you dislike the shadow border, you can remove the box-shadow specification from the generated cssmenu.css file, and if you prefer solid border, add border specification there.
Padding X
Padding Y
Text Color
Hover Text Color
Background Color
Hover Background
Shadow Color
Font Size
Font Weight
Font
-
Position
- Relative: The menu will appear at its default position in the HTML document
- Absolute: Similar to above Relative except it is removed from the normal document flow. When the menu is open it will stay on top of its following contents instead of pushing them down.
- Fixed: When the menu is open it will occupy the whole screen.
Slide-in From
Max Width
Menu Item Text Align
Font Size (Top-level)
Menu Border Color
-
Switch the Demo preview window to mobile mode, you will see that by default, the menu on mobile device will become a hamburger icon:
- If the menu icon is not at your preferred location, you can later manually modify the generated cssmenu.css by the .menu-icon and .menu-icon.active selectors.
- If you want to add text "MENU" after the menu icon, just add it to the HTML code. Example
<div class="menu-icon"> <div class="three-line"> <span></span> <span></span> <span></span> </div> <span style="font:bold 24px Arial;padding-left:10px;letter-spacing:-2px;">MENU</span> </div>You can see the live example in the One menu HTML code file for all pages viewing with mobile device or small browser window.
Hamburger Icon
Align
Its position might also be specified based on the Position and Slide-in From options under the "Menu in Mobile Mode" tab.
For details please click the question mark beside the Slide-in From option mentioned above.
Icon Width
pxLine Spacing
pxLine Thickness
pxLine Color
Icon padding
pxIcon Margin
pxIcon Background
Border Color
-
-
Step 4
Top Item Animation in Mobile mode
Top Item Animation CSS Code
More Styles that You Want to Add
This specification and the next Top Item Animation CSS Code will specify the animation effect for the menu item links in mobile mode.
Leave this box blank if you don't need animations for the menu links.
Its value format: Animation order, duration, timing-function
-
Animation order
- 1: The animation will start from the first link to the last
- -1: The animation will start from the last link to the first
- Duration: number in seconds
- Timing-function: possible values such as linear, ease, cubic-bezier(n,n,n,n). For details please refer to animation-timing-function.
The animation code that applies to the menu links.
Here you can add any additional CSS code to customize your menu styles.
-
Animation order
-
Complete
Congratulations! You have completed the menu customization.
You can now click the "Download Source Code" button in this page to download the source code.
If you need more customization that is not provided by this CSS Menu Builder, you can directly modifying the generated mcmenu.css in the download package.
HTML
-
Single-level Responsive Menu:
If you have not chosen Has Sub Menus in Step 1, the menu is single-level menu that supports the responsive feature.
The menu HTML code contains a hamburger icon, the menu markup, and a piece of JavaScript code to support the opening/closing of the menu when the menu icon is clicked.
View the HTML code
-
Multi-level Menu:
If you have chosen Has Sub Menus in Step 1, the menu is multi-level menu that can have unlimited level of sub-menus.
The Multi-level Css Menu does not support the responsive feature. Please use McMenu: Responsive Menu when your menu has sub-menus and needs to be responsive.
View the Demo HTML code:
-
To get Mega menu dropdown (as the one under the demo's Press item), just:
<li class="full-width">...<div class="dropdown">...</div></li> -
To get single-column dropdown (as the one under the demo's Creative or Contact item), you can:
<li>...<ul class="dropdown">...</ul></li>Note:- You can have nested ULs to aquire multiple-level sub-menus.
- If the sub-menus are under the last top-level item, you can add class="dropdown right0" so that the drowdown will be right-aligned and fly-out to the left.
-
To get Mega menu dropdown (as the one under the demo's Press item), just:
CSS
Select the style template that best fits your needs in the customization Step 2, and then continue to next step for further customization.
Need to right align last submenu?
There is a pre-defined class right0. Just add class="right0" to the last top-level LI element.