"Menu horizontal com pesquisa expansível" - usando css - com buscador
Autor: edilene bds | Publicado: 2014-07-30T12:27:00-07:00

fonte e créditos:

ciudadblogger


Traduzido: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;











 

<!-- mensagens e recados do brasil -->


(adsbygoogle = window.adsbygoogle || []).push({});


"Menu horizontal com pesquisa expansível"







"O&nbsp;menu horizontal com motor de busca integrado&nbsp;parece ser um dos favoritos para muitos blogueiros.&nbsp;Esta é uma variante, é um&nbsp;menu horizontal com sub-abas e inclui um motor de busca que se expande quando você passa o mouse&nbsp;sobre ele, cobrindo quase toda a largura do menu.&nbsp;Você pode vê-lo trabalhando em&nbsp;teste neste blog&nbsp;."




"Este menu só é feito com CSS&nbsp;

assim não há necessidade de se preocupar com&nbsp;

a compatibilidade com as bibliotecas&nbsp;

de scripts ou navegadores&nbsp;

como ele funciona bem com todos os navegadores&nbsp;

em suas versões mais recentes. "


"Expansível também tem o efeito com CSS, e é simples, apenas estabelecer que a largura da 0px localizador está em seu estado normal, então vamos aumentar a largura, passando o cursor sobre ele.As crianças brincam, certo? "




ATENÇÃO:&nbsp;Se você estiver usando o modelo do Blogger original que você primeiro precisa seguir as etapas&nbsp;dessa tarefa&nbsp;, caso contrário, o menu não pode olhar ou função corretamente.


Para colocar este menu em seu blog,

- entra no&nbsp;Editar HTML&nbsp;no seu modelo,&nbsp;

e ,

antes de&nbsp;]]&gt; &lt;/ b: skin&gt;&nbsp;

cole os estilos CSS:





#menuBuscador {position: relative;width: 95%;&nbsp;/* Ancho del menú */height: 40px;padding-left: 14px;background: #CC2A41;&nbsp;/* Color de fondo */}.menusearch {padding:0;margin:0;list-style:none;position:relative;z-index:5;font-family:"Lucida Sans Unicode", "Trebuchet Unicode MS", "Lucida Grande",sans-serif;}.menusearch li:hover li a {background:none;}.menusearch li.top {display:block; float:left;}.menusearch li a.top_link {display:block;float:left;height:40px;line-height:40px;color:#fff;&nbsp;/* Color de los títulos */text-decoration:none;font-size:14px;&nbsp;/* Tamaño de la fuente */padding:0 0 0 12px;cursor:pointer;}.menusearch li a.top_link span {float:left;display:block;padding:0 24px 0 12px;height:40px;}.menusearch li a.top_link span.down {float:left;display:block;padding:0 24px 0 12px;height:40px;}.menusearch li a.top_link:hover, .menusearch li:hover &gt; a.top_link {color:#fff;}.menusearch li:hover {position:relative; z-index:2;}.menusearch ul,&nbsp;.menusearch li:hover ul ul,.menusearch li:hover ul li:hover ul ul,.menusearch li:hover ul li:hover ul li:hover ul ul,.menusearch li:hover ul li:hover ul li:hover ul li:hover ul ul{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}.menusearch li:hover ul.sub {left:0;top:40px;background:#351330;&nbsp;/* Color de fondo del submenú */padding:3px;white-space:nowrap;width:200px;height:auto;z-index:3;}.menusearch li:hover ul.sub li {display:block;height:30px;position:relative;float:left;width:200px;font-weight:normal;}.menusearch li:hover ul.sub li a{display:block;height:30px;width:200px;line-height:30px;text-indent:5px;color:#fff;font-size:14px;text-decoration:none;}.menusearch li ul.sub li a.fly {/* Color de fondo del submenú */background:#351330 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;}.menusearch li:hover ul.sub li a:hover {background:#CC2A41;&nbsp;/* Color de fondo al pasar el cursor */color:#fff;}.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover &gt; a.fly {/* Color de fondo al pasar el cursor */background:#CC2A41 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat; color:#fff;}.menusearch li:hover ul li:hover ul,.menusearch li:hover ul li:hover ul li:hover ul,.menusearch li:hover ul li:hover ul li:hover ul li:hover ul,.menusearch li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul {left:200px;top:-4px;background: #351330;&nbsp;/* Color de fondo del submenú */padding:3px;white-space:nowrap;width:200px;z-index:4;height:auto;}#search input[type="text"] {background: #fff url(//lh4.googleusercontent.com/-1jhhmuhclMc/U8_hntfKzCI/AAAAAAAAFi8/hqlTRAByrVM/s32/buscar.png) no-repeat center left;position: absolute;right:3px;&nbsp;/* Distancia del buscador desde la derecha */outline:none;font-size: 13px;&nbsp;/* Tamaño de la fuente del buscador */color: #ccc;width: 0;margin: 0;padding: 12px 0 12px 35px;z-index: 1000;border: 1px solid #fff;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}#search input[type="text"]:hover {width:94%}&nbsp;/* Ancho del buscador cuando se expande */



Em seguida,&nbsp;
em "lay-out"&nbsp;
cria um gadget&nbsp;
HTML / Javascript&nbsp;
e&nbsp;
cole lá o seguinte:

&lt;div id='menuBuscador'&gt;&lt;ul class='menusearch'&gt;&lt;li class='top'&gt;&lt;a class='top_link' href='URL del enlace'&gt;&lt;span&gt;Pestaña 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;li class='top'&gt;&lt;a class='top_link' href='#'&gt;&lt;span class='down'&gt;Pestaña 2&lt;/span&gt;&lt;/a&gt;&lt;ul class='sub'&gt;&lt;li&gt;&lt;a class='fly' href='#'&gt;Pestaña 2.1&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.1.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.1.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.1.3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='mid'&gt;&lt;a class='fly' href='#'&gt;Pestaña 2.2&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class='fly' href='#'&gt;Pestaña 2.2.4&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.4.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.4.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.4.3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.5&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class='fly' href='#'&gt;Pestaña 2.2.6&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.6.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.2.6.2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 2.5&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='top'&gt;&lt;a class='top_link' href='#'&gt;&lt;span class='down'&gt;Pestaña 3&lt;/span&gt;&lt;/a&gt;&lt;ul class='sub'&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 3.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 3.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 3.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 3.4&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='top'&gt;&lt;a class='top_link' href='#'&gt;&lt;span class='down'&gt;Pestaña 4&lt;/span&gt;&lt;/a&gt;&lt;ul class='sub'&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class='fly' href='#'&gt;Pestaña 4.2&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.5&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.2.6&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.3&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.4&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.5&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 4.6&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='top'&gt;&lt;a class='top_link' href='#'&gt;&lt;span class='down'&gt;Pestaña 5&lt;/span&gt;&lt;/a&gt;&lt;ul class='sub'&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 5.1&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 5.2&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href='URL del enlace'&gt;Pestaña 5.3&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;/ul&gt;&lt;!-- Buscador --&gt;&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;&lt;/div&gt;



Você só precisa salvar as alterações.&nbsp;



O primeiro código são os estilos,&nbsp;



lá você vai ver em&nbsp;verde&nbsp;,&nbsp;



onde você mudar&nbsp;



as&nbsp;



cores,



fontes, etc.,&nbsp;



ou seja, a aparência do menu.&nbsp;





Em&nbsp;vermelho&nbsp;estão as URLs e nomes de seus guias e sub-guias.&nbsp;



antes&nbsp;



&nbsp;&lt;!-- Buscador --&gt;



eles podem adicionar mais guias.&nbsp;



Por exemplo: se você quiser adicionar outro guia simples,&nbsp;

adicione uma linha como esta:





&lt;li class="top"&gt;&lt;a href="URL del enlace" class="top_link"&gt;&lt;span&gt;Pestaña&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;








Se você gostaria de adicionar uma guia com sub-guias em seguida, adicione o seguinte código:

&lt;li class="top"&gt;&lt;a href="#" class="top_link"&gt;&lt;span class="down"&gt;Pestaña&lt;/span&gt;&lt;/a&gt;&lt;ul class="sub"&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;





E se você quiser um dos outros sub-guias têm sub-seções removido em seguida, uma linha como a de laranja e alterá-lo para um código como este:



&lt;li&gt;&lt;a href="#" class="fly"&gt;Sub pestaña&lt;/a&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Otra Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Otra Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="URL del enlace"&gt;Otra Sub pestaña&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;








"Isso é tudo, menos complicado do que parece.&nbsp;Definitivamente um menu a ser considerado, não só pela atratividade do motor de busca, mas pela capacidade de adicionar sub-guias sem o uso de qualquer script.Além disso, pode personalizá-lo, tanto quanto nós queremos."

fonte e créditos:
ciudadblogger