How To Create An Animated Drop Down Menu In Blogger

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 from all these advantages it also gives your website a new unique and professional look. Almost all the website either it's 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. Let's 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>tag

a, #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 was done, it's 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>
nbsp;   </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!

I 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.

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

All Social Tech Tricks and Tactics