How To Create Mobile Friendly Menu Using CSS

As Google started to give priority for mobile friendly websites on their search result while searching from mobile devices. It's been necessary to make websites mobile friendly if you don't want to loss visitors from mobile devices. Mobile friendly menu is also necessary part for making mobile friendly site. Here I am going to describe how you can create such mobile friendly menu using CSS. It is with very simple coding responsive and separate design for mobile devices including with search box.

CSS Code For Creating Mobile Friendly Menu


Following are the simple CSS codes to design simple, responsive and mobile friendly menu. Add all the CSS codes under <style> and </style> tag and place it within <head> ....</head> tag of your website. Use the following CSS codes to design menu for both desktop and mobile. 
#menu {line-height:16px;width:100%;background-color:#2964a0;height:28px;}
#menu a{font-family:Verdana;font-size:14px;color:#fff;text-transform:uppercase;line-height:28px;width:100%;text-decoration:none;margin: 0px 0.9%;}
#menu a:hover{color:#179b32;}
#menu ul{list-style:none;margin:0;padding:0;width:auto;background-color:#2964a0;}
#menu h2{display:inline;font-weight: normal;}
Write the following CSS codes to design menu for desktop only, which will only display on the devices having screen width greater then 750px. Here all the elements created for mobile devices will be hidden using display property. Search box created for desktop version will only shown here. 
@media screen and (min-width:751px){
label, #toggle, #search1{display:none;}
#menu ul{margin-top:-17px;}
#menu li{display:inline;border:outset 1.5px #2964a0;padding:3.5px 0.08%;}
#search2 input{float:right;margin:1px;height:96%;width:100%;}
#search2 {float:right;width:15%;}}
Write the following CSS codes to design menu for mobile only, which will only display on the devices having screen width less then or equal to 750px. Here all the elements created for larger devices will be hidden using display property. Search box created for mobile version will only shown here.
@media screen and (max-width:750px){
#menu input,#search2{display:none}
#search1,#search1 input{display:inline;float:right;margin:1px;height:93%;width:75%;}
#menu label{border:outset 1px #2964a0;}
#menu label{color:#fff;cursor:pointer;display:inline-block;font-size:18px;padding:5px 9px;transition:all .15s ease}
#menu label:hover{color:#ff7b29}
#menu input:checked+label{box-shadow:inset 0 1px 2px rgba(0,0,0,0.15);color:#fff}
#menu nav{width:100%;max-height:0;overflow:hidden;transition:all .15s ease;border:outset 0px 1px #2964a0;}
#menu input:checked ~ nav{max-height:400px}
#menu li{border-bottom:1px dotted #cecfd5}
#menu li:last-child{border-bottom:0;}
#menu li:first-child{border-top:1px dotted #cecfd5}}

HTML Code For Creating Mobile Friendly Menu


Write the following HTML codes to add menu items. You have to replace all the link address and titles of your own. You can place or remove the search box used here as your requirements. 

Here check box type input, label and first search box are only shown for mobile devices and second search box will only shown on desktop along with menu items.
<div id='menu'>
<input type="checkbox" id="toggle" />
<label for="toggle">☰</label> <form id="search1" action="/search">
        <input type="text" name="q" value="" x-webkit-speech="true"  placeholder="Search Terms..."/></form>
<nav>
   <ul>
    <li><h2><a href='http://www.siteforinfotech.com/' target='_self'>Home
</a></h2></li>
    <li><h2><a href='http://www.siteforinfotech.com/p/tutorials.html' target='_self'>Tutorials
</a></h2></li>
<li><h2><a href='http://www.siteforinfotech.com/p/mcqs.html' target='_self'>MCQs
</a></h2></li>
    <li><h2><a href='http://www.siteforinfotech.com/p/programming.html' target='_self'>Programming
</a></h2></li>
<li><h2><a href='http://www.siteforinfotech.com/p/about-us.html' target='_self'>About
</a></h2></li><form id="search2" action="/search">
        <input type="text" name="q" value="" x-webkit-speech="true"  placeholder="Search Terms..."/></form></ul></nav>
</div>

Preview of Mobile Friendly Menu


Here is a preview of using above CSS and JavaScript code for creating mobile friendly menu, which will display two types of menu one of them will display on the devices having screen width greater then 750px and another menu will display on the devices having screen width less then 750px, used for displaying mobile menu of mobile devices.