How to create Drop Down Menu for Blogger Blog
Drop Down Menu for Blogger blogs
Tired of using the default menu features of the blogger blogs?
Blogger allows you to use its default menu features according to the
template you are currently using. There is no default navigation menu
bar in blogger. I am using Blogger for more than a year and I have also
tried creating a drop down menu bar on my blog too.
When I were using the blogger earlier days for my blogs, I tried creating and implementing the drop down menu css codes. Finally, I designed a drop down menu tab for my blog. Later on, I reminded myself today that I could make a blog post out of it and also it will help other people out there too.
Here is the CSS Code for your blogger drop down menu.
<style type="text/css">
#vicnav {
background:#CC0000;
border-bottom: 5px solid #993300;
border-top: 1px solid #e14d09;
clear: both;
overflow: hidden;
}
#vicnav ul {
float: left;
width: 100%;
}
#vicnav li {
float: left;
list-style-type: none;
}
#vicnav li a {
background:#CC0000;
color: #fff;
display: block;
font-size: 14px;
padding: 5px 17px 5px 15px;
position: relative;
text-decoration: none;
}
#vicnav li a:hover {
background:#990000;
color: #fff;
}
#vicnav li li a {
background: none;
background-color: #9c1a03;
border: 1px solid #990000;
border-top-width: 0;
color: #fff;
font-size: 14px;
padding: 5px 10px;
position: relative;
text-transform: none;
width: 130px;
}
#vicnav li li a:hover {
background: none;
background-color: #CC0000;
}
#vicnav li ul {
height: auto;
left: -9999px;
margin: 0 0 0 -1px;
position: absolute;
width: 160px;
z-index: 9999;
}
#vicnav li:hover ul {
left: auto;
}
</style>
I have also attached the HTML sample code below for the CSS so that its easy to understand.
<body>
<ul id="vicnav">
<li ><a href="#" >Home</a></li>
<li ><a href="#" >Sub Menu Indicator</a>
<ul >
<li ><a href="#" >Wrap Menu 1</a></li>
<li ><a href="#" >Wrap Menu 2</a></li>
<li ><a href="#" >Wrap Menu 3</a></li>
</ul >
</li ><!--li close of Sub Menu Indicator-->
<li ><a href="#" >MenuTab 3</a>
<ul >
<li ><a href="#" >Wrap Menu 1</a></li>
<li ><a href="#" >Wrap Menu 2</a></li>
<li ><a href="#" >Wrap Menu 3</a></li>
</ul >
</li><!--li close of MenuTab3-->
<li ><a href="#" >MenuTab 4</a></li>
<li ><a href="#" >MenuTab 5</a></li>
</ul >
</body >
The Above code will create a simple drop down menu with complete CSS effects.
The HTML code above needs nothing but the input link to the post or page that you want to. If you need to show the hover link or current link with different colors, you can change the color in background: #color in any id and try it.
Let me know if you have any changes or difficulties that you find in the code or may be if any errors.
Không có nhận xét nào :
Đăng nhận xét