Pesquisar: Confeccao de bandeiras do Brasil personalizadas fonte e creditos:ciudadbloggerTraduzido: (adsbygoogle = window.adsbygoogle || []).push({});"Menu horizontal com pesquisa expansivel""O menu horizontal com motor de busca integrado parece ser um dos favoritos para muitos blogueiros. Esta e uma variante, e um menu horizontal com sub-abas e inclui um motor de busca que se expande quando voce passa o mouse sobre ele, cobrindo quase toda a largura do menu. Voce pode ve-lo trabalhando em teste neste blog .""Este menu so e feito com CSS assim nao ha necessidade de se preocupar com a compatibilidade com as bibliotecas de scripts ou navegadores como ele funciona bem com todos os navegadores em suas versoes mais recentes. ""Expansivel tambem tem o efeito com CSS, e e simples, apenas estabelecer que a largura da 0px localizador esta em seu estado normal, entao vamos aumentar a largura, passando o cursor sobre ele.As criancas brincam, certo? "ATENCAO: Se voce estiver usando o modelo do Blogger original que voce primeiro precisa seguir as etapas dessa tarefa , caso contrario, o menu nao pode olhar ou funcao corretamente.Para colocar este menu em seu blog,- entra no Editar HTML no seu modelo, e ,antes de ]]> </ b: skin> cole os estilos CSS:#menuBuscador {position: relative;width: 95%; /* Ancho del menu */height: 40px;padding-left: 14px;background: #CC2A41; /* 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; /* Color de los titulos */text-decoration:none;font-size:14px; /* Tamano 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 > a.top_link {color:#fff;}.menusearch li:hover {position:relative; z-index:2;}.menusearch ul, .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; /* Color de fondo del submenu */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 submenu */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; /* Color de fondo al pasar el cursor */color:#fff;}.menusearch li:hover ul.sub li a.fly:hover, .menusearch li:hover ul li:hover > 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; /* Color de fondo del submenu */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; /* Distancia del buscador desde la derecha */outline:none;font-size: 13px; /* Tamano 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%} /* Ancho del buscador cuando se expande */Em seguida, em "lay-out" cria um gadget HTML / Javascript e cole la o seguinte:<div id='menuBuscador'><ul class='menusearch'><li class='top'><a class='top_link' href='URL del enlace'><span>Pestana 1</span></a></li><li class='top'><a class='top_link' href='#'><span class='down'>Pestana 2</span></a><ul class='sub'><li><a class='fly' href='#'>Pestana 2.1</a><ul><li><a href='URL del enlace'>Pestana 2.1.1</a></li><li><a