EverWeb Widgets

Navigation [3]

These widgets create a two level navigation based on a menu which has accordion style drop downs for the directories.
The responsive menu switches from inline on computers to an accordion style vertical menu on tablets and smart phones and is used in conjunction with the corresponsing header widget.
The toggle menu can be in view on page load or toggled on/off using four different widgets for creating stand alone tabs and tabs incorporated in a responsive header.
The slide in version is actived by standalone tabs or tabs incorporated in a responsive header.
Click any widget icon to see the demo …

View CartAdd To Cart

Responsive 2 Level Navigation

The menu appears as inline when viewed on computers. On touch devices like an iPad, the menu disappears and is active by a tab in the corresponding responsive header.
The menu can have up to six single level items and three directories - each with up to six items. The last single level item can be configured as an external link.

Responsive Toggle Header

The header is used in conjunction with the Responsive 2 Level Navigation. It is full width responsive and has and h1 heading for the website name and optional logo which can be positioned left or right.
When the page is viewed on mobile devices, the tab appears and is used to toggle the menu on/off. It can be positioned left or right.

2 Level Accordion Menu

The menu can be used as a vertical navigation for fixed width page designs which appears on page load and can be placed anywhere. It accommodates up to six top level links and three directories. The last top level link can be configured as an external link which can open in a new window if required. There are three directories. Each one can accommodate up to six links.

Toggle Menu Header

The Toggle Menu Header creates a full width, responsive header with an h1 heading for the website name, an optional logo and a tab for toggling the menu open and closed. The position of the logo and tab can be switched.
This header should be used when the menu is part of a responsive page where the navigation can be stuck to the left or right of the browser or device window.

Toggle Menu Tab

The tab is a standalone trigger to open/close the Accordion Menu. It can be placed anywhere on the page or command dragged into a fixed width header.
The tab is mainly for use on fixed width designs where the responsive header is not required or appropriate. It comprises three horizontal bars and can be adjusted for color, background, background opacity and border radius.

Toggle Menu Chameleon Header

The Chameleon Header has the same function and all the same features as the Toggle Menu Header.
The tab for toggling the menu open and shut changes state from a hamburger style icon in the closed state to a large X when the menu is open.
The icon can have different colors for each state.

Toggle Menu Chameleon Tab

The Chameleon Tab has the same function and all the same features as the Toggle Menu Tab.
The tab for toggling the menu open and shut changes state from a hamburger style icon in the closed state to a large X when the menu is open.
The icon can have different colors for each state.

Slide In 2 Level Menu

The menu slides in from the left at a preset distance from the top of the browser or device window. It accommodates up to six top level links and three directories. The last top level link can be configured as an external link which can open in a new window if required. There are three directories. Each one can accommodate up to six links.
The menu is used in conjunction with any of the Header or Tab widgets described below.

Slide In Header

The Slide In Menu Header creates a full width, responsive header with an h1 heading for the website name, an optional logo and a tab for sliding the menu in and out. The position of the logo and tab can be switched.
This header should be used when the menu is part of a responsive page where the navigation slides out below it when the tab is clicked or tapped.

Slide In Tab

The tab is a standalone trigger to slide the menu in and out. It can be placed anywhere on the page or command dragged into a fixed width header.
The tab is mainly for use on fixed width designs where the responsive header is not required or appropriate. It comprises three horizontal bars and can be adjusted for color, background, background opacity and border radius.

Slide In Chameleon Header

The Slide In Chameleon Header has the same function and all the same features as the Slide In Header.
The tab for sliding the menu in and out changes state from a hamburger style icon in the closed state to a large X when the menu is open.
The icon can have different colors for each state.

Slide In Chameleon Tab

The Chameleon Tab has the same function and all the same features as the Slide In Tab.
The tab for sliding the menu open and shut changes state from a hamburger style icon in the closed state to a large X when the menu is open.
The icon can have different colors for each state.

© EverWeb Widgets -