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 lose visitors from mobile devices. The mobile-friendly menu is also the necessary part for making a 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.
Table of Contents
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 a 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;}
@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='https://www.siteforinfotech.com/' target='_self'>Home </a></h2></li> <li><h2><a href='https://www.siteforinfotech.com/p/tutorials.html' target='_self'>Tutorials </a></h2></li> <li><h2><a href='https://www.siteforinfotech.com/p/mcqs.html' target='_self'>MCQs </a></h2></li> <li><h2><a href='https://www.siteforinfotech.com/p/programming.html' target='_self'>Programming </a></h2></li> <li><h2><a href='https://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.
%CODE1MENU%
Read More: Collections of CSS Programming Tutorials
Comments are closed.