- Bunny Crazy: Menu com abas multinível e caixa de pesquisa expansível

Ohayoooo meus queridos bunnie's! Como vão todos? Hoje venho trazer um lindo menu no topo, que possui uma caixa de pesquisa expansível. Sim a pesquisa e embutida e detalhe desliza ao passar o mouse, muito fofo. Encontrei esse tutorial lá no site Eliane Gaspareto, então não esqueçam de creditar. <3

[Clique para ver melhor]

1) Vá até o HTML do seu blog, clique dentro da área do código e ative a pesquisa selecionando Ctrl+F, agora pesquise por ]]></b:skin>, assim que achar acima dele cole o código abaixo:

/*Menu personalizado by Elaine Gaspareto----------------------------------------------- */
#menuBuscador {
position: relative;
width: 105%; /* LARGURA DO MENU */
margin-left: -35px;
height: 45px; /* ALTURA DO MENU */
padding-left: 14px;
background: #F944A5; /* COR DE FUNDO DO MENU*/
}
.menusearch {
padding:0;
margin:0;
list-style:none;
position:relative;
z-index:5;
font-family: Arial,sans-serif; /* TIPO DE FONTE */
}
.menusearch li:hover li a {
background:none;
}
.menusearch li.top {display:block; float:left;}
.menusearch li a.top_link {
display:block;
float:left;
height:45px; /* ALTURA DO MENU, MANTENHA COMO ACIMA */
line-height:45px;
color:#fff; /* COR DOS TÍTULOS */
text-decoration:none;
font-size:15px; /* TAMANHO DA FONTE */
padding:0 0 0px 12px;
cursor:pointer;
}
.menusearch li a.top_link span {
float:left;
display:block;
padding:0 24px 0 12px;
height:45px;
}
.menusearch li a.top_link span.down {
float:left;
display:block;
padding:0 24px 0 12px;
height:45px;
}
.menusearch li a.top_link:hover, .menusearch li:hover > a.top_link {color:#fff; /* COR DO LINK */}
.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:45px;
background:#63327C; /* COR DE FUNDO DO SUBMENU */
padding:3px;
white-space:nowrap;
width:200px; /* LARGURA DO SUBMENU */
height:auto;
z-index:3;
}
.menusearch li:hover ul.sub li {
display:block;
height:30px;
position:relative;
float:left;
width:200px; /* LARGURA DO SUBMENU */
font-weight:normal;
}
.menusearch li:hover ul.sub li a{
display:block;
height:30px;
width:200px; /* LARGURA DO SUBMENU */
line-height:30px;
text-indent:5px;
color:#fff; /* COR DA FONTE DO SUBMENU */
font-size:14px; /* TAMANHO DA FONTE DO SUBMENU */
text-decoration:none;
}
.menusearch li ul.sub li a.fly {
background:#63327C 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:#F944A5; /* COR DE FUNDO HOVER*/
color:#fff; /* COR DE FONTE HOVER*/
}
.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:#F944A5 url(https://lh4.googleusercontent.com/_dsEG33PDaHw/TZ0rcSPpqlI/AAAAAAAABSc/RseHiYluzAM/arrow_over.gif) 185px 10px no-repeat;
color:#fff;/* COR DE FONTE HOVER*/}
.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: #63327C; /* COR DE FUNDO DO SUBMENU */
padding:3px;
white-space:nowrap;
width:200px; /* LARGURA DO SUBMENU */
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; /* DISTÂNCIA DA CAIXA DE PESQUISA À DIREITA */
outline:none;
font-size: 13px; /* TAMANHO DA FONTE DA CAIXA DE PESQUISA */
color: #ccc; /* COR DA FONTE DA CAIXA DE PESQUISA */
width: 0;
margin: 0;
padding: 12px 0 15px 35px;
z-index: 1000;
border: 1px solid #fff; /* COR DA BORDA DA CAIXA DE PESQUISA */
-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%} /* LARGURA DA CAIXA DE PESQUISA QUANDO EXPANDIDA */

2) Vá em Layout e abra um novo Gadget Java/Script e dentro cole:

