Menu horizontal com sub-abas em duas colunas

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:
/* 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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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'>
<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>
Altere os URLs dos links e das guias/abas indicado na cor vermelha.

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>
<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>
No primeiro código, verá as anotações na cor verde, a área que pode ser personalizada.
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.
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Menu horizontal com sub-abas em duas colunas
Menu horizontal com sub-abas em duas colunas
Menu horizontal com sub-guias/sub-abas exibidas em duas colunas
Bloggermin
https://www.bloggermin.cashmore.com.br/2013/02/menu-horizontal-com-sub-guias-em-duas-colunas.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2013/02/menu-horizontal-com-sub-guias-em-duas-colunas.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar