If you’re looking for a two level dropdown navigation menu widget, EverWeb PowerUp has just dropped the widget you’re looking for on its site! As you may know, EverWeb’s own Navigation Menu widget only allows you to have one level of dropdown in the navigation. There’s a good reason why this is so, which is basically that it makes for a better user experience. Having a navigation with multiple levels can become a navigation nightmare for your site’s visitor. Clean, simple navigation makes it easier to find what you are looking for without the hassle of having to dig deep in to a multi-layered navigation. Ultimately, designing your site should always focus on making a great user experience.
Having said that, however, there may be times where it’s necessary, and appropriate, to break that design wall down! EverWeb PowerUp’sMultilevel Dropdown Menu Widget does just that by giving you a responsive navigation menu with two levels of dropdown. Let’s see what the widget offers…
Downloading the Multilevel Dropdown Menu Widget
Before we get started, note that this widget requires EverWeb version 3.4 or higher. If you’re running a version of EverWeb earlier than 3.4, you can update to the latest version using the EverWeb-> Check for Updates… menu option. Note that you may need to pay for the update if your maintenance and support agreement is out of date.
Once you’re sure that you version of EverWeb can use the widget, go to the EverWeb PowerUp website. Click on the Widgets page and hit the Download button beside the Multilevel Dropdown Menu widget. The widget will download to your computer’s default download folder.
Installing the Multilevel Dropdown Widget
Installing the widget is easy. Just launch EverWeb then click on the Widgets tab. Next, drag and drop the Multilevel Dropdown Menu widget from your download location on to the widgets in the Widgets tab in EverWeb. The widget will be installed and is now available for use!
Creating Your Navigation
to use the widget, simply drag and drop it on to your page then use the Widget Settings to create the navigation. The first section, Pages, is where you define the top level menu items. Two ‘Pages’ have been added by default: First Item and Second Item. Simply double click on these names to change them to what you require. Use the Add button at the bottom of the list to add additional top level menu items. As you would expect with EverWeb’s list boxes you can delete and move menu items up and down the list as desired.
Adding Sub Pages
The ‘Sub Page’ is the first level dropdown menu level. To begin, highlight the Page you want the sub menu to appear on. If the Sub Pages box is empty, click on the ‘Add page to the dropdown’ menu list. Select the page you want from the list then click on ‘Add Page’ to add. the item to the ‘Sub Pages’ list. If you click on ‘Add Page’ before selecting a page from the dropdown you will get an error message so there is a specific order of actions you need to follow when adding a Sub Page.
To add additional pages, make sure that the first ‘Sub Page’ is highlighted. You can now use the ‘Add Page’ button to add a second Sub Page. Once this has been added you can change the page that it directs to using the dropdown menu above the ‘Add Page’ button. repeat this process to add more Sub Page menu items.
Menu items can be easily reordered in the list by drag and dropping them up or down the list, and you can delete menu items just by pressing the backspace key once you have highlighted the menu item you want to remove.
Adding Third Level Pages
Once you have added one, or more, Sub Pages, you can then add Third Level pages. The process is the same as for adding Sub Pages but in this case, you highlight the Sub Page you want to add the third level menu to, then use the Third Level Pages section to add the third level menu items.
Add Your Own Logo
Like EverWeb’s own Navigation Menu widget, you can also add a logo in EverWeb PowerUp’s own widget. You can also set the width of the logo as desired. You can type in whatever number you like, but in practical terms, the maximum logo size limit seems to be at about 60.