EverWeb Codebox

Mobile Drop Down Navigation

Single Level Drop Down Menu

This menu will drop down when the bar is tapped on mobile devices. It uses HTML entites for the directional arrows and is a pure CSS design for fast loading.

Click HERE to see the widget for creating this naviagtion.

HTML

<div class="nav">

     <ul>

          <li class="visible"><a href="#">Navigation</a></li>

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

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

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

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

     </ul>

</div>

Enter the relative file paths to the pages by inserting them to replace the hash signs marked in magenta.

Enter the page names - marked in red.

CSS

<style type="text/css">     

.nav ul {

     width: 99%;

     max-width: 300px;     /* overall width */

     padding: 0;

     margin:0;

     border: solid 2px #0000FF;     /* border styles */

     background: #000;     /* background color */

     border-radius: 5px;

     -webkit-border-radius: 5px;

     -moz-border-radius: 5px;

}

.nav li {

     display: none; /* hide the navigation list items */

     margin: 0}

.nav .visible {

     display: block; /* show the first list item */}

.nav a {

     display: block;

     padding: 5px 5px 5px 20px;

     text-align: left;

     font: 20px 'Trebuchet MS', verdana, sans-serif;     /* font size and family */

     color: #fff;     /* font color */

     text-decoration: none}

.nav .visible a {color: #00FF00}     /* visible menu bar font color */

.nav ul:hover li {

     display: block;

     margin: 0 0 5px;

     border-bottom: 1px solid #ccc}

.nav ul:hover li:last-child {border:none}

.nav a:after {

     content:"\27A4";

     color: #eee;     /* arrow right color */

     position:relative;

     float: right;

     line-height: 20px;

     margin-right: 1%}

.nav .visible  a:after {

     content:"\25BC";

     color: #ff0000;     /* arrow down color */

     position:relative;

     float: right;

     line-height: 25px;

     margin-right: 1%}

</style>

The main styles are commented for changing text and colors.

Make sure to bring the navigation to the front using the Arrange menu after the rest of the page content has been added so that the menu will open over any elements placed below it.

EverWeb Codebox Mobile Website Demo