Hello Friends Today I am going to teach how to make responsive mobile menu using css. All menu concepts in this article are based on this simple HTML structure which I call basic menu.
So Let’s start
Step 1: For Responsive use HTML5 Doctype and Add viewport meta tag
For Desktop
For Tablets
For Mobile’s
We are making this mobile menu according to my style if you want to some different style navigation menu then you change according to you if your want any type of help then mail me.
We’re done, Finally!
Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below.
If you liked this tutorial kindly share it with your friends. Thanks! :)
Step 1: For Responsive use HTML5 Doctype and Add viewport meta tag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> | |
| <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> | |
| <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> | |
| <!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <title>Responsive Menu</title> | |
| <!--[if lt IE 9]> | |
| <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> |
• Add small javascript code before tag for toggle menu for mobile or tablets
Step 2: Add Navigation HTML Code between tag
Step 3: Make CSS Code for navigation style
Check Your Navigation Menu look like this
Step 4: Add menu styles for responsive layout:
Skip this step if the responsive layout is not your consideration.
For Responsive layout Use Media Queries how to make media queries check it below
This is for table media queries
For Small Tablets Media Queries
Step 4: Add styles for mobile navigation
For Small Mobile Media Queries
Final Result:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> | |
| <script type="text/javascript"> | |
| $(document).ready(function(){ | |
| $(function() { | |
| var slide = $('#slide'); | |
| menu = $('nav ul'); | |
| menuHeight = menu.height(); | |
| $(slide).on('click', function(e) { | |
| e.preventDefault(); | |
| menu.slideToggle(); | |
| }); | |
| }); | |
| $(window).resize(function(){ | |
| var w = $(window).width(); | |
| if(w > 320 && menu.is(':hidden')) { | |
| menu.removeAttr('style'); | |
| } | |
| }); | |
| }); | |
| </script> |
Step 2: Add Navigation HTML Code between tag
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navigation"><!-- navigation div start --> | |
| <a href="#" id="slide">Menu</a> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Services</a></li> | |
| <li><a href="#">News</a></li> | |
| <li class="last"><a href="#">Quick Contact</a></li> | |
| </ul> | |
| </nav><!-- navigation div end --> |
Step 3: Make CSS Code for navigation style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav{ | |
| height:40px; | |
| width:60%; | |
| background:#FF6633; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.938em; | |
| position: relative; | |
| float:left; | |
| border-radius:5px; | |
| margin-top:6px; | |
| } | |
| nav ul{ | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| height:40px; | |
| width:100%; | |
| } | |
| nav li{ | |
| display:inline; | |
| float:left; | |
| line-height: 40px; | |
| text-shadow: 1px 1px 0px #283744; | |
| text-align: center; | |
| width:20%; | |
| border-right: 1px solid #FFF; | |
| box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| cursor:pointer; | |
| } | |
| nav li a{ | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| nav li.last{ | |
| border:none; | |
| } | |
| nav li:hover, nav a:active { | |
| background-color: #FF9933; | |
| } | |
| nav a#slide{ | |
| display:none; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:10px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ |
Check Your Navigation Menu look like this
Step 4: Add menu styles for responsive layout:
Skip this step if the responsive layout is not your consideration.
For Responsive layout Use Media Queries how to make media queries check it below
This is for table media queries
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 768px) and (max-width: 1024px) { | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav{ | |
| height:40px; | |
| width:60%; | |
| background:#FF6633; | |
| color:#FFFFFF; | |
| font-family:'Arial', Helvetica, sans-serif; | |
| font-size:0.750em; | |
| position: relative; | |
| float:left; | |
| border-radius:5px; | |
| margin-top:6px; | |
| } | |
| nav ul{ | |
| list-style:none; | |
| padding:0px; | |
| margin:0 auto; | |
| height:40px; | |
| width:100%; | |
| } | |
| nav li{ | |
| display:inline; | |
| float:left; | |
| line-height: 40px; | |
| text-shadow: 1px 1px 0px #283744; | |
| text-align: center; | |
| width:20%; | |
| border-right: 1px solid #FFF; | |
| box-sizing:border-box; | |
| -moz-box-sizing:border-box; | |
| -webkit-box-sizing:border-box; | |
| cursor:pointer; | |
| } | |
| nav li a{ | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| nav li.last{ | |
| border:none; | |
| } | |
| nav li:hover, nav a:active { | |
| background-color: #FF9933; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:10px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 480px) and (max-width: 768px) { | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav { | |
| border-bottom: 0; | |
| background:#FF6633; | |
| width:99.9%; | |
| float:none; | |
| margin:5px auto; | |
| } | |
| nav ul { | |
| background:#FF6633; | |
| display: none; | |
| height: auto; | |
| margin-top:0px; | |
| border-bottom-left-radius:5px; | |
| border-bottom-right-radius:5px; | |
| border-top:#FFF thin solid; | |
| } | |
| nav li { | |
| display: block; | |
| float: none; | |
| width: 100%; | |
| border:none; | |
| } | |
| nav a#slide { | |
| display: block; | |
| width: 95%; | |
| height:36px; | |
| position: relative; | |
| text-align:left; | |
| top:10px; | |
| left:8px; | |
| text-decoration:none; | |
| color:#FFFFFF; | |
| background:none; | |
| } | |
| nav a#slide:after { | |
| content:""; | |
| background:url(nav-icon.png) no-repeat; | |
| width: 40px; | |
| height: 30px; | |
| display: inline-block; | |
| position: absolute; | |
| right: 5px; | |
| top:-5px; | |
| } | |
| .navigation:before, | |
| .navigation:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .navigation:after { | |
| clear: both; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:0px; | |
| margin-top:10px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 320px) and (max-width: 480px) { | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav { | |
| border-bottom: 0; | |
| background:#FF6633; | |
| width:99.9%; | |
| float:right; | |
| margin-right:0px; | |
| margin-bottom:10px; | |
| } | |
| nav ul { | |
| background:#FF6633; | |
| display: none; | |
| height: auto; | |
| margin-top:0px; | |
| border-bottom-left-radius:5px; | |
| border-bottom-right-radius:5px; | |
| border-top:#FFF thin solid; | |
| } | |
| nav li { | |
| display: block; | |
| float: none; | |
| width: 100%; | |
| border:none; | |
| } | |
| nav a#slide { | |
| display: block; | |
| width: 95%; | |
| height:36px; | |
| position: relative; | |
| text-align:left; | |
| top:10px; | |
| left:8px; | |
| text-decoration:none; | |
| color:#FFFFFF; | |
| background:none; | |
| } | |
| nav a#slide:after { | |
| content:""; | |
| background:url(nav-icon.png) no-repeat; | |
| width: 40px; | |
| height: 30px; | |
| display: inline-block; | |
| position: absolute; | |
| right: 5px; | |
| top:-5px; | |
| } | |
| .navigation:before, | |
| .navigation:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .navigation:after { | |
| clear: both; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:0px; | |
| margin-top:20px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (max-width: 320px) { | |
| /* ---------------- Navigation Css Start ---------------- */ | |
| nav { | |
| border-bottom: 0; | |
| background:#FF6633; | |
| width:99.9%; | |
| float:right; | |
| margin-right:0px; | |
| margin-bottom:10px; | |
| } | |
| nav ul { | |
| background:#FF6633; | |
| display: none; | |
| height: auto; | |
| margin-top:0px; | |
| border-bottom-left-radius:5px; | |
| border-bottom-right-radius:5px; | |
| border-top:#FFF thin solid; | |
| } | |
| nav li { | |
| display: block; | |
| float: none; | |
| width: 100%; | |
| border:none; | |
| } | |
| nav a#slide { | |
| display: block; | |
| width: 95%; | |
| height:36px; | |
| position: relative; | |
| text-align:left; | |
| top:10px; | |
| left:8px; | |
| text-decoration:none; | |
| color:#FFFFFF; | |
| background:none; | |
| } | |
| nav a#slide:after { | |
| content:""; | |
| background:url(nav-icon.png) no-repeat; | |
| width: 40px; | |
| height: 30px; | |
| display: inline-block; | |
| position: absolute; | |
| right: 5px; | |
| top:-5px; | |
| } | |
| .navigation:before, | |
| .navigation:after { | |
| content: " "; | |
| display: table; | |
| } | |
| .navigation:after { | |
| clear: both; | |
| } | |
| .navigation { | |
| *zoom: 1; | |
| margin-left:0px; | |
| margin-top:20px; | |
| } | |
| /* ---------------- Navigation Css End ---------------- */ | |
| } |
For Desktop
We’re done, Finally!
Wew! This took me so long to write. How was the tutorial? I hope you learned something from this tutorial. If you have some techniques, comments, suggestions please share and drop it below.
If you liked this tutorial kindly share it with your friends. Thanks! :)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.