Saturday 15 September 2012

Dynamic jQuery Menu For Blogger

Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.


First of all Blogger is still under maintenance so if you bought a domain then you have to wait more time to change it.Well maybe Blogger is doing some major changes , whatever we'll talk about it later.

This menu so beautiful and you can also customize it. It's a jquery based menu and i don't think now i have to explain power of jquery because you can experience it in my last posts which was about a Lightbox created by me so it's get started with this menu...

Installing :

  • Go To Blogger > Template > Edit HTML > Search for </head> 
  • Just above </head> paste following script :

<script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.min.js"></script>
<script type="text/javascript" src="http://widcraft.googlecode.com/svn/DynamicMenu.js"></script>

  • Now just above </body> add following script :
<script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
            });
        </script>

  • Now search for ]]></b:skin> and just above it paste following css :

.webwidget_menu_glide{
    padding: 5px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;

    border-radius:10px;
}
.webwidget_menu_glide .webwidget_menu_glide_sprite{
    width: 100px;
    height: 20px;
    background-color: fuchsia;
    position: absolute;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-radius-topright: 10px;
    -khtml-border-radius-topleft: 10px;
    border-radius-topright: 10px;
    border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -khtml-border-radius-bottomright: 10px;
    -khtml-border-radius-bottomleft: 10px;
    border-radius-bottomright: 10px;
    border-radius-bottomleft: 10px;

    border-radius:10px;
}
.webwidget_menu_glide ul{
    padding: 0px;
    margin: 0px;
    font-family:Arial;
}
.webwidget_menu_glide ul li{
    float: left;
    list-style: none;
    position: relative;
    text-align: center;
    margin-right: 10px;
    width: 100px;
}
.webwidget_menu_glide ul li a{
    color: black;
    text-decoration: none;
    font-weight: bold;
}
.webwidget_menu_glide ul li ul{
    -moz-border-radius-bottomright: 7px;
    -moz-border-radius-bottomleft: 7px;
    -webkit-border-bottom-left-radius: 7px;
    -webkit-border-bottom-right-radius: 7px;
    -khtml-border-radius-bottomright: 7px;
    -khtml-border-radius-bottomleft: 7px;
    border-radius-bottomright: 7px;
    border-radius-bottomleft: 7px;
    border-radius:7px;
    padding-bottom: 5px;
    position: absolute;
    z-index: 999999;
    display: none;
}
.webwidget_menu_glide ul li ul li{
    -moz-border-radius-topright: 0px;
    -moz-border-radius-topleft: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
    -khtml-border-radius-topright: 0px;
    -khtml-border-radius-topleft: 0px;
    border-radius-topright: 0px;
    border-radius-topleft: 0px;
    border-radius:0px;
    margin: 0px;
    float: none;
    border:none;
    word-wrap:break-word;
}
.webwidget_menu_glide ul li ul li a{
    padding-left: 5px;
    padding-right: 5px;
    font-weight: normal;
}

  • Save your template.

Well it was a bit long but this menu really worst it....now time to it on your layout :

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code :

<div id="webwidget_menu_glide" class="webwidget_menu_glide">
<div class="webwidget_menu_glide_sprite"></div>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href=" # ">News</a></li>
<li><a href=" # ">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href=" # ">More...</a></li>
</ul>
<div style="clear: both"></div>
</div>

Done.....


Customizing :

You can full customize this menu by editing the script we added above </body> tag.....Below are the fields you can customize marked in large text


<script language="javascript" type="text/javascript">
            $(function() {
                $("#webwidget_menu_glide").webwidget_menu_glide({menu_width:"100", menu_height:"30", menu_text_size:"15", menu_text_color:"#FFF", menu_sprite_color:"red", menu_background_color:"#C91A3E", menu_margin:"5", sprite_speed:"normal", container:"webwidget_menu_glide" });
            });
        </script>
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
 
Powered by Blogger.