DROP DOWN MENU FOR BLOG

Awesome CSS3 animated Menu for blogger Blog

There are many menus available on internet .Here I am saying about some pure css3 menus for your Blogger Blog.Here is a collection of pure css3 sliding animation menus.Let us see how to setup a beautiful menu for your Blogger Blog.



Want to see demo??Click the link below.

View Demo

• Go to Design->Page Elements [Take Layout in new template]
• Click on Add gadget just below the Header

•  Select HTML/Javascript and leave title as blank and copy the corresponding code of menu listed below
• You can change RED highlighted text with your Menu title and GREEN with LINK

Add Elemic Blue Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KqitvM9bDT-81daCa34P-2I4KnPMBdRCo8ldChDi64AeYyJvtfklOhb6dVygtFOoO7bOqra7GtIlU092Bxt3NRBecaO2syyIq7n6s8JoUMFg2Cy4k92AbU0zdM1AEKzv1raCIG_NaSo/s1600/noop-menu-blogger.png") repeat scroll 0 0 transparent;border:1px solid #1357AF!important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaLpa3u96h783fd3YLpMPjFuLLqu-BMblaQEkL6cMR5LW2GrPZTWW0xyBOP5swWkUCG75W-fqy0m6b87xu3cUu90YViwd0grKAk66z8XolmWaJxA3MQJl-amJNluKGZlPXn18QcOskC4/s1600/1x1juice.png" /></a>

<div class="noop-menu-blue">

    <ul class="menu">

        <li><a href="http://ergwifi.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://ergwifi.blogspot.com/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tricks">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

Add Green Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicx9RlpyofQVheWSUl4GiNKbtnrxVA2xkuc8kCiaQ0DgdZg3G6aERTx2LdNDnuDh8IOC1OJhWgn0oU4gidVSSObSJXLmxdRGoxN7tl_IXOZIKock7jObaOl7vJh3r3A6VeY4NY30HDrVs/s1600/netoops-menu-blogger+green.png") repeat scroll 0 0 transparent !important;

border: 1px solid #0E8410 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaLpa3u96h783fd3YLpMPjFuLLqu-BMblaQEkL6cMR5LW2GrPZTWW0xyBOP5swWkUCG75W-fqy0m6b87xu3cUu90YViwd0grKAk66z8XolmWaJxA3MQJl-amJNluKGZlPXn18QcOskC4/s1600/1x1juice.png" /></a>

<div class="noop-menu-green">

    <ul class="menu">

        <li><a href="http://ergwifi.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://ergwifi.blogspot.com/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://ergwifi.blogspot.com//search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tricks">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

Add Grape Purple Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgidBVwvnGj6QKEkQ3HChgd8EZoeqI031XlPRP4IOR0xcKLhnApsaovwgme22OMRjNZYIIQuZEvVKgrhWFObKaRX7It7BVx65Flp6vLZeuYWMMT3r47SpEfk-kRoZeA5EBX6g22y8_LdeU/s1600/netoops-menu-blogger+purple.png") repeat scroll 0 0 transparent !important;

border: 1px solid #7D0FAF !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaLpa3u96h783fd3YLpMPjFuLLqu-BMblaQEkL6cMR5LW2GrPZTWW0xyBOP5swWkUCG75W-fqy0m6b87xu3cUu90YViwd0grKAk66z8XolmWaJxA3MQJl-amJNluKGZlPXn18QcOskC4/s1600/1x1juice.png" /></a>

<div class="noop-menu-purple">

    <ul class="menu">

        <li><a href="http://ergwifi.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://ergwifi.blogspot.com/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tricks">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

Add Light-Dark SkyBlue Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNIbbVWTQJmXiwHJC1nIXB_8Vha_0314xHfHGoF2dQQI4VUwAZ8z-XILXVswOizZ-ElxP_EQW5c5XadzwRFGcU5PHp3LGfRWcf2cwiwyMLVc4mcAPFlje6Aq_Z9TAdbdu0uQat3NnsAc/s1600/netoops-menu-blogger+skyblue.png") repeat scroll 0 0 transparent !important;

border: 1px solid #138F93 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaLpa3u96h783fd3YLpMPjFuLLqu-BMblaQEkL6cMR5LW2GrPZTWW0xyBOP5swWkUCG75W-fqy0m6b87xu3cUu90YViwd0grKAk66z8XolmWaJxA3MQJl-amJNluKGZlPXn18QcOskC4/s1600/1x1juice.png" /></a>

<div class="noop-menu-skyblue">

    <ul class="menu">

        <li><a href="http://ergwifi.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://ergwifi.blogspot.com/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://ergwifi.blogspot.com/search/label/Blogger%20Tricks">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>

Add CSS based dropdown menu to blogger

In this post I will show you how to add a stylish CSS based dropdown menu to your blogger blog. This dropdown menu is purely created in CSS.  No JavaScript code is used for creating this navigation menu. It is very lightweight dropdown navigation menu because it uses only  CSS and HTML. It does not effect  loading time of the blog.
 
