jQuery Gooey Tab Menu για το blog σας

Ένα όμορφο gadget και πολύ απλό, γιατί δε χρειάζεται να επεμβείτε καν στον κώδικα. Προστίθεται απλά σαν ένα gadget.

• Σύνδεση στον Blogger
• Σχεδίαση / Στοιχεία Σελίδας 
• Προσθήκη gadget - HTML/JavaScript κάτω από τον Header
• Προσθέστε τον παρακάτω κώδικα:

<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="#">TITLE 1</a></li> 
<li><a href="#">TITLE 2</a></li> 
<li><a href="#">TITLE 3</a></li> 
<li><a href="#">TITLE 4</a></li> 
<li><a href="#">TITLE 5</a></li> 
<li><a href="#">TITLE 6</a></li> 
</ul>
<script> 
gooeymenu.setup({id:'gooeymenu4', selectitem:0, snapdelay:500})
</script>

• Αντικαταστήστε στο κομμάτι με τα κίτρινα φόντα τη δίεση "#" με το link που θέλετε να σας οδηγεί και τον τίτλο που θέλετε να εμφανίζεται στο κουμπί.
• Αποθήκευση και είστε έτοιμοι και θα δείχνει όπως στην εικόνα παρακάτω.