Menu horizontal para Blogs/Sites
Autor: João Santos | Publicado: 2011-03-29T12:47:00-03:00

Olá pessoal, Hoje vai mais um menu horizontal com efeitos e bastante firme, que por meio do Design Lasantha Bandara, podemos ter e repassar a vocês. Já publiquei outros menus por aqui, inclusive você pode ver um desses Clicando Aqui , muito bom, não deixe de conferir.

Vamos à prática?!? É muito simples... Vá em Design ~&gt;&nbsp; Elementos da Página ~&gt; Editar HTML ~&gt; e adicione todo o código abaixo acima da tag&nbsp;&lt;/head&gt;.

Demo 



  
&lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[/** jQuery Color Animations* Copyright 2007 John Resig* Released under the MIT and GPL licenses.*/(function(jQuery){// We override the animation for all of these color stylesjQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){&nbsp;jQuery.fx.step[attr] = function(fx){&nbsp; if ( fx.state == 0 ) {&nbsp;&nbsp; fx.start = getColor( fx.elem, attr );&nbsp;&nbsp; fx.end = getRGB( fx.end );&nbsp; }&nbsp; fx.elem.style[attr] = "rgb(" + [&nbsp;&nbsp; Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),&nbsp;&nbsp; Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),&nbsp;&nbsp; Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)&nbsp; ].join(",") + ")";&nbsp;}});// Color Conversion functions from highlightFade// By Blair Mitchelmore// http://jquery.offput.ca/highlightFade/// Parse strings looking for color tuples [255,255,255]function getRGB(color) {&nbsp;var result;&nbsp;// Check if we're already dealing with an array of colors&nbsp;if ( color &amp;&amp; color.constructor == Array &amp;&amp; color.length == 3 )&nbsp; return color;&nbsp;// Look for rgb(num,num,num)&nbsp;if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))&nbsp; return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];&nbsp;// Look for rgb(num%,num%,num%)&nbsp;if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))&nbsp; return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];&nbsp;// Look for #a0b1c2&nbsp;if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))&nbsp; return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];&nbsp;// Look for #fff&nbsp;if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))&nbsp; return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];&nbsp;// Otherwise, we're most likely dealing with a named color&nbsp;return colors[jQuery.trim(color).toLowerCase()];}function getColor(elem, attr) {&nbsp;var color;&nbsp;do {&nbsp; color = jQuery.curCSS(elem, attr);&nbsp; // Keep going until we find an element that has color, or we hit the body&nbsp; if ( color != '' &amp;&amp; color != 'transparent' || jQuery.nodeName(elem, "body") )&nbsp;&nbsp; break;&nbsp; attr = "backgroundColor";&nbsp;} while ( elem = elem.parentNode );&nbsp;return getRGB(color);};// Some named colors to work with// From Interface by Stefan Petre// http://interface.eyecon.ro/var colors = {&nbsp;aqua:[0,255,255],&nbsp;azure:[240,255,255],&nbsp;beige:[245,245,220],&nbsp;black:[0,0,0],&nbsp;blue:[0,0,255],&nbsp;brown:[165,42,42],&nbsp;cyan:[0,255,255],&nbsp;darkblue:[0,0,139],&nbsp;darkcyan:[0,139,139],&nbsp;darkgrey:[169,169,169],&nbsp;darkgreen:[0,100,0],&nbsp;darkkhaki:[189,183,107],&nbsp;darkmagenta:[139,0,139],&nbsp;darkolivegreen:[85,107,47],&nbsp;darkorange:[255,140,0],&nbsp;darkorchid:[153,50,204],&nbsp;darkred:[139,0,0],&nbsp;darksalmon:[233,150,122],&nbsp;darkviolet:[148,0,211],&nbsp;fuchsia:[255,0,255],&nbsp;gold:[255,215,0],&nbsp;green:[0,128,0],&nbsp;indigo:[75,0,130],&nbsp;khaki:[240,230,140],&nbsp;lightblue:[173,216,230],&nbsp;lightcyan:[224,255,255],&nbsp;lightgreen:[144,238,144],&nbsp;lightgrey:[211,211,211],&nbsp;lightpink&nbsp;lightyellow:[255,255,224],&nbsp;lime:[0,255,0],&nbsp;magenta:[255,0,255],&nbsp;maroon:[128,0,0],&nbsp;navy:[0,0,128],&nbsp;olive:[128,128,0],&nbsp;orange:[255,165,0],&nbsp;pink:[255,192,203],&nbsp;purple:[128,0,128],&nbsp;violet:[128,0,128],&nbsp;red:[255,0,0],&nbsp;silver:[192,192,192],&nbsp;white:[255,255,255],&nbsp;yellow:[255,255,0]};})(jQuery);//]]&gt;&lt;/script&gt;&lt;script type='text/javascript'&gt;//&lt;![CDATA[var hoverColour = "#FFF";$(function(){$("a.hoverBtn").show("fast", function() {&nbsp;$(this).wrap("&lt;div class=\"hoverBtn\"&gt;");&nbsp;$(this).attr("class", "");});//display the hover div$("div.hoverBtn").show("fast", function() {&nbsp;//append the background div&nbsp;$(this).append("&lt;div&gt;&lt;/div&gt;");&nbsp;//get link's size&nbsp;var wid = $(this).children("a").width();&nbsp;var hei = $(this).children("a").height();&nbsp;//set div's size&nbsp;$(this).width(wid);&nbsp;$(this).height(hei);&nbsp;$(this).children("div").width(wid);&nbsp;$(this).children("div").height(hei);&nbsp;//on link hover&nbsp;$(this).children("a").hover(function(){&nbsp; //store initial link colour&nbsp; if ($(this).attr("rel") == "") {&nbsp;&nbsp; $(this).attr("rel", $(this).css("color"));&nbsp; }&nbsp; //fade in the background&nbsp; $(this).parent().children("div")&nbsp;&nbsp; .stop()&nbsp;&nbsp; .css({"display": "none", "opacity": "1"})&nbsp;&nbsp; .fadeIn("fast");&nbsp; //fade the colour&nbsp; $(this) .stop()&nbsp;&nbsp; .css({"color": $(this).attr("rel")})&nbsp;&nbsp; .animate({"color": hoverColour}, 350);&nbsp;},function(){&nbsp; //fade out the background&nbsp; $(this).parent().children("div")&nbsp;&nbsp; .stop()&nbsp;&nbsp; .fadeOut("slow");&nbsp; //fade the colour&nbsp; $(this) .stop()&nbsp;&nbsp; .animate({"color": $(this).attr("rel")}, 250);&nbsp;});});});//]]&gt;&lt;/script&gt;&lt;style type='text/css'&gt;div.hoverBtn {position:&nbsp;&nbsp; relative;float:&nbsp;&nbsp; left;background:&nbsp; #000000 url(http://3.bp.blogspot.com/_4HKUHirY_2U/SvvwhZbkLRI/AAAAAAAAAK8/r6Z4VoAIi1c/navBG.png) repeat-x 0 0 scroll;}div.hoverBtn a {position:&nbsp;&nbsp; relative;z-index:&nbsp;&nbsp; 2;display:&nbsp;&nbsp; block;width:&nbsp;&nbsp;&nbsp; 100px;height:&nbsp;&nbsp; 30px;line-height:&nbsp;&nbsp; 30px;text-align:&nbsp;&nbsp; center;font-size:&nbsp; 1.1em;text-decoration: none;color:&nbsp;&nbsp; #000;background:&nbsp; transparent none repeat-x 0 0 scroll;}div.hoverBtn div {display:&nbsp; none;position:&nbsp;&nbsp; absolute;z-index:&nbsp;&nbsp; 1;top:&nbsp;&nbsp;&nbsp; 0px;background:&nbsp; #ffffff url(http://1.bp.blogspot.com/_4HKUHirY_2U/SvvwkpzFInI/AAAAAAAAALE/-MOpUEFRUtY/navHover.png) repeat-x 0 0 scroll;&lt;/style&gt;

Não se assuste o código é enorme mesmo, visualize, se tudo estiver bem&nbsp; salve!Agora adicione um Gadget HTML/JavaScript, em seguida, adicione todo o código abaixo dentro.

&lt;a class="hoverBtn" href="#"&gt;Início&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;HTML&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;CSS&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;Parcerias&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;Sobre nós&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;Tutoriais&lt;/a&gt;&lt;a class="hoverBtn" href="#"&gt;Contato&lt;/a&gt;

Depois é só escolher um lugar abaixo do seu banner superior (header), não esquecendo de alterar os # com a URL desejada e alterar os nomes dos links de acordo com seu gosto. E salvar!
Eu sugiro que hospedem os arquivos que estão neste código para não ter complicações futuras, o google sites faz isso.&gt;&gt; Arquivo 01 - Arquivo 02 - Arquivo 03 em seguida é só substituir pela ordem que está aqui. Salve tudo e ao final ficará assim:
Demo:
Qualquer eventual dúvida, deixe seu comentário.
Até a próxima!