Read also :  Add multicolor navigation menu to blogger

Method:

• Open your blogger dashboard.
• Select your blog.
• Select Layout option.
• Click Add a gadget option .
• Select HTML/JavaScript widget.
• In the HTML/JavaScript box paste the following code and save the widget.

/* -------Dropdown navigation menu starts----- */

<style>
#wcdropdown{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#222222;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wcddmenu{
  float:left;
  width:740px;
  height:45px;
  display:block;
  padding:0;
  margin:0;
}

#wcddmenu ul{
  float:left;
  margin:0;
  padding:0;

}

#wcddmenu li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0

}

#wcddmenu li a, #wcddmenu li a:link{
  color:#dcdcdc;
  display:block;
  margin:0;
  padding:0 10px;
  text-decoration:none;
}

#wcddmenu li a:hover, #wcddmenu li a:active, #wcddmenu .current_page_item a  {
  color:#fff;
  padding:0 10px;
background:#333333;
}

#wcddmenu li li a, #wcddmenu li li a:link, #wcddmenu li li a:visited{
  font-size: 12px;
  background: #222222;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border-bottom:1px solid #333333;
}

#wcddmenu li li a:hover, #wcddmenu li li a:active {
  background: #333333;
  color: #fff;
}

#wcddmenu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px

}

#wcddmenu li:hover ul, #wcddmenu li li:hover ul, #wcddmenu li li li:hover ul, #wcddmenu li.sfhover ul, #topwcddmenu li li.sfhover ul, #topwcddmenu li li li.sfhover ul{
  left:auto
}

#wcddmenu li:hover, #wcddmenu li.sfhover{
  position:static

}


</style>

  <div id='wcdropdown'>
     <div id='wcddmenu'>
         <ul>
           <li><a href='data:blog.homepageUrl'>Home</a></li>
           <li><a href='#'>Dropdown 1 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>
                  <li><a href='#'>Link 5</a></li>
                  <li><a href='#'>Link 6</a></li>
               </ul>
           </li>
       
           
           <li><a href='#'>Dropdown 2 »</a>
               <ul>
                  <li><a href='#'>Link 1</a></li>
                  <li><a href='#'>Link 2</a></li>
                  <li><a href='#'>Link 3</a></li>
                  <li><a href='#'>Link 4</a></li>
                  
               </ul>
           </li>
    <li><a href='#'>About us</a>
              
           </li>
             <li><a href='#'>Contact us</a>           
           </li>
         </ul>
      </div>

 
      
   </div>

<!-- dropdown navigation menu ends-->

Add Tree Brown Menu

• Home
• Features
• Products
• Contact
• Tips

<style type="text/css">.menu li{list-style:none;display:inline}.menu li a{-moz-transition:all 270ms ease-in-out 0s;-webkit-transition:all 310ms ease-in-out;-o-transition:all 270ms ease-in-out;background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuExwzfOHcGIFIB38bHSI73ZXJ5w_sldIidS6IgkGY5KgdnjDLLdt3ShnEIWJ5iZNauuJr1Ioqf2xWvj-tYuYGbiux6uTWe308rPXKQYaZ-_sqbRxmp8cTLFi-Zoj3GYrIsFDnhl6R5Vs/s1600/netoops-menu-blogger+brown.png") repeat scroll 0 0 transparent !important;

border: 1px solid #7C4B12 !important;border-radius:3px 3px 3px 3px;color:#FFFFFF!important;font:14px arial!important;padding:10px 38px!important;text-decoration:none;text-shadow:1px 1px 0 #000;margin-left:-5px}.menu li a:hover{background-position:right center!important}</style><a href="http://netoopsblog.blogspot.com" style="position: absolute;z-index:-11;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyaLpa3u96h783fd3YLpMPjFuLLqu-BMblaQEkL6cMR5LW2GrPZTWW0xyBOP5swWkUCG75W-fqy0m6b87xu3cUu90YViwd0grKAk66z8XolmWaJxA3MQJl-amJNluKGZlPXn18QcOskC4/s1600/1x1juice.png" /></a>

<div class="noop-menu-brown">

    <ul class="menu">

        <li><a href="http://ergwifi.blogspot.com/">Home</a></li>

        <li><a href="#">Features</a></li>

        <li><a href="http://ergwifi.blogspot.com/search/label/Spice%20your%20Blog">Products</a></li>
        <li><a href="http://ergwifi.blogspot.com//search/label/Blogger%20Widgets">Contact</a></li>
        <li><a href="http://ergwifi.blogspot.com//search/label/Blogger%20Tips">Tips</a></li>
        <li><a href="http://ergwifi.blogspot.com//search/label/Blogger%20Tricks">Tricks</a></li>

        <li><a href="#">About</a></li>

    </ul>

</div>