In this tutorial I want to demonstrate simple CSS code to style your nav menubar with the help of CSS at various screen resolutions.
- Demo
- HTML
- CSS
- JS
- Edit Online
- Download
<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>
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;
}
No need for any JS script...
Hi friends, This is Victoria from Chennai. I am a technology freak. I have read your blog. It was really a wonderful article and I was really impressed by reading this blog. Thanks for sharing this informative blog. I did HTML Training in Chennai at FITA academy, Its really useful for me to make a bright future.
ReplyDeleteThanks lot 😊
Delete
ReplyDeleteThank you for taking the time to provide us with your valuable information. We strive to provide our candidates with excellent care and we take your comments to heart.As always, we appreciate your confidence and trust in us.
SAP Training in Chennai
Wonderful bloggers like yourself who would positively reply encouraged me to be more open and engaging in commenting. So know it's helpful..Keep update.
ReplyDeleteIos Training in Chennai