Add CSS3 Drop Down Navigation Menu with Effects to Blogger

Add CSS3 Drop Down Navigation Menu with Effects to Blogger

Well first of all Happy new year to all of my sweet visitors For now I am going to share beautiful CSS designed drop down menu for blogger. Navigation menu have great impact in blogger design. A good navigation means you drive your visitors easily for what they are looking on your site. We all are here try to present different ideas and views regarding blogging.

A navigation bar (or navigation system) is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.

DEMO DISPLAY
I have attached live demo for navigation menu for better understanding your needs. 

Also check: LAVA LAMP CSS DROP DOWN MENU FOR BLOGGER!

Lets start adding this beautiful css3 designed drop down menu to blogger. Please follow the below steps. We will first add css code and then html.

CSS:

For adding css to blogger>Template>Edit HTML> and past the given code just before  ]]></b:skin>

.

span.dropBottom,span.dropRight {
 display: block;
 box-shadow:inset 2px 0px 0px #FF9;
 position: absolute;
 left: 0px;
 width:100%;
 height: 100%;
 top: 0px;
}
span.dropBottom {
 box-shadow:inset 0px 2px 0px #FF9;
 position: absolute;
 width: 100%;
 bottom: 0px;
}
h1 {
 color:#EDEDED;
  text-align:center;
  font-family: 'Open Sans', sans-serif;
  
}
nav {
 display:table;
 margin:50px auto;
  box-shadow:0px 2px 0px #023333;
}
ul {
 margin:0;
 padding:0;
 list-style:none;
}

ul ul {
 opacity:0;
 position:absolute;
 top:160%;
 visibility:hidden;
 transition:all .4s ease;
 -webkit-transition:all .4s ease;
}
ul ul ul {
 top:0%;
 left:160%;
}
ul ul li:hover > ul {
 top:0%;
 left:100%;
 opacity:1;
 visibility:visible;
}
ul li:hover > ul {
 opacity:1;
 top:100%;
 visibility:visible;
}
ul li {
 float:left;
 position:relative;
}
ul ul li {
 float:none;
}
ul li {
 background-color:#009C75;
 cursor: pointer;
}
ul a {
 text-decoration:none;
 display:block;
 color:#FF9;
 padding:10px 15px;
 width:6em;
 text-align:center;
  font-family: 'Open Sans', sans-serif;
  text-shadow: 0px -1px 0px rgba(0,0,0,.2);
}
ul li:hover {
 background-color:#007373;
}
ul li a:hover {
 background-color:#007373;
}

Save template. 

HTML:

'HTML Copy the following HTML code and paste in your header section of your blogger blog. Or any where you want this to appear on your blog.

<nav><code>
    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Tutorials</a><span class="dropBottom"></span>
            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Design</a><span class="dropRight"></span>
                    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Photoshop</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Illustrator</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Web Design</a><span class="dropRight"></span>
                            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">XTHML</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Articles</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Interviews</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Contact</a></li>
</ul>
</code></nav><br />
<code><nav>    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Home</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Tutorials</a><span class="dropBottom"></span>
            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Design</a><span class="dropRight"></span>
                    <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Photoshop</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Illustrator</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Web Design</a><span class="dropRight"></span>
                            <ul>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">XTHML</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">CSS</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">JavaScript</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Articles</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Interviews</a></li>
</ul>
</li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">About</a></li>
<li><a href="https://www.blogger.com/blogger.g?blogID=7413953502747285846#">Contact</a></li>
</ul>
</nav>

save template.

Conclusion:

 Thats all you have done. I hope you will found this menu looking cool and working. we have selected this css3 drop down menu for specially for blogger user. Its simple and SEO friendly. It delivers good appearance to blogger blog. Thank You!