How to Design a Website Navigation Menu with Webydo

Every website should have a good, clean navigation menu to let users know your main topics, and help them find their way around your site. A menu organizes all website content into a usable structure. They often list several options for pages to navigate on a website. An ideal menu has few options (5-8) to enhance usability, and includes familiar, easy to understand words and phrases for navigation items.

Are you looking for a simple and easy way of quickly designing navigation menus, without having to deal with the HTML and CSS? If so, we recommend you check out Webydo.

Webydo is an online content management system, whereby web designers can use a drag and drop interface to design any number of websites. Most online website builders are template based, and are meant for the casual web user.

Webydo, on the other hand, is an online web designing studio intended for the professional web designer or designing firm.

Besides a fully functional CMS for building any type of website from scratch, its other features are geared toward making the designers life much easier:

Create and mange multiple websites from one dashboard
Easy branding of your web designing business
Bill your clients directly from Webydo
Free for web designers!

Learn much more about Webydo in this post:
Designing Websites without Knowing HTML and CSS

In this series, I will be sharing several tutorials on how to create certain website elements using Webydo. If you would like to learn more, please watch the helpful video tutorials found by clicking on Help – Video Tutorials at the top of the Webydo CMS.

How to Create a Navigation Menu using Webydo

webydo menu The menu element, just like everything else in Webydo, works easily and intuitively. Just find the Menu element (between Widgets and Articles) and drag it to the content area of your page.

I will go over some of the things you can do with Webydo menus.

Change the size and placement by adjusting the width and height at the top.
Select either a vertical or horizontal menu structure.
Set the direction of the navigation menu to either left or right.
The dynamic option allows menus to be resized according to the length of text.
Click a particular menu button twice to select it.
Use the + icon on either side to add another menu item.
The + button below is for adding drop-down menu items.
When adding a link, choose to either link to an internal link, external link or anchor link.
Change the name of a menu button by clicking the text, and then editing.
If you are planning more than one menu, with different options, click Manage at the top-left. Click the little pencil icon to add a name for the menu. Add to the new menu by using New Page and New Link.
Each element in Webydo has it’s own properties options. The most common of these properties are stroke, fill and shadow. Use these options to design the menu frame.
Designing menu buttons. Select a button to edit stroke, fill and shadow in the three states – rollover, normal and active. To make it easier for you, Webydo automatically applies all changes in one button to other buttons in the same menu. Check the Edit States Together box if wanting to apply the same changes to all states. Use text padding to set a margin for buttons, which is especially useful for indenting sub-menus or providing a gap between menu items.

food network menu As you can see, creating a navigation menu with Webydo is very easy. One can virtually create any type of menu. One thing I would like to see though is the capability to resize drop-down menu elements, then organize a categorized menu structure – so that mega-menus can be constructed. A good example is the menu from www.Foodnetwork.com displayed at the right.

Get a good overview of creating navigation menus by visiting the helpful video tutorial. Go to Help – Video Tutorials, then select the Pages and Navigation video.

I trust that this tutorial has helped you more fully understand creation of menus using Webydo. If you have any questions, feel free to direct them below in the comments.

For more on Webydo, please read this article:

Review of Webydo