EverWeb Codebox

Two Level Drop Down Mobile Navigation

Dealing With Directories

Directories are a convenient way of simplifying mobile website navigation. They make it easier to organize the pages and for the visitor to find their way around. Any mobile site with more than a handful of pages should use directories.

This jQuery nested accordion navigation menu can handle a fairly large number of pages in a small space.

NOTE: Ther is now a widget for creating this style of navigation menu.

<div id="m-nav">

     <ul id="m-nav" class="accordion">

<!-- 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>

          </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>

          </ul>

        </li>       

<!-- link-->

          <li class="link"><a href="#">Link</a></li>

      </ul>

</div>

HTML

Note how one directory closes automatically when another is opened.

Any open directory can also be closed by clicking it. The rather noticeable red X gives visitors a clue.


Since the navigation will expand downwards and cover any content beneath it, the menu should be brought to the front using the Arrange menu once the content has been added.


The variables in the HTML are the page and directory names and the URL to each page. The relative URL is pasted into each link to replace the hash sign (#).


This particular navigation menu has a width of 300px. This is about right for a smart phone size website with a page width of 320px.

The width can be adjusted in the CSS along with the text styles and colors.

<style type="text/css">

#m-nav {

     width: 300px;     /* navigation width */

     background:#222;      /* navigation background color */

     font: 15px "Verdana", Helvetica, sans-serif;     /* font size and font family */

     margin:0}

#m-nav a {     

     padding:7px 10px;

     border:1px solid ;display:block; border-width:0 0 1px;

     border-color:#888;      /* navigation block separator color */

     color:#eee;      /* font color */

     text-decoration: none; }

#m-nav a:hover {color: #157FFF}     /* font hover color if required */

.js #m-nav .accordion {display:none}

.accordion {margin:0; padding:0 10px}

.accordion li {list-style:none}

#m-nav ul.accordion ul {margin:0; padding:0 0 0 20px;}

.accordion a.trigger {display:block; background-repeat: no-repeat;}

.accordion a.trigger:before {

     content:"\25BC";

     color: #157FFF;      /* navigation block down arrow color */

     position: relative; float:right;margin-right: 10%}

.accordion a.trigger.open:before {

     content: "\2716";

     color: #FF0000;}     /* navigation block close x color */

.accordion .link a.trigger:before {

     content:"\25BA";

     color: #ddd;}     /* navigation block arrow left color */

</style>

CSS

Javascript

After making any changes to the styles, copy the code and paste it into the Head Code box in the Site Publishing settings page if the navigation is to appear on every page of the site. Otherwise, paste it into the Head Code box in the page inspector if the navigation is only required on one or two pages.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/jquery.nestedAccordion.js"></script>

<script type="text/javascript" src="{!-ASSETSPATH-!}External%20Files/mobi-nav.bootstrap.js"></script>

The navigation requires jQuery, the nested accordion plugin and a setup javascript. Click HERE to get to the download page.

Drag the jquery.nestedAccordion.js and the mobi-nav.bootstrap.js into the EverWeb Assets column.

Control click each one in turn to "Copy Relative File Path" and paste it into the code below where marked in red.

Then copy all the code and paste it into the appropriate Code box.

Use the Footer Code box in the Site Publishing Settings page if the menu is required on every page of the site.

Paste the code into the Footer Code box in the page inspector if the navigation is only required on one or two pages.

EverWeb Codebox Mobile Website Demo