EverWeb Codebox logo

EverWeb Widgetbox 3

Advanced Navigation Instructions

Navigation Structure

A navigation menu is simply an unordered list of links with some CSS added to make it look and act in the required manner.
The navigation projects described here don't require anything much more than a very basic understanding of an HTML list layout and the ability to follow instructions and copy/paste.
The Navigation Widgets section covers several types of single level menu. The ones in this Advanced widget section are for two level menus for both standard and mobile websites.
The widgets insert all the necessary files and allow the styling to be achieved using simple controls. The only part that requires the user to actually see code is the HTML used to create the list.

The List

The HTML shown to the right shows a typical navigation menu with both top level links and sub menus.
The items are commented so it's pretty clear which does what.
Each list item requires the link text to be changed and the relative file path to the page inserted to replace the hash # sign.
NOTE that the home page MUST have the file path "index.html"
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>

Links like this can be used to send visitors to a blog - or other site related site - while still keeping the parent site visible.
It should be obvious how list items can be added/deleted from the example shown to the right.
Sub menus can be added by duplicating either of the existing ones. Copy and paste all the items inside the comments for "sub menu 1" and paste into the appropriate place in the list.
List items can then be added as required.
Once the HTML for the navigation is completed, all the comments can be deleted although it may be helpful to leave them for quickly finding the correct place to add list items in the future.
The HTML can then be pasted into the box widget in the navigation widget's settings.

HTML

<nav id="flyout">
<ul>

<!-- single level item -->
<li><a href="index.html">Home</a></li>
<!-- end single level item -->

<!-- sub menu 1 -->
<li><a href="#">Widgets</a>
<ul>
<li><a href="#">Layout Widgets</a></li>
<li><a href="#">Image Widgets</a></li>
<li><a href="#">Slider Widgets</a></li>
<li><a href="#">Audio Widgets</a></li>
</ul>
</li>
<!-- end sub menu 1 -->

<!-- sub menu 2 -->
<li><a href="#">Info</a>
<ul>
<li><a href="#">Buy</a></li>
<li><a href="#">Install</a></li>
<li><a href="#">Use</a></li>
</ul>
</li>
<!-- end sub menu 2 -->

<!-- single level item -->
<li><a href="#">Contact</a>
<!-- end single level item -->

</ul>
</nav>

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.