Glossy Red-Grey Tabs Menu

This new menu has two different variations. The color combination can either be red in active mode and grey on mouse hover or vice versa. I...

This new menu has two different variations. The color combination can either be red in active mode and grey on mouse hover or vice versa. It is a shiny navigation menu that is mainly created for including blogger pages such as Home, Contact, About. That's why I ignored adding a drop down column to it. Very soon we will also learn how to create mega menus with multi columns in drop down view. But first lets see a demo first,

Grey-Red Theme

Red-Grey Theme

 

Live Demo

Add This Menu To Blogger

1. Go to Blogger > Design
2. Choose HTML/JavaScript widget
3. Paste the following code inside it,

<style>
.mbt-red-grey-menu{
border:5px solid #cd0000;
padding:0;
clear:both;
}

.mbt-red-grey-menu{
margin:0px;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKwi3J1TzBLMRYKeZUZ-FHlPUWKI_oQOj_O470mOmSLl1EhVAo-mCAx19uGYzneIN61Cqy7KE-DkkECECAi7U8nbgUp0lZI7ayOzGApiV87zUykRnVVcYe9o74Uho1ubtyvW_b9iufxHQ/s400/blockdefault.gif) center center repeat-x;
}

.mbt-red-grey-menu li{
display: inline;
}

.mbt-red-grey-menu li a{
float: left;
color: #fff;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.mbt-red-grey-menu li a:visited{
color: #fff;
}

.mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{
color: #fff;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL17lLcvCJxBNUop6dP-_RdP-A0uVmgYmAQU0gbYgTu-_O6BaYRcT9GtZ9gejtBqjcNRBLw2dRBtysqjAIIKigB3j_vjinjPtTMqTlxqYgPtQ5N9w7aWbj6P8ohfu2LKcr-NwPrKS_9Cw/s400/blockactive.gif) center center repeat-x;
}

</style>

 

<ul  class="mbt-red-grey-menu">
<li><a href="#">Home</a></li>
<li><a href="#" >About Us </a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sitemap</a></li>
</ul>

  

      Make these changes:

Replace the # sign in each case with related Page URL.

The above code is for Red-Grey theme if you wish to use the other theme instead then simply swap the position of the two image links in the above code (shown in purple).

To add a new link then paste the following code each time you want just before </ul>

<li><a href="#">page-name</a></li>

     4.   Save your widget and drag it just below your blog header. (Blog header is the widget where you add blog title and description)

     5.   Hit the Save button at the top-right corner of Page Elements page

     6.   You are all done!

Visit your blogs to see it working just perfectly. If you would like to select a different menu out of 30-40 menus created by MBT then you can search our blog to find something more exciting. Feel free to let me know if you needed any help. I am sure this menu will let you better organize your blog. Peace brothers. :>