Saiba como se faz:..."Menu em abas deslizante na sidebar com JQuery"
Autor: Edilene brandao da silva | Publicado: 2010-11-18T16:12:00-08:00


Saiba como se faz:...&nbsp;
"Menu em abas deslizante na sidebar com JQuery" 












 
 

   
..." &nbsp; tutorial ...

...aprender a instalar um menu em abas com efeito deslizante na sidebar, com JQuery."



"&nbsp;&nbsp; Com este menu você pode aproveitar melhor o espaço dos elementos na sua sidebar."


"&nbsp; Ele  funciona à&nbsp; base de um javascript e possui um efeito deslizante bem  bonito ao fechar uma aba e abrir a seguinte. Ele é simples e fácil de  instalar, e o que é melhor, é bem leve!


Para visualizar o menu, clique no link para ver a Demonstração do menu em abas deslizante

Para  este menu, você não precisa se preocupar em hospedar o arquivo  javascript, pois iremos utilizar um arquivo que faz parte da biblioteca  Google API.


Então vamos a instalação!

1º passo: Definir os estilos para o seu menu em abas:

Vá  em "&nbsp;&nbsp; design"&nbsp;&nbsp;&nbsp; &gt;&gt; "&nbsp; Editar HTML", (não precisa clicar em 'Expandir  modelos de widgets'), e cole o seguinte código logo ACIMA da tag ]]&gt;&lt;/b:skin&gt;


/*--- Menu em Abas ---*/
.widgets{
float:left;
margin:1px 0 10px 1px;
width:auto;}

ul.tabnav{
margin:0;
padding:0;
width:auto;
text-align:center;
}
/*--- Titulos das Abas ---*/
.tabnav li{ /* estilos para os titulos da lista */
display:inline;
float:left;
list-style:none;
margin:0 2px;
padding:2px 10px 20px 10px;
border:1px solid #fff; /* edite cor da borda */
background:#0066CC; /* edite cor de fundo */
}
.tabnav li a{ /* estilos para titulos ativos */
color:#fff;  /* edite cor do texto */
display:block;
font-size:95%;
font-family:Arial, Tahoma, Verdana;
font-weight:bold;
margin:2px 0 0 2px;
outline:none;
padding:2px 3px 1px 3px;
text-transform:uppercase;
}
/*--- Abas Ativas ---*/
.tabnav li a:hover, /* estilos para os links hover e aba ativa */
.tabnav li a:active,
.tabnav li.ui-tabs-selected a{
background:#0066CC; /* edite cor de fundo */
color:#fff;  /* edite cor do texto */
text-decoration:none;
}
/*--- Container com os Widgets ---*/
.tabdiv{
background:#000; /* edite cor de fundo */
border:1px solid #fff; /* edite cor da borda */
padding:5px 0 0 5px}

.tabdiv h2{
display:none}

.tabdiv ul{
list-style:none;
padding:5px 0px}

/*----- Links Internos -----*/
.tabdiv li{ /* estilos para os links dos widgets */
border-bottom:1px dashed #fff; /* edite cor da borda */
line-height:1.35em;
margin:2px 0 2px 0;
padding:0 0 4px 10px}

.tabdiv li a:link,
.tabdiv li a:visited{
overflow: hidden}

.tabdiv li a:hover {
text-decoration:none}

.ui-tabs-hide{
display:none}

2º passo: Adicionar o arquivo Javascript para funcionamento do menu:
Cole o seguinte código logo ABAIXO da tag ]]&gt;&lt;/b:skin&gt;

&lt;!-- JavaScript JQuery Menu em Abas --&gt;
&lt;script src='http://www.google.com/jsapi'/&gt;
&lt;script&gt;
google.load(&amp;quot;jquery&amp;quot;, &amp;quot;1.3.1&amp;quot;);
google.load(&amp;quot;jqueryui&amp;quot;, &amp;quot;1.5.3&amp;quot;);
&lt;/script&gt;


&lt;script type='text/javascript'&gt;
//&lt;![CDATA[
// &lt;!-- Tab Sidebar --&gt;
$(document).ready(function() {
$('#tab-sidebar&gt; ul').tabs({ fx: { height: 'toggle', opacity: 'toggle' } });
});
//]]&gt;
&lt;/script&gt;
&lt;!-- Fim JavaScript JQuery Menu em Abas --&gt;

"&nbsp; Salve as modificações, porém ainda não será possível visualizar seu menu em abas, pois ainda será preciso inclui-lo no seu html.
Vamos ao próximo passo."
3º passo: Incluir o menu em abas no html do template:

