A menu is an important part of any blog. It is very essential tool for any blog. Many visitors that come on site usually search more useful information through Menus. A menu is a widget in which different categories are available in one widget. Because stylish menu are not available in blogger default templates that's why Today I am sharing a drop down gradient menu. It is created with HTML and CSS. This menu will spice your blog. Drop down menu has a lot of subcategories. This menu has a gradient color.
Step 1 Log in to your Blogger account and Go to your Blogger Dashboard
Step 2 Go to your Layout tab.
Step 3 Click on "Add a Gadget" then select "HTML/JavaScript" Gadget.
Step 4 Now Copy the below code and paste it in "HTML/JavaScript" Gadget and Save it.
Step 5 Place the Gadget below header. that's it.
<style>
@import "http://fonts.googleapis.com/css?family=ABeeZee";
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
width: auto;
}
nav ul {
background: -ms-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
background: -moz-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
background: -webkit-linear-gradient(top, #b40c1f 25%, #c00c20 50%);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.42);
list-style: none;
position: relative;
display: inline-block;
font-family: "ABeeZee",tahoma,serif;
width: 100%;
padding: 0;
}
nav{
margin: 0 auto;
width: 70%;
}
nav ul:after {
content: ""; clear: both; display: block;
color:#ffffff;
}
nav ul li {
float: left;
color:#ffffff;
}
nav ul li:hover {
background: #aa0c20;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px; text-decoration: none;
color:#ffffff;
}
nav ul ul {
background:#b40c1f;
box-shadow: 0 0 12px rgba(0,0,0,0.15);
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #aa0c20;
border-bottom: 1px solid #aa0c20;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li:hover {
background: #aa0c20;
}
nav ul ul ul {
position: absolute; left: 100%; top:-1px;
}
</style>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">link 1</a><ul>
<li><a href="#">sub link 1</a></li>
<li><a href="#">sub link 2</a></li>
<li><a href="#">sub link 3</a></li>
</ul></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
Customization
- Replace # with your label's links
EmoticonEmoticon