jQuery Gooey Tab Menu For Blogger

Gooey menus are simple jquery menus that uses lava lamp effect to create CSS menus. Whenever you move your mouse cursor on a menu item, the gooey moves dynamically as you move right and left. Unlike our previously published drop down menus and tabs menus, this menu has some eye-catching effects which makes them stand out. You can easily customize them and add them with a click of a mouse to your blogspot blogs. I have kept the installation again limited to the use of a single widget so lets get to work then!

image

 

Live Demo

Adding Gooey Menu

  1. Go To Blogger > Design
  2. Choose a HTML/JavaScript widget (the one just below your header)
  3. Paste the following code inside it

<script type="text/javascript">
/* jQuery Gooey Menu
* Created: April 7th, 2011 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

jQuery.noConflict()

jQuery.extend(jQuery.easing, {easeOutBack:function(x, t, b, c, d, s){ //see http://gsgd.co.uk/sandbox/jquery/easing/
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }
})


var gooeymenu={
    effectmarkup: '<li class="active"></li>',

    setup:function(usersetting){
        jQuery(function($){ //on document.ready
            function snapback(dur){
                if ($selectedlink.length>0)
                    $effectref.dequeue().animate({left:$selectedlink.position().left, width:$selectedlink.outerWidth()}, dur, setting.fx)
            }
            var setting=jQuery.extend({fx:'easeOutBack', fxtime:500, snapdelay:300}, usersetting)
            var $menu=$('#'+setting.id).find('li:eq(0)').parents('ul:eq(0)') //select main menu UL
            var $menulinks=$menu.find('li a')
            var $effectref=$(gooeymenu.effectmarkup).css({top:$menulinks.eq(0).position().top, height:$menulinks.eq(0).outerHeight(), zIndex:-1}).appendTo($menu) //add trailing effect LI to the menu UL
            $effectref.css({left:-$menu.offset().left-$effectref.outerWidth()-5}) //position effect LI behind the left edge of the window
            if (typeof setting.selectitem!="undefined"){ //if setting.selectitem defined
                var $selectedlink=$menulinks.removeClass('selected').eq(setting.selectitem).addClass('selected')
            }
            else{
                var $selectedlink=$menulinks.filter('.selected:eq(0)') //find item with class="selected" manually defined
            }
            setting.defaultselectedBool=$selectedlink.length
            $menulinks.mouseover(function(){
                clearTimeout(setting.snapbacktimer)
                var $target=$(this)
//alert($target.position().left+" "+$target.get(0).offsetLeft)

                $effectref.dequeue().animate({left:$target.position().left, width:$target.outerWidth()}, setting.fxtime, setting.fx)
                if (setting.defaultselectedBool==0) //if there is no default selected menu item
                    $selectedlink=$target //set current mouseover element to selected element
            })
            if ($selectedlink.length>0){
                snapback(0)
                $menu.mouseleave(function(){
                    setting.snapbacktimer=setTimeout(function(){
                        snapback(setting.fxtime)
                    }, setting.snapdelay)
                })
            }
                $(window).bind('resize', function(){
                    snapback(setting.fxtime)
                })
        })
    }
}
</script>

<style>


ul li.active{ /*IE6 hack- hide gooey effect from that browser*/
_visibility: hidden; /*IE6 rule*/
}


/* -------MBT Gooey Menu--------*/
ul.framemenu{
margin-top:6px;
margin-bottom:15px;
padding: 0;
list-style: none;
position:relative;
text-align: left; //set value to "left", "center", or "right"*/
}

ul.framemenu li{
display: inline;
}

ul.framemenu li a{
font: bold 14px Arial, Verdana, sans-serif;
color: black;
padding: 12px 10px 5px 18px;
margin-right: 10px; /*spacing between each menu link*/
text-decoration: none;
}


ul.framemenu li.active{ /*style of LI that gets dynamically added to menu to create background effect*/
position:absolute;
width:0;
border:4px solid #FFA500; border-radius:15px; -moz-border-radius:15px;
-moz-box-shadow: 0 0 4px rgba(120,120,120,0.7);
-webkit-box-shadow: 0 0 4px rgba(120,120,120,0.7);
box-shadow: 0 0 4px rgba(120,120,120,0.7);
}
</style>

 

