Animated Drop Down Navigation Menu With Css3 For Blogger

Live Demo

                   

Drop down menu help users to navigate easily. It is user friendly and you will often see many trends in which drop-down menus are used, It help to organize categories and tags, but the problem is that blogger is not providing this type of menu to there user but we can indirectly add this drop down menus to blogger by adding certain html/css codes. In this post I will give you multi level navigation menu with awesome css3 animation.

Recommended Post : CSS Thin Style Dropdown Menu For Blogger

Add This Menu To Blogger :

The steps are extremely straightforward, and would merely take 5 minutes to complete the integration. Just follow the steps as mention below.

Step  1: Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed

Step 2: Now within the template search for ]]></b:skin> and just above it paste the following Style sheet CSS Code.

#cssmenu ul { margin: 0; padding: 0;} #cssmenu li { margin: 0; padding: 0;} #cssmenu a { margin: 0; padding: 0;} #cssmenu ul {list-style: none;} #cssmenu a {text-decoration: none;} #cssmenu {height: 70px; background-color: rgb(35,35,35); box-shadow: 0px 2px 3px rgba(0,0,0,.4);} #cssmenu > ul > li { float: left; margin-left: 15px; position: relative; z-index:9999999; } #cssmenu > ul > li > a { color: rgb(160,160,160); font-family: Verdana, 'Lucida Grande'; font-size: 15px; line-height: 70px; padding: 15px 20px; -webkit-transition: color .15s; -moz-transition: color .15s; -o-transition: color .15s; transition: color .15s; } #cssmenu > ul > li > a:hover {color: rgb(250,250,250); } #cssmenu > ul > li > ul { opacity: 0; visibility: hidden; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; position: absolute; top: 55px; left: 50%; margin-left: -90px; width: 180px; -webkit-transition: all .3s .1s; -moz-transition: all .3s .1s; -o-transition: all .3s .1s; transition: all .3s .1s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu > ul > li:hover > ul { opacity: 1; top: 65px; visibility: visible; } #cssmenu > ul > li > ul:before{ content: ''; display: block; border-color: transparent transparent rgb(250,250,250) transparent; border-style: solid; border-width: 10px; position: absolute; top: -20px; left: 50%; margin-left: -10px; } #cssmenu > ul ul > li { position: relative;} #cssmenu ul ul a{ color: rgb(50,50,50); font-family: Verdana, 'Lucida Grande'; font-size: 13px; background-color: rgb(250,250,250); padding: 5px 8px 7px 16px; display: block; -webkit-transition: background-color .1s; -moz-transition: background-color .1s; -o-transition: background-color .1s; transition: background-color .1s; } #cssmenu ul ul a:hover {background-color: rgb(240,240,240);} #cssmenu ul ul ul { visibility: hidden; opacity: 0; position: absolute; top: -16px; left: 206px; padding: 16px 0 20px 0; background-color: rgb(250,250,250); text-align: left; width: 160px; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,.4); -moz-box-shadow: 0px 1px 3px rgba(0,0,0,.4); box-shadow: 0px 1px 3px rgba(0,0,0,.4); } #cssmenu ul ul > li:hover > ul { opacity: 1; left: 196px; visibility: visible;} #cssmenu ul ul a:hover{ background-color: rgb(205,44,36); color: rgb(240,240,240); }

Step 3: After Pasting Above Code Click On Save Button

Step 4: Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript.

<div id='cssmenu'>
<ul>
   <li class='active'><a href='/'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

• Replace all # with respected link.
• After Customizing it and adding all code successfully click on save template and preview this menu live on your blog.

End.

content source