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 (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwdnRY13eLgm8dUTHpOv5diu9crGAPPOO-1soIzHUzl19nQuuMl24ZW5VK10G2HGmdn6wfPpoMmYuEyAhI_80FejEfP6ppKcAbsgIyCej6EMxE7jWc4P7N1QxOFJphRklnt2VTrnE47s/s1600/search-bar.png) no-repeat;
}
# Pesquisa caixa-{
margin-top: 3px;
margem: 0px;
background: transparent;
text-align: center;
}
----------------------------------------------- * /
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 (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFwdnRY13eLgm8dUTHpOv5diu9crGAPPOO-1soIzHUzl19nQuuMl24ZW5VK10G2HGmdn6wfPpoMmYuEyAhI_80FejEfP6ppKcAbsgIyCej6EMxE7jWc4P7N1QxOFJphRklnt2VTrnE47s/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>
<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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' size='28' type='text' value='Buscar...'/></form>
</div></div>
<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 == "") this.value = "Buscar...";' onfocus='if (this.value == "Buscar...") this.value = "";' 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>
<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>