Thursday, July 30, 2015

Colorful JQuery Unique Drop Down Menu bar for Blogger

This is a unique colourful drop down menu bar implemented by me. Now days there are lot of jQuery menu bar tutorials available on the internet that you can use it for blogger.However i focused on to create colourful menubar. Because its hard to find a kind of menubars. I hope you like this. Please dont forget to share with your social profiles.


Check all menubars from bloggertrix.com

Bloggertrix menu bars

Colorful_Unique_Drop_Down_Menu



Awesome 3d Effect Css Menu bar for Blogger


1. Go to Blogger Dashboard > Template
2. Find </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="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/respond.min.js"></script>
<script src="http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBar.js" 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.  Again find </body>
5. Paste below code just above it.
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarDownHover.gif", imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"http://preview.bloggertrix.com/coloful_unique_dropdown_menu/js/SpryMenuBarRightHover.gif"});
</script>


6. Now save your  Template  and go to blogger Layout
7. Click Add Gadget and select 'HTML/Javascript'
8. Paste below code.
<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="http://www.bloggertrix.com/" 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="http://www.bloggertrix.com/">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="http://www.bloggertrix.com/">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>  

7. Now save your HTML/Javascript'.You are done. If you have any problem related to this unique Menu bar. Just leave a comment.I will help to you.

Author Bio: Sohan Jayasinghe is the owner and author of Bloggertrix.com .He has been blogging since 2009 and writing Blogger trix since 2010.If you want to contact him, Just leave a message via contact us page or connect with facebook or twitter

22 comments:

  1. Hi, brother nice article
    can i change bar color? and what code i change to do this, i also change bar size too. my site are below.
    http://www.mybloggertools.com/

    Best Wishes , Adeel

    ReplyDelete
  2. Thanks for unique menubar brother

    ReplyDelete
  3. Nice article It was really help full but it not applicable to my one site http://expressnewsportal.blogspot.com/ please recommend me soon after you visit my site

    ReplyDelete
  4. incredible post really loved it
    Great tips for drop down colorful menu
    Thanks
    Discover more architectural and #3D_Walkthrough inspirations on
    http://www.thecheesyanimation.com/3D-Walkthrough.html

    ReplyDelete
  5. The Cheesy Animation Best 3D Home Floor Plan Studio. Our Best Service House, Villa, Bungalows, Hotel, Restaurants, Building Floor Plan .
    http://www.3d-architectural-rendering.com/3D-Floor-Plan.html

    ReplyDelete
  6. Great dropdowns.. Thanks for the post. Check out some good templates here and feel free to use them. http://simplytemplate.blogspot.com/

    ReplyDelete
  7. Really impressive post. Thanks for the shouted up such an informative post.

    ReplyDelete
  8. Nice post and menu bar is realy amazing

    regard

    Tech Tear

    ReplyDelete
  9. Nice content and great explain with details about subject.Thanks

    ReplyDelete
  10. Sir,
    Thank you for sharing it..i will try this code in my website.

    ReplyDelete
  11. It's really nice drop down menu. I will use this. Thank you for this helpful post.

    ReplyDelete
  12. Hello
    You gave an important information,this will helpful to fresher who donot have much knowledge of javascript this article will helpfull to them.Thank you

    ReplyDelete
  13. Thanks for your tutorial dropdown menu

    ReplyDelete
  14. Hii,
    Very helpful post. THank you for sharing this post.

    ReplyDelete
  15. Am gonna use this for my blog at http://earcontra.com

    ReplyDelete