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!

 

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.

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.

SHARES

Share

Pin it

Tweet

Share

Share

Print

Buffer

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 »

Mohammad 9/23/2011