Como Inserir Menu Horizontal (Pedido)

Atendendo ao pedido do Gabriel, este tutorial é para aqueles que gostaram do nosso menu horizontal e gostaria de ter um igual em seu blog. Não é recomendado a usuários sem experiência! Lembre-se de fazer um backup de seu template sempre que testar alterações nele!

1) Copie TODO o código abaixo e cole na seção onde fica o CSS do seu template:

#miniflex {<br /> width: 100%;<br /> float: left;<br /> font-size: small; /* could be specified at a higher level */<br /> margin: 0;<br /> padding: 0 10px 0 10px;<br /> border-bottom: 1px solid #696;<br /> position:relative;<br /> z-index:2;<br />}<br /><br />#miniflex li {<br /> float: left;<br /> margin: 0;<br /> padding: 0;<br /> display: inline;<br /> list-style: none;<br /> position:relative;<br />}<br /><br />#miniflex a:link, #miniflex a:visited {<br /> float: left;<br /> font-size: 85%;<br /> line-height: 20px;<br /> font-weight: bold;<br /> margin: 0 10px 0 10px;<br /> text-decoration: none;<br /> color: #9c9;<br />}<br /><br />#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {<br /> border-bottom: 4px solid #696;<br /> padding-bottom: 2px;<br /> color: #696;<br />}<br /> <br />#animated-tab {<br /> position: absolute;<br /> z-index: 1;<br /> font-size: 85%;<br /> line-height: 20px;<br /> padding-bottom: 2px;<br /> border-bottom: 4px solid #696;<br />}

2) Copie TODO o código abaixo e cole no seu Bloco de Notas (Menu Iniciar > Todos os Programas > Acessórios > Bloco de Notas, se estiver usando Windows XP).

