EverWeb Codebox

Mobile Popup Navigation

Lightweight Single Level Navigation Menu

This navigation uses the universally accepted symbol to popup a single level navigation menu when tapped on mobile devices and to close with another tap.

The navigation is suitable for use on every page of a mobile site due to its compact size and the fact that the icon itself is created using CSS and HTML rather than an image.

Click HERE and HERE to see the widgets for creating this type of navigation

<nav id="clickNav">

<div class="navButton"></div>

<ul class="navContent">

          <li><a href="#">Home</a></li>

          <li><a href="#">About</a></li>

          <li><a href="#">Products</a></li>

          <li><a href="#">Blog</a></li>

          <li><a href="#">Contact</a></li>

     </ul>

</nav>

HTML

There's not much to the HTML and the only variables are the URL and the list item page names. Replace the hash sign with the relative path to the page and change the page names to suit.

The styles shown below are comment to make it easier to change the colors, font, width etc. Paste them into the Site Wide Head Code box.

Remember to select the navigation icon and bring it to the front using the Arrange menu once the rest of the page content has been added.

CSS

<style type="text/css">

#clickNav {width:250px;  /* drop navigation width */

height:auto;margin:0;padding:0;overflow:hidden

}

#clickNav .navContent {margin:0;padding:0;float:left;display:none;margin-bottom:5px;

}

#clickNav ul{list-style:none;width:96%;margin:0;padding:0;

background:#000;     /* background */

border:2px solid #888;     /* border width and color */

border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; /* border radius */

position:relative;top:5px;left:2px

}

#clickNav li {width:90%;margin:0 auto;

border-bottom:1px solid #ccc;          /* separator width and color */

background:none

}

#clickNav li:last-child {border:none

}

#clickNav li a{display:block;font:14px verdana, sans-serif;     /* font & size */

color:#ccc;          /* font color */

margin:0;padding:7px 5px;text-decoration:none

}

#clickNav li a:after{content:"\27A4";      /* arrow */

position:relative;float:right;

}

#clickNav .navButton {

cursor:pointer;

height:32px;

width:32px;

background: #FFF;      /* icon background color */

border: 3px solid #000000;     /* icon border color */

color:#000000;     /* icon color */

margin:0;padding:0;

border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;

font-size:36px;

position:relative

}

#clickNav .navButton:after{content:"\2630";     /* nav button icon */

position:absolute;top:-10px

}

</style>

EverWeb Codebox Mobile Website Demo

Download the clickDropNav.js file and drag it into the Assets list.

Control click it to copy the relative path and then paste it into the code below where marked in red.

Paste the javascript into the Site Wide Head Code box beneath the styles.

Javascript

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

<script type="text/javascript" src="clickDropNav.js"></script>