Menu topo fixo com sub menus e barra de pesquisa

outubro 11, 2016




Para quem não sabe faz alguns meses que iniciei a série dicas para blogueiras com o primeiro vídeo ensinando como personalizar a sidebar/gadget lateral do layout no blogger (clique aqui para conferir o post) e o feedback foi muito positivo, por isso após me organizar finalmente consegui gravar mais um tutorial que eu espero que vocês gostem.

Como falei no vídeo, todos os códigos listarei aqui no post.
Para começar vá em layout e adicione gadget HTML/JavaScript, nele você vai colar o seguinte código e salvar:

<div id='NavbarMenu'>
<center>
<div id='alinhamentohorizontal'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='SEU LINK AQUI'>Início</a></li>
<li>
<a href='SEU LINK AQUI'>Sobre</a>
</li>
<li><a href='SEU LINK AQUI'>Anuncie</a>
</li>

<li><a href='SEU LINK AQUI'>Categorias</a>
<ul>
<li><a href='SEU LINK AQUI'>Maquiagem</a></li>
<li><a href='SEU LINK AQUI'>Moda</a></li>
<li><a href='SEU LINK AQUI'>Look</a></li>
<li><a href='SEU LINK AQUI'>Dicas</a></li>
<li><a href='SEU LINK AQUI'>Produtos</a></li>
</ul>
</li>

<li>
<a href='SEU LINK AQUI'>Parcerias</a>
</li>
<li>
<a href='SEU LINK AQUI'>Contato</a>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/></div>

<div id="barra-busca">
<form id="form-busca" method=get action="SEU LINK AQUI/search"><input id="sprocura" type=text name=q maxlength=255 value="" />
<input name=btng type=submit id="bt-busca" value="" />
<input type="hidden" name="domains" value="SEU LINK AQUI" /><input type="hidden" name="sitesearch" value="SEU LINK AQUI" />
</form></div>
        </center></div>


- Onde está escrito SEU LINK AQUI, você coloca o link do seu blog, da página criada ou do marcador, da forma que expliquei no vídeo.
- Onde está escrito Início, Sobre, Anuncie, Categorias, Maquiagem, Moda e os outros você pode substituir e colocar o que quiser.
- Para apagar algum link sempre lembre de apagar onde começa com: <li> até onde terminar com: </li>.
- Para adicionar mais sub menus ou coloca-los em outros links é necessário começar com: <ul>
<li><a e finalizar com </a></li> e ir adicionando mais.
- Caso queira adicionar apenas 1 sub menu, comece com: 
<ul>
<li><a e finalize com </a></li></ul></li>. | Existem dois </li>, pois um é referente ao menu que você escolheu, por exemplo Categorias e o outro referente ao link que você adicionou para criar o sub menu.

Depois de adicionar e salvar, ele ainda não vai estar configurado, irá aparecer mais ou menos assim:


Por isso vá em Modelo, depois editar HTML, clique e digite Ctrl+f, irá abrir uma barrinha de pesquisa e procure pelo código: ]]><. Acima dele você irá colar:

/* NavbarMenu
--------------------------- */
#alinhamentohorizontal {
width: 1050px;
}

#NavbarMenu {
background: #000; | Fundo do menu, altere para a cor que quiser.
width: 100%;  | Tamanho da largura do menu.
    position: fixed; | Fixo no topo.
height: 40px; | Altura o menu.
z-index: 99; | Não retire.
top: 0; | Muda a posição do menu.
left: 0; |  Muda a posição do menu.
}

#NavbarMenuleft {
width: 100%;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
}

#nav ul {
float: left;list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
    margin-right: -10px;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF; |edite cor do link.
display: block;
font-size: 16px; |Tamanho da fonte do link.
font-family: Tahoma; |Letra da fonte.
font-weight: normal;
text-transform: uppercase; | Letra em maiúsculo.
margin: 0;
padding: 9px 19px 8px; | Altura e espaçamento das letras e caixa de pesquisa.
}

#nav li a:hover, #nav li a:active {
background: #000;
color: #253cc7;  |edite cor do link hover.
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
    margin-right: 0px
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #000; |cor de fundo.
width: 100px;
color: #FFF; |cor do link.
font-size: 14px;
font-family: Tahoma;
font-weight: normal;
text-transform: uppercase;
float: none;
margin: 0;
padding: 7px 10px;

}

#nav li li a:hover, #nav li li a:active {
background: #000; |cor de fundo hover.
color: #253cc7; |cor do link.
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}


/* CSS PESQUISA
-----------------------------*/
#barra-busca {
float:right;
}

#form-busca {
background: none;
}

#form-busca #sprocura{
height: 18px; | Altura da barra.
width: 170px; | Largura da barra.
margin-top: -28px; | Posicionamento no top.
margin-left: 8px; | Posicionamento na esquerda.
color: #000; | Cor da letra digitada.
border: 0px solid #000; |
float: left; | Posicionamento da barra.
padding: 3px; | Tamanho total da barra.
background-color: #FFF; | Cor da barra.
}

#bt-busca {
height: 23px;
width: 33px;
background: transparent url("LINK DA LUPA DE PESQUISA") no-repeat scroll 0% 0%;
border: medium none;
margin-top: -28px; | Posicionamento no top.
float: right;
cursor: pointer;
margin-right: 45px;
margin-left: 5px; | Espaço entre a lupa e a barra de pesquisa.
}

- Nos códigos que não tem explicação do que são ou fazem, não é necessário alteração.
- Salve e verifique como ficou.
Deverá ficar mais ou menos assim:


- Como expliquei no vídeo, se ficar listras entre as letras, é só apagar o seguinte código:

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);

Para localizá-lo é só procurar por: border-$startSide apagar as duas linhas e salvar.

Para quem quiser utilizar a mesma lupa de pesquisa do vídeo:


Feito isso é só adicionar os links de acordo com o seu gosto e salvar.
Só para lembrar, eu uso o modelo simples do blogger para realizar essas alterações, se o seu modelo for outro pode ser que fique diferente ou que não funcione.
Vídeo explicando (peço desculpas pelo áudio oscilar as vezes):


Espero que tenha gostado do tutorial, se tem alguma sugestão de post ou dúvida fique a vontade para perguntar.
Até mais!

Poderá gostar também

0 comentários