<h1 class="heading">Responsive CSS3 Colorful Nav Menubar Demo</h1>
<div class="wrapper">
<h2 class="Cdefault">DEFAULT - Navbar Menu</h2>
<ul class="menu default">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cgrapefruit">GRAPEFRUIT - Navbar Menu</h2>
<ul class="menu grapefruit">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cbittersweet">BITTERSWEET - Navbar Menu</h2>
<ul class="menu bittersweet">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Csunflower">SUNFLOWER - Navbar Menu</h2>
<ul class="menu sunflower">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cgrass">GRASS - Navbar Menu</h2>
<ul class="menu grass">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cmint">MINT - Navbar Menu</h2>
<ul class="menu mint">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Caqua">AQUA - Navbar Menu</h2>
<ul class="menu aqua">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cbluejeans">BLUEJEANS - Navbar Menu</h2>
<ul class="menu bluejeans">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Clavander">LAVANDER - Navbar Menu</h2>
<ul class="menu lavander">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cpinkrose">PINKROSE - Navbar Menu</h2>
<ul class="menu pinkrose">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Clight">LIGHT - Navbar Menu</h2>
<ul class="menu light">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
<h2 class="Cgray">GRAY - Navbar Menu</h2>
<ul class="menu gray">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="clear" />
</div>
<h6>Made with ♥ by <a href="http://pawanmall.net/" tarfet="blank">PawanMall.net</a></h6>
/*
// Responsive CSS3 Colorful Nav Menubar
// Made with ❤ by @Pawan_Mall
// http://www.pawanmall.net
*/
body{
background: #f5f7fa;
margin:0px;
padding:0px 10px;
}
ul.menu {
list-style-type: none;
margin: 5% 8%;
padding: 0;
width: 95%;
border-radius: .5em;
box-shadow: 0 0 5px rgba(0, 0, 0, .3 );
clear:both;
}
ul.menu li {
display: inline;
float: left;
width: 82%;
text-align:center;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#fff;
padding: 5px;
}
ul.menu li:nth-last-child(1) {
border:none;
}
ul.menu li a {
display: block;
padding: 5px;
text-decoration:none;
font-weight:bolder;
text-transform: uppercase;
font-size:15px;
color:#fff;
}
ul.menu li a:hover{
border-left-style:solid;
border-left-width:1px;
border-left-color:#fff;
border-right-style:solid;
border-right-width:1px;
border-right-color:#fff;
}
/* Large screens (640px or 1080px) */
@media (min-width: 40rem) {
html { font-size: 112%; }
ul.menu {
list-style-type: none;
margin: 2% 8%;
padding: 0;
width: 95%;
border-radius: .5em;
box-shadow: 0 0 5px rgba(0, 0, 0, .3 );
clear:both;
}
ul.menu li {
display: inline;
float: left;
width: 16%;
text-align:center;
border-right-style:solid;
border-right-width:1px;
border-bottom-style:none;
border-bottom-width:0px;
border-right-color:#fff;
padding: 5px;
}
ul.menu li:nth-last-child(1) {
border:none;
}
ul.menu li a {
display: block;
padding: 5px;
text-decoration:none;
font-weight:bolder;
text-transform: uppercase;
font-size:15px;
color:#fff;
}
ul.menu li a:hover{
border-top-style:solid;
border-top-width:1px;
border-top-color:#fff;
border-bottom-style:solid;
border-bottom-width:1px;
border-bottom-color:#fff;
border-left-style:none;
border-left-width:0px;
border-right-style:none;
border-right-width:0px;
}
}
/*Default Color Palette*/
ul.default li{
background-color:#656d77;
box-shadow: 5px 10px 5px #434a53;
}
ul.default li:hover{
background-color:#434a53;
box-shadow: 0px 5px 0 #656d77;
}
/*Grapefruit Color Palette*/
ul.grapefruit li{
background-color:#ed5565;
box-shadow: 5px 10px 5px #da4453;
}
ul.grapefruit li:hover{
background-color:#da4453;
box-shadow: 0px 5px 0 #ed5565;
}
/*Bittersweet Color Palette*/
ul.bittersweet li{
background-color:#fc6d58;
box-shadow: 5px 10px 5px #e95546;
}
ul.bittersweet li:hover{
background-color:#e95546;
box-shadow: 0px 5px 0 #fc6d58;
}
/*Sunflower Color Palette*/
ul.sunflower li{
background-color:#ffcd69;
box-shadow: 5px 10px 5px #f6ba59;
}
ul.sunflower li:hover{
background-color:#f6ba59;
box-shadow: 0px 5px 0 #ffcd69;
}
/*Grass Color Palette*/
ul.grass li{
background-color:#9fd477;
box-shadow: 5px 10px 5px #8bc163;
}
ul.grass li:hover{
background-color:#8bc163;
box-shadow: 0px 5px 0 #9fd477;
}
/*Mint Color Palette*/
ul.mint li{
background-color:#46cfb0;
box-shadow: 5px 10px 5px #34bc9d;
}
ul.mint li:hover{
background-color:#34bc9d;
box-shadow: 0px 5px 0 #46cfb0;
}
/*Aqua Color Palette*/
ul.aqua li{
background-color:#4fc2e5;
box-shadow: 5px 10px 5px #3bb0d6;
}
ul.aqua li:hover{
background-color:#3bb0d6;
box-shadow: 0px 5px 0 #4fc2e5;
}
/*Blue Jeans Color Palette*/
ul.bluejeans li{
background-color:#5e9de6;
box-shadow: 5px 10px 5px #4b8ad6;
}
ul.bluejeans li:hover{
background-color:#4b8ad6;
box-shadow: 0px 5px 0 #5e9de6;
}
/*Lavander Color Palette*/
ul.lavander li{
background-color:#ad93e6;
box-shadow: 5px 10px 5px #977bd5;
}
ul.lavander li:hover{
background-color:#977bd5;
box-shadow: 0px 5px 0 #ad93e6;
}
/*Pinkrose Color Palette*/
ul.pinkrose li{
background-color:#ed87bd;
box-shadow: 5px 10px 5px #d870a9;
}
ul.pinkrose li:hover{
background-color:#d870a9;
box-shadow: 0px 5px 0 #ed87bd;
}
/*Light Color Palette*/
ul.light li{
background-color:#f5f7fa;
box-shadow: 5px 10px 5px #e6e9ed;
}
ul.light li:hover{
background-color:#e6e9ed;
box-shadow: 0px 5px 0 #f5f7fa;
}
/*Gray Color Palette*/
ul.gray li{
background-color:#ccd1d8;
box-shadow: 5px 10px 5px #aab2bc;
}
ul.gray li:hover{
background-color:#aab2bc;
box-shadow: 0px 5px 0 #ccd1d8;
}
/* Following code are just for demo the menubar */
.wrapper{
display:block;
padding:1px 10px;
background: #fff;
/*Box Shadow - (Optional)*/
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.clear{
padding-top: 10px;
clear:both;
}
h1, h6{
text-align:center;
}
h2{
text-align:center;
margin-bottom:-10px;
}
h2.Cdefault{
color:#434a53;
}
h2.Cgrapefruit{
color:#da4453;
}
h2.Cbittersweet{
color:#e95546;
}
h2.Csunflower{
color:#f6ba59;
}
h2.Cgrass{
color:#8bc163;
}
h2.Cmint{
color:#34bc9d;
}
h2.Caqua{
color:#3bb0d6;
}
h2.Cbluejeans{
color:#4b8ad6;
}
h2.Clavander{
color:#977bd5;
}
h2.Cpinkrose{
color:#d870a9;
}
h2.Clight{
color:#e6e9ed;
}
h2.Cgray{
color:#aab2bc;
}