GenerateIt

CSS Responsive Menu Generator

Generate a responsive CSS menu with this handy tool. This generator will assist you in creating a new CSS menu for your webpage. Update any properties below to visually see the changes to the menu. All code is generated automatically, just copy and paste into your project.

With Thanks: A big thank you to CSSPortal for letting us use the code to their menu generator.
⮞ Responsive menu - code generated will now be responsive.
⮞ Design your own menu - Click on Menu Design below and you'll be able to add or delete menu items from the menu.
⮞ Rearrange the order of the menu.
⮞ Added - select from different dropdown arrows for the submenus.
⮞ Download Menu - click on the icon to download your menu. (May not work in all browsers)

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!
Menu Options
Background
Menu Bar Height
45px
Corner Radius
10px
Menu Alignment
Border
0px
Fonts
16px
Dropdown Icon
Hover Text Color
Hover Background
Fonts
16px
Background
Hover Text Color
Hover Background
Menu Structure
  1. Drag
    Home
    Delete
  2. Drag
    Products
    Delete
    1. Drag
      Products 1
      Delete
    2. Drag
      Products 2
      Delete
    3. Drag
      Products 3
      Delete
    4. Drag
      Products 4
      Delete
  3. Drag
    About
    Delete
  4. Drag
    Services
    Delete
    1. Drag
      Services 1
      Delete
    2. Drag
      Services 2
      Delete
    3. Drag
      Services 3
      Delete
  5. Drag
    Contact Us
    Delete
Add New Menu Item


Instructions
  • To rearrange the order of the menu, grab the icon and drag to new position.
  • To create a submenu, grab the icon and drag the menu to the right.
  • To remove a submenu, grab the icon and drag the menu to the left or to new position.
  • Any menu item can be deleted by clicking on the red cross.
  • Note: If you delete a top menu that has submenus, all of the submenus will also be deleted.
  • To add a new menu, fill in the Menu Label and URL and click 'Add'. Menu item can then be dragged to position required.
  • Menu preview will update automatically.
CSS Code
HTML Code
Javascript Code

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!
If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!