terça-feira, 26 de março de 2013

Menu horizontal com sub-abas e buscador integrado




O menu seguinte é feito apenas com CSS, ele é um menu horizontal com sub-abas, e do lado direito tem uma busca arredondada.
Esse menu é útil para aqueles que não necessitam de menus complexos ou preferem não usar um que requeira  scripts e / ou imagens demais, e também a instalação e personalização é bastante simples, e ainda por cima é bastante funcional, e que ter o motor de busca integrado pode ter dois elementos na mesma área.
Você pode vê-lo aqui:  teste neste blog , basta você digitar a palavra de pesquisa e pressionar ENTER.

ATENÇÃO: Se você estiver usando um modelo feito através do Designer de modelo do Blogger primeiro precisa seguir os passos deste post .


Para colocar este menu horizontal com submenus em seu blog vá em Editar HTML no seu modelo, e antes de]]> </ b: skin> cole os estilos: 


/ * Menu horizontal pesquisa 
----------------------------------------------- * / 
MenuWrapper # { 
width: 100%; / * largura do menu * / 
height: 35px; 
padding-left-: 14px; 
background: # 333333; / * cor de fundo * / 
border-radius: 20px; / * bordas arredondadas * / 
} 
. {Menu 
largura: 100%; 
float: left; 
font-family: "Lucida Sans Unicode", "Trebuchet MS Unicode", "Lucida Grande", sans-serif; 
font-size: 13px; / * Tamanho da fonte * / 
font-weight: bold; 
} 
. Menu ul { 
float: left; 
height: 0px; 
list-style: none; 
margin: 0; 
padding: 0; 
border-radius: 20px 20px 0px 0px; / submenu * bordas arredondadas * / 
} 
. Menu li { 
float: left; 
padding: 0px; 
} 
. Menu li a { 
background: # 333333 inferior direito no-repeat; 
color: # cccccc; / cor da fonte * / 
display: block; 
font-weight: normal; 
line-height: 35px; 
margin: 0px; 
padding: 0px 25px; / * espaço entre cada guia * / 
text-align: center; 
text-decoration: none; 
} 
. Menu li a: hover, menu ul li:. Pairar a { 
background: # 2580a2; / * Cor. ao passar * / 
color: # FFFFFF; / Cor do texto * quando passando * / 
text-decoration: none; 
} 
. Menu li ul { 
background: # 333333; submenu Cor / * fundo * / 
display: none; 
height: auto; 
padding: 0px; 
margin: 0px; 
position: absolute; 
width: 200px; / * Largura submenu * / 
z-index: 100; 
border-top: 1px solid # fff; / * borda superior do submenu * / 
} 
. Menu li: hover ul { 
display: block; 
} 
. Menu li li { 
display: block; 
float: none; 
margin: 0px; 
padding: 0px; 
width: 200px; 
} 
. Menu li: hover li a { 
background: none; 
border-radius: 20px 0px 20px 0px; / Edge * sub-abas de * / 
} 
. Menu ul li a { 
display: block; 
height: 35px; 
font-size: 12px; 
font-style: normal; 
margin: 0px; 
padding: 10px 0px 0px 15px; 
text-align: left; 
} 
. Menu ul li a:. Hover, menu li ul li: hover {um 
background: # 2580a2; / * Cor das sub-abas ao passar * / 
color: # ffffff; 
text-decoration: none; 
} 

# Pesquisa { 
width: 228px / * largura do navegador * / 
height: 22px; 
float: right; 
text-align: center; 
margin-top: 6px; 
margin-right: 6px; 
/ * Pesquisa de imagem de fundo * / 
background: url (http://4.bp.blogspot.com/_qgZA1ny_dAs/Szuhn02zO6I/AAAAAAAADdI/u2etpRWlwF8/s1600/search-bar.png) no-repeat; 
} 
# Pesquisa caixa-{ 
margin-top: 3px; 
margem: 0px; 
background: transparent; 
text-align: center; 
}


Em seguida, vá para a seção de design, e adicione um elemento de página HTML / Javascript e cole:



<div id='menuWrapper'> 
<div class='menu'> 
<ul> 
<li><a href=" URL do link "> Aba 1 </a></li> 
<li><a href="#"> Aba 2 </a> 
<ul> 
<li><a href=" URL do link "> Aba 2.1 </a></li> 
<li><a href=" URL do link "> Aba 2.2 </a></li> 
<li><a href=" URL do link "> Aba 2.3 </a></li> 
<li><a href=" URL do link "> Aba 2.4 </a></li> 
</ul> 
</li> 
<li><a href="#"> Aba
 3 </a> 
<ul> 
<li><a href=" URL do link "> Aba 3.1 </a></li> 
<li><a href=" URL do link "> Aba 3.2 </a></li> 
<li><a href=" URL do link "> Aba 3.3 </a></li> 
<li><a href=" URL do link "> Aba 3.4 </a></li> 
</ul> 
</li> 

<li><a href="#"> Aba 4 </a> 
<ul> 
<li><a href=" URL do link "> Aba 4.1 </a></li> 
<li><a href=" URL do link "> Aba 4.2 </a></li> 
<li><a href=" URL do link "> Aba 4.3 </a></li> 
<li><a href=" URL do link "> Aba 4.4 </a></li> 
</ul> 
</li> 

</ul> 


<form action='/search' id='search' method='get' name='searchForm' style='display:inline;'> 
<input id='search-box' name='q' onblur='if (this.value == &quot;&quot;) this.value = &quot;Buscar...&quot;;' onfocus='if (this.value == &quot;Buscar...&quot;) this.value = &quot;&quot;;' size='28' type='text' value='Buscar...'/></form> 

</div></div>


Coloque as URLs dos links onde se indica asim como o nome de suas abas.
No primeiro código pode-se ver as áreas que podem ser personalizadas tais como a cor, etc.
A aparência redondada do menu tambem é CSS, assim quando se usa um navegador antigo não se verá essas bordas.

Se quiseres adicionar outra aba  adicione antes do último </ul> em cor azul uma linha como esta: 

<li><a href=" URL do link "> Aba 5 </a></li>


Se quiseres que esta tenha submenus então o código que deverás colocar é este: 

<li><a href="#"> Aba 5 </a> 
<ul> 
<li><a href=" URL do link "> Aba 5.1 </a></li> 
<li><a href=" URL do link "> Aba 5.2 </a></li> 
<li><a href=" URL do link "> Aba 5.3 </a></li> 
<li><a href=" URL do link "> Aba 5.4 </a></li> 
</ul> 
</li>





1 comentários:

André Gallvão disse...

Muito bom! Estava à procura de um tutorial que me ajudasse a personalizar o menu do meu blog, e de quebra ainda inserir o tão importante buscador (pois ainda não o inseri)... Parabéns! Volto aqui para contar o resultado!

Artigos Relacionados

Related Posts Plugin for WordPress, Blogger...