<div id='menuBuscador'>
<ul class='menusearch'>
<li class='top'><a class='top_link' href='URL '><span>Aba 1</span></a></li>
<li class='top'><a class='top_link' href='#'><span class='down'>Aba 2</span></a><ul class='sub'><li><a class='fly' href='#'>Aba 2.1</a><ul>
<li><a href='LINK AQUI'>Aba 2.1.1</a></li>
<li><a href='LINK AQUI'>Aba 2.1.2</a></li>
<li><a href='LINK AQUI'>Aba 2.1.3</a></li>
</ul>
</li>
<li class='mid'><a class='fly' href='#'>Aba 2.2</a>
<ul>
<li><a href='LINK AQUI'>Aba 2.2.1</a></li>
<li><a href='LINK AQUI'>Aba 2.2.2</a></li>
<li><a href='LINK AQUI'>Aba 2.2.3</a></li>
<li><a class='fly' href='#'>Aba 2.2.4</a>
<ul>
<li><a href='LINK AQUI'>Aba 2.2.4.1</a></li>
<li><a href='LINK AQUI'>Aba 2.2.4.2</a></li>
<li><a href='LINK AQUI'>Aba 2.2.4.3</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba 2.2.5</a></li>
<li><a class='fly' href='#'>Aba 2.2.6</a>
<ul>
<li><a href='LINK AQUI'>Aba 2.2.6.1</a></li>
<li><a href='LINK AQUI'>Aba 2.2.6.2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba 2.3</a></li>
<li><a href='LINK AQUI'>Aba 2.4</a></li>
<li><a href='LINK AQUI'>Aba 2.5</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Aba 3</span></a>
<ul class='sub'>
<li><a href='LINK AQUI'>Aba 3.1</a></li>
<li><a href='LINK AQUI'>Aba 3.2</a></li>
<li><a href='LINK AQUI'>Aba 3.3</a></li>
<li><a href='LINK AQUI'>Aba 3.4</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Aba 4</span></a>
<ul class='sub'>
<li><a href='LINK AQUI'>Aba 4.1</a></li>
<li><a class='fly' href='#'>Aba 4.2</a>
<ul>
<li><a href='LINK AQUI'>Aba 4.2.1</a></li>
<li><a href='LINK AQUI'>Aba 4.2.2</a></li>
<li><a href='LINK AQUI'>Aba 4.2.3</a></li>
<li><a href='LINK AQUI'>Aba 4.2.4</a></li>
<li><a href='LINK AQUI'>Aba 4.2.5</a></li>
<li><a href='LINK AQUI'>Aba 4.2.6</a></li>
</ul>
</li>
<li><a href='LINK AQUI'>Aba 4.3</a></li>
<li><a href='LINK AQUI'>Aba 4.4</a></li>
<li><a href='LINK AQUI'>Aba4.5</a></li>
<li><a href='LINK AQUI'>Aba 4.6</a></li>
</ul>
</li>
<li class='top'><a class='top_link' href='#'><span class='down'>Aba 5</span></a>
<ul class='sub'>
<li><a href='LINK AQUI'>Aba 5.1</a></li>
<li><a href='LINK AQUI'>Aba 5.2</a></li>
<li><a href='LINK AQUI'>Aba 5.3</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 == "") this.value = "Digite aqui sua pesquisa e tecle Enter...";' onfocus='if (this.value == "Digite aqui sua pesquisa e tecle Enter...") this.value = "";' size='28' type='text' value='Digite aqui sua pesquisa e tecle Enter...'/></form>
</div>

É isso! Espero que gostem~

2 comentários:

Mackenzie7/1/18
Heeey Wendy! Tudo bom?

Amei o menu e a ideia da barra de pesquisa embutida, confesso que me surpreendeu!

Amei o seu layout também, sou apaixonada no espaço! Acompanho seu blog faz um tempão e nunca comentei, acredita? Sorry por isso, mas amo muito seu blog e todos os tutoriais já me ajudaram milhares de vezes.

Beijo
.¸ ¸.*☆ apple pie *☆*.¸¸.
ResponderExcluir
Respostas

Adicionar comentário

22/12/2017

Menu com abas multinível e caixa de pesquisa expansível

2 comentários: