Tutorial: Menu fixo no topo do blog responsivo - Personalize seu blog

21 de março de 2017


Menu fixo no topo do blog responsivo



Oláá! tudo bem com vocês? eu espero que sim! resolvi voltar com tutoriais de HTML já não existem mais tantos blogs relacionados a isso, e tutoriais sempre fez parte do que o blog é. Hoje vou ensinar como colocar no blog um menu fixo no topo e reponsivo. Ele é uma mistura de alguns códigos que encontrei na internet e eu acabei "montando" com base outro menu que já tinha postado aqui.


Esse é o resultado do menu

É um menu simples, praticamente apenas CSS, mas mesmo assim para garantir faça um backup do seu layout antes, caso algo dê errado você não "destrói" seu blog. Aprenda aqui.


Vamos começar!

1 - Com o painel do blogger aberto >> Tema >>  Clique em editar HTML >> clique dentro do código e digita ctrl + f  irá abrir uma caixa de pesquisa nela pesquise por  }]]></b:skin> ou dependendo do seu layout por <style> e ACIMA dele cole o código modificando nas indicações

/* ------------------------------------
MENU FIXO NO TOPO REPONSIVO BELEZA NERD
--------------------------------------*/
body {
margin: 0px;
}
#menureponsivo{
background:#fff url()center repeat-x;  /*Cor de fundo do menu*/
border-bottom: 6px solid #502281; /*Borda do Menu*/
height: 40px/*Largura do Menu*/
z-index:999;
position:fixed;
width:100%;
top:0;
}
#menureponsivo ul,#menureponsivo li{margin:0 auto;padding:0 0;list-style:none}
#menureponsivo ul{height:45px;width:980px}
#menureponsivo li{float:left;display:inline;position:relative;
font-weight:200;
font-family: font-family: 'Raleway', sans-serif/*Fonte dos Links do Menu*/
font-size:16px;} /*Tamanho da Fonte*/

#menureponsivo a{display: block;
line-height: 40px;
padding: 0 74px;
text-decoration: none;
color:#000;} /*Cor dos Links do Menu*/
#menureponsivo li a:hover{
color:#000;/*Cor dos Links do Menu quando passa o mouse*/
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#menureponsivo input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer}
#menureponsivo label{font:normal 18px georgia;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menureponsivo label span{font-size:16px;position:absolute;left:35px}
#menureponsivo ul.menureponsivos{
height: auto;
overflow: hidden;
width: 170px;
background: #000;
position: absolute;
z-index: 99;
display: none;
}
#menureponsivo ul.menus li{
display: block;
width: 100%;
font:normal 0.8em georgia;
text-transform: none;
text-shadow: none;
border-bottom: 1px dashed #FFF;
}
#menu ul.menureponsivos a{
color: #FFF;
line-height: 35px;
}
#menureponsivo li:hover ul.menureponsivos{display:block}
#menureponsivo ul.menureponsivos a:hover{
background:#FFF;
color: #000;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
@media screen and (max-width: 800px){
#menureponsivo{position:relative; background:#FFF!important;}
#menureponsivo ul{background:#ccc;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
#menureponsivo ul.menureponsivos {width:100%;position:static;padding-left:20px}
#menureponsivo li{display:block;float:none;width:auto; font:normal 0.8em Arial;}
#menureponsivo input,#menureponsivo label{position:absolute;top:0;left:0;display:block}
#menureponsivo input{z-index:4}
#menureponsivo input:checked + label{color:white}
#menureponsivo input:checked ~ ul{display:block}
}

Salve

Todas as partes que você pode editar estão marcado com o fundo rosa e no próprio código tem a explicação.


2 - Ainda no painel pesquise por <body   ou <body> e ABAIXO dele cole o código

<nav id='menureponsivo'><ul><li><a href='LINK DO SEU BLOG><i aria-hidden='true' class='fa fa-home'/> HOME</a></li><li><a href='LINK>TITULO DA PAGINA</a></li><li><a href='LINK'> TITULO DA PAGINA</a><li><a href=LINK'>TITULO DA PAGINA</a></li></li></ul></nav>

3 - Se quiser adicionar mais links antes da quebra </ul> adicione quantos desse código desejar <li><a href='LINK>TITULO DA PAGINA</a></li>

Seu menu está pronto! eu falei que era fácil. Se quiser usar a mesma fonte que eu usei abra o HTML novamente procure por <head> e Acima cole esse código. Salve


<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>



Espero que tenham gostado do menu. Tem alguma sugestão de tutorial? comente. Até o próximo post 


6 comentários:

  1. Gostei flor , um pouco complicado porque não lembro mais, pronto kkkk

    ResponderExcluir
  2. Menina, não sei porque os posts do seu blog não estão caindo na minha lista de leitura. Pensei até que tu tinha parado com o teu blog. Bem, adorei as dica de Menu, ainda mais porque estou pensando em trocar o meu layout :3.
    Beijo,
    Mundo perdido da Carol
    Ajude a responder a Pesquisa de Público
    Fan Page
    Instagram

    ResponderExcluir
    Respostas
    1. Ah menina tinha tanto tempo que não via teu blog, e não tava achando em lugar nenhum kkk Obrigada sua linda!

      Excluir
  3. AAAAAA ♥ IREI USAR SIIMMM ♥ estou pensando em fazer um layout noveenho para meu bloguito e vou usar esse MENU SIM !!


    https://hellencassia.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Usa mexxxmo mana <3 ele é facinho de usar ♥

      Excluir
  4. Adorei o tutorial, super bacana e ajuda muito.

    Beijos
    https://pimentasdeacucar.blogspot.com.br/

    ResponderExcluir

Fã page | Twitter | Instagram

Críticas construtivas são sempre bem vindas.
Deixe o link do seu blog no final do comentário e retribuiremos a visita
Aceitamos TAG's, se não a respondermos, provavelmente nós já devemos ter respondido anteriormente por outra indicação.
Lembre-se, tudo aqui é feito para você, então fique a vontade para pesquisar,ler,comentar e pedir postagens.

© BELEZA NERD 2013 - 2018. Todos os direitos reservados.
Layout e codificação: GLEICY HANER - DESIGNS E FOTOGRAFIA .
Tecnologia do Blogger.
imagem-logo