Mantenha desmarcada a opção: '&nbsp; Expandir modelos de widgets'.


Importante: Se você quiser que seu menu em abas fique no TOPO da sidebar, siga as orientações a seguir:



Procure pelo trecho:

&lt;div id='sidebar-wrapper'&gt;
&lt;b:section class='sidebar' id='sidebar' preferred='yes'&gt;
E cole este código a seguir, logo abaixo de &lt;div id='sidebar-wrapper'&gt;

&lt;div class='widgets' id='tab-sidebar'&gt;
&lt;ul class='tabnav'&gt;

&lt;!--  ALTERE AQUI OS TÍTULOS DO SEU MENU EM ABAS  --&gt;
&lt;li class='tab1'&gt;&lt;a href='#tab1'&gt;Perfil&lt;/a&gt;&lt;/li&gt;
&lt;li class='tab2'&gt;&lt;a href='#tab2'&gt;Arquivo&lt;/a&gt;&lt;/li&gt;
&lt;li class='tab3'&gt;&lt;a href='#tab3'&gt;Blogroll&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class='clear'/&gt;
&lt;div class='tabdiv' id='tab1'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-1 --&gt;
&lt;/div&gt;  &lt;!-- /end tab1 --&gt;

&lt;div class='tabdiv' id='tab2'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-2 --&gt;
&lt;/div&gt; &lt;!-- /end tab2 --&gt;

&lt;div class='tabdiv' id='tab3'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-3 --&gt;
&lt;/div&gt; &lt;!-- /end tab3 --&gt;

&lt;/div&gt; &lt;!-- /end tab-sidebar --&gt;

Altere os titulos de cada aba se preferir, os campos estão destacados no código para facilitar a identificação. 
Importante: para deixar seu menu em abas ao FINAL da sibebar, você deve colar o código após 

&lt;/b:section&gt;  e  antes de &lt;/div&gt;

Procure novamente por:

&lt;div id='sidebar-wrapper'&gt;
&lt;b:section class='sidebar' id='sidebar' preferred='yes'&gt;
&lt;!-- RESTANTE DOS CODIGOS DE SEUS WIDGETS --&gt;
&lt;/b:section&gt;
&lt;/div&gt;

E cole o código a seguir entre&nbsp;

&lt;/b:section&gt; e  &lt;/div&gt;:
&lt;div class='widgets' id='tab-sidebar'&gt;
&lt;ul class='tabnav'&gt;

&lt;!--  ALTERE AQUI OS TÍTULOS DO SEU MENU EM ABAS  --&gt;
&lt;li class='tab1'&gt;&lt;a href='#tab1'&gt;Perfil&lt;/a&gt;&lt;/li&gt;
&lt;li class='tab2'&gt;&lt;a href='#tab2'&gt;Arquivo&lt;/a&gt;&lt;/li&gt;
&lt;li class='tab3'&gt;&lt;a href='#tab3'&gt;Blogroll&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class='clear'/&gt;
&lt;div class='tabdiv' id='tab1'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-1' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-1 --&gt;
&lt;/div&gt;  &lt;!-- /end tab1 --&gt;

&lt;div class='tabdiv' id='tab2'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-2' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-2 --&gt;
&lt;/div&gt; &lt;!-- /end tab2 --&gt;

&lt;div class='tabdiv' id='tab3'&gt;
&lt;b:section class='sidebar-tab' id='sidebar-tabs-3' preferred='yes'&gt;

&lt;/b:section&gt; &lt;!-- /end sidebar-tabs-3 --&gt;
&lt;/div&gt; &lt;!-- /end tab3 --&gt;

&lt;/div&gt; &lt;!-- /end tab-sidebar --&gt;


Se você percebeu, para seu menu em abas aparecer no topo da sidebar, basta colar o código dele abaixo de
&nbsp;
&lt;div id='sidebar-wrapper'&gt;.E para deixar seu menu em abas ao final da sibebar, você deve colar o código após
 &nbsp;
&lt;/b:section&gt;  ,  antes de &lt;/div&gt;

Adicionar os Widgets ao menu em abas:
Vá a página "&nbsp;&nbsp;&nbsp; Elementos de Página".
Clique em cada título para adicionar um gadget referente a cada aba do seu menu:



"&nbsp; No  exemplo usado aqui, eu dei titulos para cada aba, conforme os widgtes  que quis acrescentar (Perfil, Arquivo e Blogroll), mas se você quiser  dar outros titulos, não se esqueça de editar os titulos de cada aba,  conforme explicado no tutorial."



fonte e créditos:http://www.mundoblogger.com.br/2009/10/menu-em-abas-deslizante-na-sidebar-com.html