Responsive CSS3 Colorful Nav Menubar Demo

                     
In this tutorial I want to demonstrate simple CSS code to style your nav menubar with the help of CSS at various screen resolutions.

<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...
Like this post? Then, Share it

4 comments:

  1. UnknownJune 6, 2015 at 12:50 PM

    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.




    ReplyDelete
  2. AnonymousApril 12, 2016 at 3:42 PM


    Thank 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

    ReplyDelete
  3. Aarshvi muraliMay 9, 2016 at 4:50 PM

    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.

    Ios Training in Chennai

    ReplyDelete

Thank you for your comment.

Subscribe to: Post Comments (Atom)

 Image

 Image

About



I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Twitter
Facebook

Resume

Curriculum Vitae

Pawan Mall

Web Designer, Developer & Blogger

New Delhi, Delhi, INDIA
mailpawanmall.net
www.pawanmall.net
Pawan Mall - resume photo avatar

Objective

I'm something poet, marketer, social media consultant, web designer, web developer, web programmer, blogger(hobby) & a good human being. Originally from Gorakhpur, UP and currently living in the New Delhi. ..

Skills

  • Front-end
  • HTML/HTML5
  • CSS/CSS3
  • JS/jQuery
  • Bootstrap
  • Back-end
  • PHP/OOP
  • SQL/MySQL
  • Codeigniter Framework
  • cPanel & phpMyAdmin

Education

  • Sikkim Manipal University graduate of 2015.

Experience

  • Web Designer/Developer/Leads Manager ~ 2007-2017

Contact Form

Contact

  • New Delhi, Delhi, India

  • +91 **********

  • mailpawanmall.net

Follow me on :-