EverWeb Codebox logo

EverWeb Widgetbox 3

Two level Mobile Navigation

Two Level Mobile Navigation

mobile two level navigation widget

Accordion Style Click To Open/Close

This widget creates a two level, compact accordion style navigation menu.
The directories are indicated by an icon and open with a click. When another directory opens, the previous one closes.
This navigation can be used at any width on a conventional are tablet site and full width on the smart phone version.
Different icons can be set for th Home tab, the directory dropdowns and the single level tabs.
The icons can be any of the ones on THIS page.

Widget Settings

The widget settings are shown to the right and shouldn't require any explanation for the experienced EverWeb user.

The HTML for the menu is shown below and more instructions for creating this can be found on the Navigation Instructions page.
NOTE: The comments should be deleted before pasting the HTML into the box in the widget settings.

HTML

<!--Link [1]-->
<div class="navButton first"><a href="#">HOME</a></div>
<!--Directory [1]-->
<div class="navButton visible"><a href="#">Products</a></div>
<div class="navContent">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
<!-- Add more as required -->
</ul>
</div>
<!--Directory [2]-->
<div class="navButton visible"><a href="#">Services</a></div>
<div class="navContent">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<!--Directory [3]-->
<div class="navButton visible"><a href="#">Videos</a></div>
<div class="navContent">
<ul>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
<!--Link [5]-->
<div class="navButton single"><a href="#">Contact</a></div>

Code Editing & Inserting

It's not necessary to use a code editor to create the HTML - TextEdit.app will do fine if set to plain text. Set this in Preferences/New Document/Format.
Once the code is completed it can be copied and paste to the HTML box in the widget settings. Keep a copy of the Text Edit doc for future reference and updates.
The navigation is inserted on the Master Page(s) so that the HTML can easily be updated for the whole site when new pages/directories are added.
Stacking Order
The widgets need to be brought to the front before the page is published so that the drop down is above any items below the button.
Note that EverWeb V1.8 has a new feature in the Arrange menu for this purpose named "Always On Top".

New Window
Links to external pages can be created by using an absolute URL and these can be persuaded to open in a new window by inserting target="_blank" into the anchor like this...

<a href="#" target="_blank">Page</a>

This widget is included in the Navigation-2 widget pack.