Responsive Navigation

Two level navigation with hover drop down directories on computers and accordion directories on touch devices

Responsive Navigation

Navigation

The navigation is displayed inline when the page is viewed on a computer and switches to a vertical navigation - opened on click - when viewed on touch devices.
The menu can accomodate up to six top level links and three directories. The last top level link can be configured to open an external page if required and has a new window option.
Each directory can have between two and six links.

Directories

The directories open on hover when the page is viewed on a computer and have a chevron down icon to indicate that interacting with the tab will show more info.
On mobile devices, the vertical menu has accordion style directories which open and close on click. They have a chevron down indicator when closed and a chevron up when in the open state.
The menu can be placed either left or right of the device window.

Header

The navigation works in conjunction with the Navigation Responsive Header widget. This has an optional logo, an h1 heading for the website name and the "hamburger" tab for opening and closing the menu on touch devices.
The position of the logo and tab can be switched if required.

Position

In this example, the full site navigation is positioned just below the header and over the top of a Hero Content Banner widget so that it doesn't leave a blank space when the page is viewed on a tablet or smart phone.

© EverWeb Widgets -

EverWeb Widgets