<ul id="gooeymenu4" class="framemenu">
<li><a href="#">Home</a></li>
<li><a href="#">CSS Codes</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Tools</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">CSS Gallery</a></li>
</ul>

<script>
gooeymenu.setup({id:'gooeymenu4', selectitem:0, snapdelay:500})

</script>

 

Just edit the yellow highlighted part with your page titles and Urls. Replace the # signs with your page URLs. To add another another tab simple create another li tag area and add it above </ul> as shown  below,

<li><a href="#">Page Name</a></li>

To change the border colour replace #FFA500 with any hexadecimal color code of your choice. Use our color wheel or chart Tools.

gooey menu

To change the rounded borders of frame to rectangular then simple delete the following code from above,

border-radius:15px; -moz-border-radius:15px;

    4.   Save and you are all set and done!

Visit your blogs to see the new navigation menu hanging just below your header. Let your visitors better explore your site by providing with something that may be worth trying. I will publish more versions of this effect soon so stay tuned. Have fun buddies! :)

*Menu by dynamic drive, Bloggerized by MBT.

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

26 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Awesome.. I was just thinking about this, that how does this type of Menus work.. And Here it is, the tutorial to it within 10 hours at MBT.. Thanxx a lot..

    ReplyDelete
  2. u r the maestro of web design...danx a loooootttt..pls visit my blog http://pingstuff.blogspot.com/

    ReplyDelete
  3. hey the box doesnot go back to the current when i remove the mouse hover in the menu.....u need to work on this

    ReplyDelete
  4. Nice post....Dude i want to add comment box to all my pages of blogger plz help me.... visit my blog and plz tell me what can i do????

    http://www.latest-gadgets4u.blogspot.com/

    ReplyDelete
  5. hey mohammad cool design thanks for your excellent work keep it up

    www.techshortly.com

    ReplyDelete
  6. great one
    visit my blog www.skfanclub.com

    ReplyDelete
  7. I am glad buddies that you all liked it. Thank you :)
    @Siddhesh
    Code updated per your request. Check now. :)

    @Shubham
    What comment box are you talking about? Facebook?
    Kindly check this post:
    http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html

    Or this:
    http://www.mybloggertricks.com/2011/09/1000-background-patterns-for-blogger.html

    ReplyDelete
  8. nice tute
    check back to see my site
    http://maxezone.blogspot.com/

    ReplyDelete
  9. rectangular part is not visible. in my blog

    www.itechiew.blogspot.com

    ReplyDelete
  10. I have inserted the same code in HTML widget bt it is not working, could you please help me. my blog is www.chimizhu1.blogspot.com

    ReplyDelete
  11. its nt wrking on my blog can u say the reason

    ReplyDelete
  12. thanks for ,,,,,, but its not work with me too we hope to help us

    ReplyDelete
  13. assalaamu alaikum yaa habeebi.....
    i liked ur post & writing style very much...but...its not working with me...
    after pasting the code it just appears as a menu.
    wat should i do...?
    hope u help..

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. visit my blog
    http://a2zhackers.blogspot.com

    ReplyDelete
  17. Hello there, I really like this menu but it's not working, can you help me? thank you!

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. HIII
    I APPLIED THIS CODES TO MY BLOG BUT I M RECEIVING A PROBLEM.

    IT DOESN'T SHOW THE LOWER LINE OF THE FRAME.
    Visit www.topfurtive.blogspot.in and have a glance at it.

    PLEASE DO LOOK TO THIS ISSUE AND FIX IT FOR ME IF POSSIBLE.

    THANK YOU.

    ReplyDelete
  20. shows up only names not yellow border ..

    ReplyDelete
  21. my blog --> thetriick11.blogspot.com .. check & say how to make it work properly please
    Thank you

    ReplyDelete
  22. I developed my site with lot of tricks

    http://www.trickstoo.com

    ReplyDelete
  23. This works in my blog, thank you

    ReplyDelete