Responsive Menu

One of the challenging issues with Responsive Web Design (RWD) is the navigation bar as well as the sidebar. A navigation bar is crucial as it allows users to easily navigate a website, and a sidebar is important as it usually has crucial functions (like this blog). Most responsive web sites omit the sidebar and navigation completely, which is probably a bad idea as it does not give the mobile users the same experience as desktop users. Since mobile use is on the rise, it is best to give users a fair experience.

Responsive Menu Demo.

This example will will show you a simple CSS based responsive menu, and we will use pure CSS along with some pure JavaScript to add the toggle functionality.

Create a simple HTML document and in the <head> tag insert the meta viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This will control the viewport: it will restrict how the user can zoom in/out and will set the default width to the width of the device (although this can be overridden).

Next is the JavaScript: this is a simple toggle function to show and hide the menu.

<script type="text/javascript">

function toggle_Hide(id){
var e = document.getElementById(id);

if (e.style.display == 'block')
{
    e.style.display = 'none';
    e.removeAttribute('style');
} else {
    e.style.display = 'block';
}
}
</script>

HTML Markup

<nav>
<a href="#" class="hidden-menu" onclick="toggle_Hide('menu');" id="hidden-menu">Menu</a>

<ul class="menu" id="menu">
<li><a href="default.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="#47">Services</a></li>
<li><a href="#48">Products</a></li>
<li><a href="#49">Contact</a></li>
</ul>
</nav>

The first anchor tag in the <nav> element will be visible to small screened devices. By default it will be hidden using CSS, the rest of the markup is a simple unordered list with links.

CSS

* {
   margin:0px;
   padding:0px;
}


nav{
    overflow: hidden;
    background-color: #333;
}



.hidden-menu {
  display:none;
}

The first rule is a simple CSS reset using the universal selector. We then give the <nav> element a default background colour and set overflow to hidden. Make sure you hide the mobile anchor tag (hidden-menu).

.menu {
       overflow: auto;
       margin-right: auto;
       margin-left: auto;
       width: 772px;
}

.menu li {
         float: left;
         display: block;
         border-right:thin solid #CFB700;
}


.menu li:last-child {
     border-right:none;
}

The menu class is applied to the <ul> tag, we center the <ul> element and make each <li> element float left and display block (this will set it to horizontal), and we also set the right border (as a divider). The last <li> element will not have a border.

.menu a {
      padding: 50px;
      display: block;
      background-color: #FED801;
      -webkit-transition: background-color 1s ease-out;
}

.menu li a:link {color: #000000;}

nav li a:hover {
    background-color: #D8B801;
}

Lastly we set the styles for the <a> tags in the <ul> tag.

Media Queries

@media screen and (max-width:700px)
{

.menu {
  display:none;
}


.hidden-menu  {
      display:block;
      float:left;
      width:100%;
      padding:5px;
      background-color:#DF8600;
}

This is where the menu will change. If the screen size is 700px and below this menu will show, the first thing to do is to hide the <ul> tag and show the hidden menu.

.hidden-menu:hover {
     background-color:#D8B801;
}

.menu li {
     float:none;
     border-right:none;
}

.menu a {
    padding:5px;
} 

 }

This is a simple menu, and will not work with drop-downs. It should give you an idea of how you can create a simple menu for smaller screens using CSS and JavaScript.  If you have a site structure like this blog (content, menu, and one sidebar), you can insert another <a> in the <nav> element to toggle the sidebar on/off (try it with this blog). Responsive Menu Demo.