• Home
  • CSS Responsive Menu Generator

CSS Responsive Menu Generator

Visually generate a CSS responsive menu, this generator will help you design a CSS3 menu for your website, you can update any property and instantly see the changes that you have made. All of the CSS, HTML and Javascript code is generated for you and can be copy and pasted into your webpage.

Updated: This CSS Menu Generator has now been updated so that you can do the following:
⮞ 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)

Menu Options
  • Menu Bar
  • Top Menu
  • Sub Menu
  • Menu Design
  • Background

    Menu Bar Height

    45px

    Corner Radius

    10px

    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 Sub Menu 1
        Delete
      2. Drag
        Products Sub Menu 2
        Delete
      3. Drag
        Products Sub Menu 3
        Delete
      4. Drag
        Products Sub Menu 4
        Delete
    3. Drag
      About
      Delete
    4. Drag
      Services
      Delete
      1. Drag
        Services Sub Menu 1
        Delete
      2. Drag
        Services Sub Menu 2
        Delete
      3. Drag
        Services Sub Menu 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