Yes. The Navigation Bar widget makes drop-down menus from your directories. A directory is a page that holds other pages, like a folder. It becomes an item in your menu, and the pages inside it appear in a drop-down below it.
EverWeb 4.6 and later has a new Navigation Bar with many more options. It can show two drop-down levels (a drop-down, plus a second one that opens from an item inside it), so your menu can have three levels in all. Its menu items and drop-down items take their look from Button Styles, and on phones it becomes a menu button at a width you choose or when the items no longer fit. EverWeb 4.5 and earlier show one drop-down level.
If you don't have a menu yet, add one first: see How do I add a navigation menu to every page of my website?
Make a drop-down menu
- Click Add Directory in the toolbar, choose a page style, and click Select. The new directory has a folder icon in your page list.
- Give it the wording you want in the menu: select it, go to Inspector > Page Settings, and type it in Navigation Menu Display Name.
- Put pages inside it. Drag a page a little under and to the right of the directory, and drop it when you see the guide line. To make a new page inside it, select the directory and click Add Page.
- EverWeb 4.6 and later, for a second drop-down level: put a directory inside the first directory, the same way, and put pages inside that one. Its pages open in a second drop-down beside the first. A third directory level inside that doesn't appear in the menu.
- Click Preview and move the mouse over the menu item. The drop-down opens.
- Publish with File > Publish Entire Site. The menu is on every page, so every page needs publishing again.
Want to turn an existing page into a directory? Right-click it in the page list and choose Convert To Directory.
Directories go in your normal page list. You can't make one in the Master Pages list.
EverWeb 4.6 and later: how the drop-downs look
Select the Navigation Bar and go to Inspector > Widget Settings.
- Menu Items > Menu item style chooses the Button Style for the top menu items.
- Dropdown Menus > Dropdown item style chooses the Button Style for the items inside the drop-downs, so they can look different from the top row.
- Directory indicator is the small symbol beside items that open a drop-down: Chevron, Triangle, Plus or None. Indicator size sets its size, and it follows the item's text colour unless you untick Use item text color and pick a Custom color.
To create or change a Button Style, choose Edit Button Styles... at the bottom of either style menu, or use Format > Website Styles... and click Button Styles. Every menu and button that uses the style updates when you save it. See Design buttons that look clickable: colours, rounded corners, shadows and hover effects.
A menu added before EverWeb 4.6 keeps its old settings, even when you open the project in 4.6. To get the new options, delete the old Navigation Bar from your Master Page, drag in a new one, and style it again.
What happens when someone clicks the menu item
A directory is a page too, so clicking its menu item opens it. To send visitors to the first page inside it instead, select the directory, go to Inspector > Page Settings, and tick Redirect to first child page. This also helps on phones and tablets, which can't hover over a menu. The directory must have at least one page inside it.
On phones
EverWeb 4.6 and later: under Layout, When space is limited decides what the menu does on narrow screens:
- Wrap: the items move onto more rows.
- Hamburger when needed: the menu becomes a menu button as soon as the items no longer fit.
- Hamburger at breakpoint: the menu becomes a menu button below the width you type in Breakpoint width (px).
In the opened phone menu, your drop-downs appear as nested rows under their directory. Mobile Hamburger Menu styles the button (its Button Style, label and icon), Hamburger Menu Appearance sets whether the menu covers the page or pushes it down, its background and text alignment, and Mobile Animation and Behavior sets the open effect and whether the menu closes after a visitor picks a page. For every option, see How do I add a navigation menu to every page of my website?
EverWeb 4.5: turn on Responsive Navigation Bar in the menu's Widget Settings, so it becomes a menu button on small screens.
If your drop-down doesn't work
| What you see | What to do |
|---|---|
| It opens behind photos or text | On your Master Page, select the Navigation Bar, go to Inspector > Metrics and tick Always On Top. If the menu is inside a Container, tick Always On Top on that too. To select it, right-click and use Pick Layer. |
| It disappears as you move the mouse down to it | Usually the same cause: something on the page sits in front of the menu. Use Always On Top as above. |
| A page is missing from the drop-down | Select the page, go to Inspector > Page Settings, and check Include page in navigation menu is ticked. In 4.6, also check Hide my site's pages isn't ticked in the menu's Menu Items. |
| A second drop-down level doesn't show | EverWeb 4.5 menus show one drop-down level. In 4.6, use a new Navigation Bar (see above), and keep to two levels of directories. |
| The drop-down colours | In 4.6, change the Button Style chosen in Dropdown item style. In 4.5, change them in the menu's Widget Settings. |
| It still misbehaves | Send us your project file and the name of the page |
Related articles
- How do I add a navigation menu to every page of my website?
- Design buttons that look clickable: colours, rounded corners, shadows and hover effects
- Put the same header, menu and footer on every page with a Master Page
- How to put a link to another website in EverWeb's navigation menu
- What's the difference between Publish and Publish Entire Site?