Responsive Mobile Menu Tutorrial for web designers and developers. Using this code you can easily make a responsive mobile menu for your website. In this tutorial i'm using some jquery code and css media queries.

CSS CODE

body{margin:0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:13px;}
#mob-menu{display:none;height:40px;background:#0066cc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuNRaprh4nT1TeiEK3kc_Uf9T8HG8GsFepboCNlfpDnt2Yg74wPxJoKIHGlQ6gqqD18SeYfeTF6A0kmq5_Lkep4LDHqyEvhhNk-N_3tkGxy-a0g8ijf0C7dkunu-FwYz6YYyuh2sk7tkKU/s1600/menu-bg.png) 10px 8px no-repeat;color:#fff;line-height:40px;font-size:16px;width:100%;text-indent:50px;cursor:pointer;}
#nav{display:table;margin:auto;}
#nav ul{margin:20px 0px 0px 0px;padding:0px;list-style:none;height:40px;background:#06C;}
#nav ul li{float:left;}
#nav ul li a{display:block;height:40px;line-height:40px;color:#fff;font-size:16px;text-decoration:none;padding:0px 15px;}
#nav ul li a:hover{background:#222;}
@media screen and (max-width:768px)
{
 body{padding-top:40px;}
 #mob-menu{display:block;}
 #mob-menu{position:fixed;top:0px;}
 #nav ul{position:absolute;width:100%;margin:0px;height:auto;display:none;left:0px;top:40px;background:#222;}
 #nav ul li{float:none;border-bottom:solid 1px #333;}
 #nav ul li a:hover{background:#444;}
}

Jquery Code

$(function(){
  $('#mob-menu').on('click', function(e) {
    e.preventDefault();
    $('ul').slideToggle();
   });

 });

HTML Code

Menu



Home
About Us
Services
Our Profile
Contact Us
Home
About Us
Services
Our Profile
Contact Us




Responsive Mobile Menu

Download File Used in this example

Total Downloads:

Learn How to make animated Jquery Drop Down Menu. A step by step tutorial for making animated Jquery Drop Down Menu. You can download the file used in this example and also see live demo of this.

CSS CODE

#menu
{
 display:inline-block;
 margin:0px;
 padding:0px;
 list-style:none;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 overflow:hidden;
 height:50px;
 background: #ffd65e; /* Old browsers */
 background: -moz-linear-gradient(top,  #ffd65e 0%, #febf04 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd65e), color-stop(100%,#febf04)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top,  #ffd65e 0%,#febf04 100%); /* IE10+ */
 background: linear-gradient(to bottom,  #ffd65e 0%,#febf04 100%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */

}
#menu li
{
 float:left;
}
#menu li a
{
 display:block;
 height:50px;
 line-height:50px;
 color:#604907;
 text-decoration:none;
 padding:0px 25px;
 font-weight:bold;
 text-shadow:1px 1px 1px #f5e1a9;
 border-right:solid 1px #69510e;
 border-left:solid 1px #f5e1a9;
}
#menu li:first-child a{border-left:none;}
#menu li:last-child a{border-right:none;}
#menu li a:hover
{
 background:#444;
 color:#fff;
 text-shadow:none;
}
#menu li ul
{
 display:none;
 position:absolute;
 list-style:none;
 margin:30px 0px 0px 0px;
 padding:0px;
 opacity:0;
 background:#7fc115;
 }
#menu li ul li{
 float:none;
 }
#menu li ul li a
{
 border:none;
 border-bottom:solid 1px #fff;
 color:#fff;
 text-shadow:none;
}

Jquery Code

HTML CODE

Home
 

Sub Menu 1
     
Sub Menu 2
            
Sub Menu 3
            
Sub Menu 4
 


About Us
Products
FAQ's
 

Sub Menu 1
     
Sub Menu 2
            
Sub Menu 3
            
Sub Menu 4
 


Contact Us

Download File Used in this example View Live Demo

Total Downloads:

Make Window 8 style Menu in css3.Just copy and paste this code and use it into your website

CSS CODE

#menu-wrapper
{
 background:#fff;
 width:500px;
}
#menu
{
 margin:0px;
 padding:0px;
 list-style:none;
}
#menu li
{
 display:table;
 width:150px;
 height:150px;
 background:#000;
 float:left;
 margin:5px;
}
#menu li a
{
 display:table-cell;
 text-align:center;
 vertical-align:middle;
 color:#fff;
 text-decoration:none;
 font-family:Arial, Helvetica, sans-serif;
 opacity:.5;
 transition:all .3s linear;
 -webkit-transition:all .3s linear;
 -moz-transition:all .3s linear;
 -o-transition:all .3s linear;
 -ms-transition:all .3s linear;
}
#menu li a:hover
{
 opacity:1;
}
.yellow
{
 background:#f2c828;
}
.green
{
 background:#96c11f;
}
.pink
{
 background:#e61c67;
}
.blue
{
 background:#009fe3;
}
.purple
{
 background:#544391;
}
.orange
{
 background:#d96802;
}

HTML CODE

Home
About
Blog
Services
Products
Contact

Download File Used in this example View Live Demo

Total Downloads:

This tutorial teach you how to make Numeric updown control using jquery. This control is very usefull when we working with forms. so learn and use it into your website.

CSS CODE

#numericcontrol a
{
 cursor:pointer;
 background:#1dac2e;
 height:25px;
 display:inline-block;
 margin:0px;
 padding:0px 10px;
 float:left;
 line-height:25px;
 font-size:16px;
 color:#fff;
 text-decoration:none;
}
#numericcontrol input[type="text"]
{
 border:solid 1px #1dac2e;
 height:21px;
 float:left;
 width:50px;
 padding:1px 5px;
}

JQUERY CODE

HTML CODE

-+

Download File Used in this example View Live Demo

Total Downloads: