Menu horizontal com sub-abas e buscador integrado
Autor: Priscila | Publicado: 2013-03-26T11:05:00-03:00




O menu seguinte é feito apenas com&nbsp;CSS, ele&nbsp;é um&nbsp;menu horizontal com sub-abas,&nbsp;e do lado direito tem uma&nbsp;busca arredondada.

Esse menu é útil para aqueles que não necessitam de menus complexos ou preferem não usar um que requeira &nbsp;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:&nbsp;&nbsp;teste neste blog&nbsp;, basta você digitar a palavra de pesquisa e pressionar ENTER.



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





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





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





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







&lt;div id='menuWrapper'&gt;&nbsp;&lt;div class='menu'&gt;&nbsp;&lt;ul&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;1&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="#"&gt;&nbsp;Aba&nbsp;2&nbsp;&lt;/a&gt;&nbsp;&lt;ul&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;2.1&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;2.2&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;2.3&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;2.4&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;/ul&gt;&nbsp;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="#"&gt;&nbsp;Aba&nbsp;3&nbsp;&lt;/a&gt;&nbsp;

&lt;ul&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;3.1&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;3.2&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;3.3&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;3.4&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;/ul&gt;&nbsp;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="#"&gt;&nbsp;Aba&nbsp;4&nbsp;&lt;/a&gt;&nbsp;&lt;ul&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 4.1&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 4.2&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 4.3&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 4.4&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;/ul&gt;&nbsp;&lt;/li&gt;&nbsp;&lt;/ul&gt;&nbsp;&lt;form action='/search' id='search' method='get' name='searchForm' style='display:inline;'&gt;&nbsp;&lt;input id='search-box' name='q' onblur='if (this.value == &amp;quot;&amp;quot;) this.value = &amp;quot;Buscar...&amp;quot;;' onfocus='if (this.value == &amp;quot;Buscar...&amp;quot;) this.value = &amp;quot;&amp;quot;;' size='28' type='text' value='Buscar...'/&gt;&lt;/form&gt;&nbsp;&lt;/div&gt;&lt;/div&gt;






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 &nbsp;adicione antes do último&nbsp;&lt;/ul&gt;&nbsp;em cor azul uma linha como esta:&nbsp;



&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba&nbsp;5&nbsp;&lt;/a&gt;&lt;/li&gt;





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



&lt;li&gt;&lt;a href="#"&gt; Aba&nbsp;5&nbsp;&lt;/a&gt;&nbsp;&lt;ul&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 5.1&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 5.2&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 5.3&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;li&gt;&lt;a href="&nbsp;URL do link&nbsp;"&gt;&nbsp;Aba 5.4&nbsp;&lt;/a&gt;&lt;/li&gt;&nbsp;&lt;/ul&gt;&nbsp;&lt;/li&gt;