EverWeb Codebox logo

EverWeb Widgetbox 3

Two Level Mobile Navigation Menu On Click

Two level Icon Mobile Navigation

Click To Open & Close

The two level navigation opens on click from a button which is created using pure CSS. The button text can be change to suit different languages and its length adjusted to suit.
The drop down section is based on an accordion menu so that when one sub section is opened, the previously opened one closes.
When used on a smart phone website the navigation drop down can stretch across the full screen width as is normal for these devices.
It can also be used on the conventional version of a website since there is more than a 50% chance that visitors will be using a tablet device like an iPad. In this situation the menu can be created just as wide as is necessary to accomodate the list item text so that it doesn't dominate the page when in the open position.

Widget Settings

Icon Two level mobile nav menu
Icon Two Level Mobile Menu

Widget Settings

The widget settings are shown to the right and are easy enough to understand.
There a some points which deserve mention...
When the widget is dragged onto the design canvas, the drop down appears in the open position. This is so that it can be seen for setting the styles. Before pubishing, the "Show Navigation" checkbox should be unchecked to hide the drop down.
When the menu is in the open position, it is still necessary to click or hold on the actual button -rather then the drop down - to select it or drag it around.
The menu button should be selected and brought to the front using the "Arrange" menu prior to publishing the page.
The HTML for the menu is shown below and more instructions for creating this can be found on the Instructions page.
NOTE: The comments should be deleted before pasting the HTML into the box in the widget settings.

HTML

<!-- link-->
<li class="link"><a href="#">HOME</a></li>
<!-- directory 1-->
<li>Directory 1
<ul>
<li class="link"><a href="#">Link 1.1</a></li>
<li class="link"><a href="#">Link 1.2</a></li>
<li class="link"><a href="#">Link 1.3</a></li>
</ul>
</li>
<!-- directory 2-->
<li>Directory 2
<ul>
<li class="link"><a href="#">Link 2.1</a></li>
<li class="link"><a href="#">Link 2.2</a></li>
<li class="link"><a href="#">Link 2.3</a></li>
</ul>
</li>
<!-- directory 3-->
<li>Directory 3
<ul>
<li class="link"><a href="#">Link 3.1</a></li>
<li class="link"><a href="#">Link 3.2</a></li>
<li class="link"><a href="#">Link 3.3</a></li>
</ul>
</li>
<!-- link-->
<li class="link"><a href="#">Link</a></li>

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.