Menu horizontal com sub-guias/sub-abas exibidas em duas colunas
Este menu pertence ao modelo Johny Joss, é um menu horizontal em que suas sub-guias ou sub-abas são exibidos em duas colunas e é feito com CSS, sem nada de scripts.
Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.
A "vantagem" por assim dizer, é que as sub-abas acomodam-se em duas colunas não muito longas, assim serão ordenadas e com menos espaço, longitudinalmente. Você pode ver um exemplo aqui:
Tutorial
Para colocar este menu entra no Editar HTML e antes de ]]></b:skin>, adicione o estilo CSS:
Agora vá em Layout, adicione um gadget HTML/Javascript e cole a seguinte estrutura do menu:
Se você quiser adicionar mais guias, adicione antes de </ul>, na cor azul, uma linha como esta:
A cor de fundo é feita com gradientes CSS, #317FB8 é a cor mais clara e #385D96 a cor mais escura.
Se quiser que as sub-guias sejam mostradas em colunas de 3, em seguida, altera o valor da /* Largura do container das sub-guias/sub-abas */ por 450px.
Cada guia/aba tem uma largura de 150px (ver anotação em verde), se você quiser torná-lo mais amplo precisará alterar também a largura do container das sub-guias, caso contrário será exibido em uma coluna, nada mais.
Sigam o Bloggermin no Twitter e no Google+, e curta nossa página no Facebook.
A "vantagem" por assim dizer, é que as sub-abas acomodam-se em duas colunas não muito longas, assim serão ordenadas e com menos espaço, longitudinalmente. Você pode ver um exemplo aqui:
Para colocar este menu entra no Editar HTML e antes de ]]></b:skin>, adicione o estilo CSS:
/* Menu horizontal com sub-guias em duas colunas
----------------------------------------------- */
#toppic {
width:940px; /* Largura do menu */
height:37px;
background-image: -moz-linear-gradient(top, #317FB8, #385D96);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #317FB8), color-stop(1.0, #385D96));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#317FB8,endColorStr=#385D96);
border-bottom:1px solid #002851;
border-top:1px solid #2f558b;
margin:0 auto;padding:0 auto;
overflow:hidden;
text-shadow:1px 1px 2px #002851;
}
#topwrapper {
width:940px; /* Largura do menu */
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#top {width:100%;}
#top, #top ul {padding: 0;margin: 0;list-style: none;}
#top a {
border-right:1px solid #2f558b;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee; /* Cor do texto das guias/abas */
}
#top a:hover {
background:#2f558b; /* Cor das guias/abas ao passar o mouse */
color:#c5fa6f; /* Cor do texto das guias/abas ao passar o mouse */
}
#top a.trigger {
/* Seta*/
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPl2t9gpD1li2-fO75OHstjEYGRLwVwAjBJxs8gpJSu7PU1JyiKVhiNsBhf0jJnp7Q_vvL2OjWgS_uU9lgYDsEiZ2T0j0egQoRAUeYbLdrfh2HfCvTztOU32Ogv6tq8uR2uDRW96U-CRc/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {float: left;position: relative;}
#top li {position: static !important; width: auto;}
#top li ul, #top ul li {width:300px;} /* Largura do container das sub-guias/sub-abas */
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#1a3352; /* Cor de fundo do container das sub-guias/sub-abas */
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px; /* Largura de cada sub-guia/sub-aba */
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {display: block;}
#top li:hover ul a, #top li.hvr ul a {
color:#ddd; /* Cor do texto dos submenus */
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#c5fa6f !important; /* Cor do texto dos submenus ao passar o mouse */
}
Agora vá em Layout, adicione um gadget HTML/Javascript e cole a seguinte estrutura do menu:
<div id='toppic'>Altere os URLs dos links e das guias/abas indicado na cor vermelha.
<div id='topwrapper'>
<ul id='top'>
<li><a href='URL do link'>Guia 1</a></li>
<li><a href='URL do link'>Guia 2</a></li>
<li><a class='trigger' href='#'>Guia 3</a>
<ul>
<li><a href='URL do link'>Guia 3.1</a></li>
<li><a href='URL do link'>Guia 3.2</a></li>
<li><a href='URL do link'>Guia 3.3</a></li>
<li><a href='URL do link'>Guia 3.4</a></li>
<li><a href='URL do link'>Guia 3.5</a></li>
<li><a href='URL do link'>Guia 3.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Guia 4</a>
<ul>
<li><a href='URL do link'>Guia 4.1</a></li>
<li><a href='URL do link'>Guia 4.2</a></li>
<li><a href='URL do link'>Guia 4.3</a></li>
<li><a href='URL do link'>Guia 4.4</a></li>
<li><a href='URL do link'>Guia 4.5</a></li>
<li><a href='URL do link'>Guia 4.6</a></li>
</ul>
</li>
<li><a class='trigger' href='#'>Guia 5</a>
<ul>
<li><a href='URL do link'>Guia 5.1</a></li>
<li><a href='URL do link'>Guia 5.2</a></li>
<li><a href='URL do link'>Guia 5.3</a></li>
<li><a href='URL do link'>Guia 5.4</a></li>
<li><a href='URL do link'>Guia 5.5</a></li>
<li><a href='URL do link'>Guia 5.6</a></li>
<li><a href='URL do link'>Guia 5.7</a></li>
<li><a href='URL do link'>Guia 5.8</a></li>
</ul>
</li>
<li><a href='URL do link'>Guia 6</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
Se você quiser adicionar mais guias, adicione antes de </ul>, na cor azul, uma linha como esta:
<li><a href='URL do Link'>Outra guia</a></li>E se quiser adicionar uma guia com sub-guias, então acrescente o seguinte:
<li><a class='trigger' href='#'>Outra Guia</a>No primeiro código, verá as anotações na cor verde, a área que pode ser personalizada.
<ul>
<li><a href='URL do link'>Guia 1.1</a></li>
<li><a href='URL do link'>Guia 1.2</a></li>
<li><a href='URL do link'>Guia 1.3</a></li>
<li><a href='URL do link'>Guia 1.4</a></li>
<li><a href='URL do link'>Guia 1.5</a></li>
<li><a href='URL do link'>Guia 1.6</a></li>
</ul>
</li>
A cor de fundo é feita com gradientes CSS, #317FB8 é a cor mais clara e #385D96 a cor mais escura.
Se quiser que as sub-guias sejam mostradas em colunas de 3, em seguida, altera o valor da /* Largura do container das sub-guias/sub-abas */ por 450px.
Cada guia/aba tem uma largura de 150px (ver anotação em verde), se você quiser torná-lo mais amplo precisará alterar também a largura do container das sub-guias, caso contrário será exibido em uma coluna, nada mais.