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