Jquery Unique Colorful Drop Down Navigation Menu Bar

0
Jquery stylish Colorful Drop Down Navigation Menu Bar for blogger
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.


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 !!
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
In this tutorial i'm going to explain how to add unique colorful jquery navigation menu bar ...
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

You Might Also Like:

We hope this article helped you to learn Jquery Unique Colorful Drop Down Navigation Menu Bar. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "Jquery Unique Colorful Drop Down Navigation Menu Bar" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand