A Navigation Bar or Drop Down Menu is one of the most essential elements of a blog. A drop down menu makes your blog user-friendly, allowing your visitors to easily navigate your blog by simply choosing their desired category from the menu. Apart of all these advantages it also gives your website a new unique and professional look. Almost all the website either its a top website or a newly created are using Drop Down Menus. Recently we shared an article
on How to Create a Drop Down Menu in Blogger. The design of that menu was simple and the one we're going to share today has a stylish and professional look with eye catching CSS transitions. Lets begin:
How to Create an Animated CSS3 Drop Down Menu in Blogger
First and foremost, log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area, press Ctrl+F to search and search for the ]]></b:skin> tag. Now copy the below CSS code and paste it just above/before the ]]></b:skin> taga, #navigation li .sub-nav-wrapper .sub-nav li {
transition: all 0.7s;
-moz-transition: all 0.7s;
-webkit-transition: all 0.7s;
}
#navigation li .sub-nav-wrapper {
pointer-events: none;
opacity: 0;
filter: alpha(opacity=0);
top: 0;
transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
-moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
-webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
top: 30px;
}
#navigation {
position: relative;
text-align:center;
margin:0 auto;
background-color:#fff;
border-bottom: 2px solid #009999;
}
#navigation li {
position: relative;
list-style: none;
display: inline-block;
padding: 5px 20px;
}
#navigation li a {
padding: 5px;
display: block;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
color: #3b3b3b;
text-align: left;
text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
display: block;
position: absolute;
z-index: 30;
margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
width: 150px;
margin-top: 6px;
background: #fff;
border-top: 1px solid #fff;
padding:0;
box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
list-style: none;
display: block;
margin: 0;
padding: 0;
text-align: left;
border-bottom: 1px solid #009999;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
display: block;
padding: 11px 20px;
font-size: 12px;
font-weight: 600;
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
background: #009999;
border-bottom: 1px solid #009999;
color: #3b3b3b;
text-decoration: none;
}
CSS done, its time for HTML. Search for the <body> tag. Copy the below HTML code and Paste it Just below/after the <body> tag.
Note: You can add HTML wherever you want.
<ul id="navigation">
<li>
<a href="index.html" class="main">Home</a>
</li>
<li>
<a href="#" class="main">Blogger</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">Tips</a></li>
<li><a href="#">Widgets</a></li>
<li><a href="#">Traffic Tips</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">Services</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">Blogger</a></li>
<li><a href="#">Logo</a></li>
<li><a href="#">Banner</a></li>
<li><a href="#">Wordpress</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">Tutorials</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">Logo</a></li>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">About</a>
<div class="sub-nav-wrapper"><ul class="sub-nav">
<li><a href="#">Website</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Our Mission</a></li>
</ul></div>
</li>
<li>
<a href="#" class="main">Contact</a>
</li>
</ul>
- Replace the Categories with your own and replace # with their links
Finally click Save Template button and you're done!
We hope this article may have helped you in learning How to Create an Animated CSS3 Drop Down Menu in Blogger. Share this article with your friends and don't forget to subscribe us!