/* This script and many more are available free online at<br />The JavaScript Source :: http://javascript.internet.com<br />Created by: Brian McAllister :: http://www.frequency-decoder.com/ */<br /><br />/*<br />Animated miniTabs by frequency decoder<br />Further information on this script can be located<br />on the authors Web site http://www.frequency-decoder.com/<br /><br />Based on an idea by Rob L Glazebrook<br />(http://www.rootarcana.com/test/smartmini/)<br />which was derived from the original idea of Stephen Clark<br />(http://www.sgclark.com/sandbox/minislide/)<br /><br />Changes<br />=======<br />05/03/06 : Creation<br />08/03/06 : Added the cleanUp method to stop IE memory leaks.<br /><br />This script is distributed under a "Attribution-NonCommercial-ShareAlike 2.0" license<br /><br />You are free:<br /> 1. to copy, distribute, display, and perform the work.<br /> 2. to make derivative works.<br /><br />Under the following conditions:<br /><br /> 1. **Attribution*: You must attribute the work in the manner specified<br /> by the author or licensor.<br /> 2. Noncommercial*: You may not use this work for commercial purposes.*<br /> 3. Share Alike*: If you alter, transform, or build upon this work,<br /> you may distribute the resulting work only under a license identical to this one.<br />*/<br /><br /><br />var miniTab = {<br /> currentTab: 0,<br /> activeTab: 0,<br /> destX: 0,<br /> destW: 0,<br /> t: 0,<br /> b: 0,<br /> c: 0,<br /> d: 20,<br /> animInterval: null,<br /> sliderObj: null,<br /> aHeight: 0,<br /> <br /> init: function() {<br /> if(!document.getElementById || !document.getElementById("miniflex")) return;<br /> <br /> var ul = document.getElementById("miniflex");<br /> var liArr = ul.getElementsByTagName("li");<br /> var aArr = ul.getElementsByTagName("a");<br /> <br /> for(var i = 0, li; li = liArr[i]; i++) {<br /> liArr[i].onmouseover = aArr[i].onfocus = function(e) {<br /> var pos = 0;<br /> var elem = this.nodeName == "LI" ? this : this.parentNode;<br /> while(elem.previousSibling) {<br /> elem = elem.previousSibling;<br /> if(elem.tagName && elem.tagName == "LI") pos++;<br /> }<br /> miniTab.initSlide(pos);<br /> }<br /> }<br /><br /> ul.onmouseout = function(e) {<br /> miniTab.initSlide(miniTab.currentTab);<br /> };<br /> <br /> for(var i = 0; i <>=0) {<br /> miniTab.activeTab = miniTab.currentTab = i;<br /> }<br /> aArr[i].style.borderBottom = "0px";<br /> aArr[i].style.paddingBottom = "6px";<br /> }<br /><br /> miniTab.slideObj = ul.parentNode.appendChild(document.createElement("div"));<br /> miniTab.slideObj.appendChild(document.createTextNode(String.fromCharCode(160)));<br /> miniTab.slideObj.id = "animated-tab";<br /> miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";<br /> miniTab.slideObj.style.left = (ul.offsetLeft + + liArr[miniTab.activeTab].offsetLeft + aArr[miniTab.activeTab].offsetLeft) + "px";<br /> miniTab.slideObj.style.width = aArr[miniTab.activeTab].offsetWidth + "px";<br /> miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop;<br /> <br /> miniTab.initSlide(miniTab.activeTab, true);<br /> <br /> var intervalMethod = function() { miniTab.slideIt(); }<br /> miniTab.animInterval = setInterval(intervalMethod,10);<br /> },<br /><br /> cleanUp: function() {<br /> clearInterval(miniTab.animInterval);<br /> miniTab.animInterval = null;<br /> },<br /> <br /> initSlide: function(pos, force) {<br /> if(!force && pos == miniTab.activeTab) return;<br /> miniTab.activeTab = pos;<br /> miniTab.initAnim();<br /> },<br /> <br /> initAnim: function() {<br /> var ul = document.getElementById("miniflex");<br /> var liArr = ul.getElementsByTagName("li");<br /> var aArr = ul.getElementsByTagName("a");<br /> miniTab.destX = parseInt(liArr[miniTab.activeTab].offsetLeft + liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetLeft + ul.offsetLeft);<br /> miniTab.destW = parseInt(liArr[miniTab.activeTab].getElementsByTagName("a")[0].offsetWidth);<br /> miniTab.t = 0;<br /> miniTab.b = miniTab.slideObj.offsetLeft;<br /> miniTab.c = miniTab.destX - miniTab.b;<br /> miniTab.bW = miniTab.slideObj.offsetWidth;<br /> miniTab.cW = miniTab.destW - miniTab.bW;<br /> miniTab.slideObj.style.top = (ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) + "px";<br /> },<br /> <br /> slideIt:function() {<br /> var ul = document.getElementById("miniflex");<br /> var liArr = ul.getElementsByTagName("li");<br /> var aArr = ul.getElementsByTagName("a");<br /> <br /> // Has the browser text size changed?<br /> if(miniTab.aHeight != ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop) {<br /> miniTab.initAnim();<br /> miniTab.aHeight = ul.offsetTop + liArr[miniTab.activeTab].offsetTop + aArr[miniTab.activeTab].offsetTop<br /> };<br /> <br /> if(miniTab.t++ < x =" miniTab.animate(miniTab.t,miniTab.b,miniTab.c,miniTab.d);" w =" miniTab.animate(miniTab.t,miniTab.bW,miniTab.cW,miniTab.d);" left =" parseInt(x)" width =" parseInt(w)" left =" miniTab.destX" width =" miniTab.destW" onload =" miniTab.init;" onunload =" miniTab.cleanUp;">

3) Salve o arquivo como miniTab.js e feche-o
4) Hospede o arquivo salvo em algum site na net (recomendo o Freewebs, pela facilidade de uso)
5) Cole o código abaixo na seção HEAD do seu código HTML. Você precisará editar o link do código, colocando o endereço de onde hospedou o arquivo miniTab.js

<br /><script type="text/javascript" src="HTTP://ENDEREÇO-ONDE-HOSPEDOU/miniTab.js"></script>

6) Agora cole o código abaixo na seção BODY do seu código HTML, no local onde quer que o menu apareça. Você precisará editar os itens do menu, colocando os links que deseja. Pode ser que você tenha que testar várias posições até achar a que melhor lhe agrada.

<ul id="'miniflex'"><br /><li><a href="'http://SEU-BLOG.blogspot.com/link1'">Link 1</a></li><br /><li><a href="'http://SEU-BLOG.blogspot.com/link2'">Link 2</a></li><br /><li><a href="'http://SEU-BLOG.blogspot.com/link3'">Link 3</a></li><br /><li><a href="'http://SEU-BLOG.blogspot.com/link4'">Link 4</a></li><br /><li><a href="'http://SEU-BLOG.blogspot.com/link4'">Link 5</a></li><br /><li><a href="'http://SEU-BLOG.blogspot.com/link4'">Link 6</a></li></ul>

7) Salve seu menu e visualize para ver se deu tudo certo.

Qualquer dúvida, deixe um comentário! Fonte: http://javascript.internet.com/navigation/animated-minitabs.html