LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar » Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website

As everyone want to make his blog more awesome as it is and want to give it a premium look so here we are also working on it to share some awesome widgets that can help you to make your blog more awesome. So this time here we are with a stylish coloured menu bar that will show different colour on each menu item and on hove will give you a sliding effect that will make it more attractive.

So as our all widgets have awesome features so this time its also have a list of best listed features so without any more preface, have a look on live DEMO then check out our list of features then proceed to the code that is easy to add and customize with full features and function.

Features:

1.) Stylish And Awesome In Design.
2.) Pure HTML-CSS Codes.
3.) Quick To Load And Easy To Install.
4.) SEO Supported.
5.) Hover Effect Enabled.
6.) Multi-Colour Menus.
7.) Best For Single Line Navigation.
8.) Fully Customizable.
9.) Can Add More Menus.
10.) Short Code And Clean In Design.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Press [CTRL+F] To Search <body> Code.
7.) Now Copy The Below Code And Paste It Before <body> Code..
8.) Click “Save Template” And Done.

Recommended For You:
Being Beginner, What Blogging Lessons You Should Learn?

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between “<body> </body> “.
3.) Save It, Now You Are Done.

<style type='text/css'>
/*-----------------------------------------------
MultiColor Menu Bar CSS
----------------------------------------------- */
#nav {width: auto;display: block;height: 65px;background: url(https://lh3.googleusercontent.com/-dKlirHGyVZw/UproL42RSWI/AAAAAAAAJv0/ZyUiIih9E7U/s65/MenuBar.png);-webkit-box-shadow: 0px 6px 10px #282c2e;-moz-box-shadow: 0px 6px 10px #282c2e;box-shadow: 0px 6px 10px #282c2e;}
#nav li {list-style: none;height: 44px;float:left;padding:10px 5px;margin-left: -10px;}
#nav li a {color: #fff;width: 100px;height: 40px;line-height: 53px;border-bottom: 4px solid #636393;padding:0px;font-size:18px;font-weight:lighter;text-align:center;text-decoration: none;display: block;-webkit-transition: .2s all linear;-moz-transition: .2s all linear;-o-transition: .2s all linear;transition: .2s all linear;}
#nav li:nth-child(1) a {border-color: #636393;}
#nav li:nth-child(2) a {border-color: #B5222D;}
#nav li:nth-child(3) a {border-color: #D4953C;}
#nav li:nth-child(4) a {border-color: #609491;}
#nav li:nth-child(5) a {border-color: #87A248;}
#nav li:nth-child(6) a {border-color: #4099FF;}
#nav li:nth-child(7) a {border-color: #d34836;}
#nav li:nth-child(8) a {border-color: #3B5998;}
#nav li:nth-child(9) a {border-color: #4875B4;}
#nav li:nth-child(10) a {border-color: #910101;}
#nav li:nth-child(11) a {border-color: #FF6600;}
#nav li:nth-child(1) a:hover {border-bottom: 35px solid #636393;height: 9px;}
#nav li:nth-child(2) a:hover {border-bottom: 35px solid #B5222D;height: 9px;}
#nav li:nth-child(3) a:hover {border-bottom: 35px solid #D4953C;height: 9px;}
#nav li:nth-child(4) a:hover {border-bottom: 35px solid #609491;height: 9px;}
#nav li:nth-child(5) a:hover {border-bottom: 35px solid #87A248;height: 9px;}
#nav li:nth-child(6) a:hover {border-bottom: 35px solid #4099FF;height: 9px;}
#nav li:nth-child(7) a:hover {border-bottom: 35px solid #d34836;height: 9px;}
#nav li:nth-child(8) a:hover {border-bottom: 35px solid #3B5998;height: 9px;}
#nav li:nth-child(9) a:hover {border-bottom: 35px solid #4875B4;height: 9px;}
#nav li:nth-child(10) a:hover {border-bottom: 35px solid #910101;height: 9px;}
#nav li:nth-child(11) a:hover {border-bottom: 35px solid #FF6600;height: 9px;}
</style>
<!-- MultiColor Menu Bar Start -->
<ul id='nav'>
<li><a href='###'>Home</a></li>
<li><a href='###'>Plans</a></li>
<li><a href='###'>Blog</a></li>
<li><a href='###'>FAQs</a></li>
<li><a href='###'>News</a></li>
<li><a href='###'>Videos</a></li>
<li><a href='###'>Gallery</a></li>
<li><a href='###'>Portfolio</a></li>
<li><a href='###'>Services</a></li>
<li><a href='###'>About</a></li>
<li><a href='###'>Contact</a></li>
</ul>
<!-- MultiColor Menu Bar End -->

Customization:

Change Menu Text And Links As Your Desire. If You Want To Add More Menus Then Feel Free To Add It And If Having Problems, We Are Here To Help You.

Recommended For You:
5 Essential Tips For Responsive Web Designing

Last Words:

That’s it what we have. Now if you liked this then use it and leave your feedback in comment and don’t forget to share this with your friends too. If you have any query related to this menu bar then feel free to ask more.

You Like It, Please Share This Recipe With Your Friends Using...

12 Responses to “Stylish Pure CSS Multi-Colour Menu Bar For Blog And Website”

  1. Anonymous says:

    hOW TO ADD 1 MORE TAB,..THAT IS IT HAS ONLY 11 SPACE TO FILL WORDS AND URL..
    AND OTHER DOUBT,..BY INSERTING THIS CODE TO BLOGGER,..CAN WE MAKE NEW PAGE ??

    • EXEIdeas says:

      You Can Add Unlimited Tabs But More Tabs Will Make It Two Line Menu Bar That Is Unacceptable By Web Masters And Visitor. However You Can Add More Tabs Too. You Can Also Add Your Blogger Pages To It By Simply Adding There URL At # Tags.

  2. Anonymous says:

    i am not finding

  3. Anonymous says:

    i am not finding body in my template…i am finding /body only…

  4. Anonymous says:

    Not finding…..help needed…

  5. Anonymous says:

    Well Sending,..Now..

  6. Really Awesome bro 😉 Surajit Sonowal

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *