Jquery Unique Colorful Drop Down Navigation Menu Bar

Also Read

In this tutorial i'm going to explain how to add unique colorful jquery navigation menu bar for blogger.There are lot of jquery menu bars available on internet but this one is unique because i foucsed on making colorful and user friendly,it will give attractive look to your blospot blog or website.just follow the steps mentioned below to grab this unique colorful hover style navigation menu bar.

Demo

How To Add 3D Effect Css Jquery Colorful Navigation Menu bar for blogger

1. Go to Blogger Dashboard > Edit Template

2. Now click anywhere inside your code area and Find by using ctrl+f  </head>

3. Paste below code just above it.

<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/boilerplate.css" rel="stylesheet" type="text/css"/>
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css"/>
<link href="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarVertical.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'/>
<script src='https://googledrive.com/host/0B58fhAmOxE7ENUdLWUNMRXVZVG8' type='text/javascript'></script>
<script src='https://googledrive.com/host/0B58fhAmOxE7EbGJPSk9ZbTV6UEU' type='text/javascript'></script>
<style>
.menubar {width: 750px;float: left;-moz-box-shadow: 0px 0px 19px #000000;-webkit-box-shadow: 0px 0px 19px rgb(0, 0, 0);box-shadow: 0px 0px 8px rgb(0, 0, 0);padding: 7px;border-radius: 4px;position: relative;margin-top: 50px;background-color: rgb(255, 255, 255);margin-left: 23%;
</style>

4. Now Find </body> 
5. paste below code just above it.

<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://3.bp.blogspot.com/-jOaKkNotN_s/VcB5tbMh8QI/AAAAAAAABOg/88xnltShm8o/s1600/SpryMenuBarDownHover.gif", imgRight:"http://1.bp.blogspot.com/-wXA7XZQa2dw/VcB5tS7UG-I/AAAAAAAABOk/oNpVfp4UNzY/s1600/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://1.bp.blogspot.com/-wXA7XZQa2dw/VcB5tS7UG-I/AAAAAAAABOk/oNpVfp4UNzY/s1600/SpryMenuBarRightHover.gif"});
</script>

6. Now save your template.
7. Now go to Layout and click Add a gadget and select HTML/JAVASCRIPT
8. Now paste below code in html/javascript gadget

<div class="menubar">
  <ul id="MenuBar1" class="MenuBarHorizontal">
     <li style="text-indent: 10px;width:80px;height:44px;background-color:#1d75bd";><a id="navhd" href="#">Home</a></li>
     <li class="choosedestination"><a id="navhd" class="MenuBarItemSubmenu" href="#" style="">Free blogger tricks</a>
     <ul id="destination1">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="destination1" class="" style="margin-left: 175px;margin-top: -2px;">
        <li id="desti_nav"><a href="#" class="">Item 3.1.1</a></li>
        <li id="desti_nav"><a href="#" class="">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="desti_nav"><a href="#">Item 3.2</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
       <li id="desti_nav"><a href="#">Item 3.3</a></li>
     </ul>
     </li>
     <li class="holidaytp" style=""><a id="navhd" class="MenuBarItemSubmenu" href="#">CSS Tricks</a>
     <ul id="holidayt" >
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="holidayt" style="margin-left: 175px;margin-top: -2px;">
        <li id="holiday_nav"><a href="#">Item 3.1.1</a></li>
        <li id="holiday_nav"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="holiday_nav"><a href="#">Item 3.2</a></li>
       <li id="holiday_nav" ><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li class="retriveb" style=" width: 145px;"><a id="navhd" class="MenuBarItemSubmenu" href="#">JQuery Menu bars</a>
     <ul id="retrivemy">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="retrivemy" style="margin-left: 175px;margin-top: -2px;">
        <li id="Retrivebk"><a href="#">Item 3.1.1</a></li>
        <li id="Retrivebk"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="Retrivebk" ><a href="#">Item 3.2</a></li>
       <li id="Retrivebk" ><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li class="makeanen" style="width: 127px;" ><a id="navhd" class="MenuBarItemSubmenu" href="#">Make an Enquiry</a>
     <ul id="makenanEnquery">
       <li style="height: 34px;line-height: 10px;"><a class="MenuBarItemSubmenu" href="#">Item 3.1</a>
      <ul id="makenanEnquery" style="margin-left: 175px;margin-top: -2px;">
        <li id="mkeinq"><a href="#">Item 3.1.1</a></li>
        <li id="mkeinq"><a href="#">Item 3.1.2</a></li>
      </ul>
       </li>
       <li id="mkeinq"><a href="#">Item 3.2</a></li>
       <li id="mkeinq"><a href="#">Item 3.3</a></li>
     </ul>
    </li>
     <li style="text-indent:10px;width: 109px;background-image: url(http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/images/naw-bar6.png);background-repeat: repeat-x;  margin-left: 1px;"><a id="navhd" href="#">Contact Us</a>
     </ul>  
  </div>    

Note: Replace # with your urls.

9.Save your template,Done !!

SUMMARY

how to add Jquery stylish unique beautiful Colorful Drop Down Navigation Menu Bar for blogger blogspot,red,green,blue,purple,magenta colour combination menu bar with hover effect,3d css effect bar

KEEP ON READING