HTML5 Tips: Add Drop-Down Menus to Your Website

Designing with Wix | June 25th 2012

There’s nothing like announcing a new feature, especially when we know so many of you were looking forward to :)

Drop down menus are now available on HTML5 websites! 

Drop down menus are a great way save space on your website and neatly organize subcategories. Drop-down menus also improve a website’s usability by reducing the numbers of clicks from the main navigation menu.

Websites that have a large number of pages, or that require organizing content into different themes, can benefit a great deal from using drop down menus to improve the overall user experience.  And now to the juicy part:

 

How to Add a Drop Down Menu to Your HTML5 Website

  • In the HTML5 editor, click on Pages.
Pages Menu

Pages Menu

  • The pages window that now opened shows all the pages that currently exist in your template (Home, About, Contact, etc.). Let’s say you want to add a sub page to the About page.
  • Click on About in the Pages menu.
  • Now click on the Add Page link.
Page menu - "Add Page"

Page menu – “Add Page”

  • You can now choose the layout to your new sub-page and name it.
"Add as sub page"

“Add as sub page”

  • Check the “Add as sub page” checkbox and click OK.
  • You will now see that the sub-page has been added to your menu, right below the About page.
The new Sub page

The new Sub page

  • Save your website.

And that’s it! If you go to the preview mode you’ll see that the-sub page you added is viewable through the drop-down menu.

If you’re adding a drop down menu to your HTML5 website, please share it with us here in the comments!

 

Tagged with: .