Responsive Navigation Bar

Hi, today i am going to tell you about Responsive Designs, in the world this responsive designs are growing and converting normal designs to Responsive Designs day by day, do you know y people are adopting Responsive designs, there is one reason our technology is presenting multiple devices and


now a days every one visiting websites from Mobiles and Tabs, in that case our website doesn't look much better in TABS and other devices like we seen in PC's that is the reason W3C founded and solve this problem by introducing of @media- Queries, with this we can easily change the entire website design as per device screen sizes, let's see a simple responsive navigation bar

HTML

in html just create the navigation bar using LI tags

<div class="lessoncup">

<ul>
<li>Lessoncup</li>
<li>Tutorials</li>
<li>jQuery</li>
<li>Ajax</li>
<li>Html5</li>
<li>PHP</li>
<li>MySql</li>
<li>CSS</li>
</ul>

</div>

CSS

here give the normal style to your navigation bar as you like, next define the @media screen and (max-width: 980px) {} inside the curly brace write the new style to your navigation bar how it will look in 980px width, like this write different styles as par the different screen sizes.

body{font-family:Tahoma, Geneva, sans-serif;  margin:0; padding:0; background-color:#639;}

#info{ position:fixed; width:100%; height:20px;-webkit-box-shadow: 0 1px 2px #666;box-shadow: 0 1px 2px #666; top:0; padding:10px; background-color:#F60; color:#FFF; font-size:14px;}

.lessoncup{ width:980px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; padding:0;}

.lessoncup ul li{ border-radius:5px; padding:29px; float:left; background-color:#9C3; color:#FFF; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}


.lessoncup ul li:hover{background-color:#FC0;}


/************************************************************************************
smaller than 980
*************************************************************************************/
@media screen and (max-width: 980px) {


.lessoncup{ width:900px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:29px;background-color:#000;color:#FFF; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; margin-bottom:5px;}


.lessoncup ul li:hover{background-color:#FC0;}

}

/************************************************************************************
smaller than 650
*************************************************************************************/
@media screen and (max-width: 780px) {


.lessoncup{ width:750px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:29px; margin-bottom:5px;background-color:#F60; color:#FFF; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;}


.lessoncup ul li:hover{background-color:#FC0;}
 
}

/************************************************************************************
smaller than 560
*************************************************************************************/
@media screen and (max-width: 560px) {

.lessoncup{ width:540px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:20px;background-color:#9F3; color:#FFF;margin-bottom:5px; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666;float:none;}


.lessoncup ul li:hover{background-color:#FC0;}
 
}


/************************************************************************************
smaller than 360
*************************************************************************************/
@media screen and (max-width: 360px) {

.lessoncup{ width:200px;height:50px;font-family:Tahoma, Geneva, sans-serif;font-size:22px;margin:0 auto;margin-top:100px;}

.lessoncup ul{list-style:none; margin:0 auto; padding:0;}

.lessoncup ul li{ border-radius:5px;padding:19px;background-color:#9CF; color:#FFF;margin-bottom:5px; margin-right:3px; cursor:pointer;
-webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; float:none;}


.lessoncup ul li:hover{background-color:#FC0;}
 
}

Live Demo   Download Script