domingo, 16 de outubro de 2016

Como fazer menu navegação cabeçalho blogger responsive

menu de navegação responsive header para Blogger


Hoje vamos compartilhar o Menu responsive que pode ser colocado em qualquer blogger, disponivel para qualquer dispositivo movel seja ele smartphone tablet ou outro dispositivo, isso pode ser modificado de acordo com o usuario bem como cores e fontes se deseja adicionar isso no Blogger siga os passos abaixo Crétidos w3cschools:


Adicionando o CSS no blogger template:

Faça login no template então va no menu modelo editar HTML/JavaScript 
com as teclas combinadas CTRL+F busque por ]]> </ b:skin>  então copie e cole 
o seguinte código antes disso:

ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

 CÓDIGO  HTML
Coloque esse código depois de  <body>

<ul class="topnav" id="myTopnav">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
  <li class="icon">
    <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
  </li>
</ul>



Java Script Código: 

 KODE JAVASCRIPT
Coloque o Código antes de </body>

<script>
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
</script>


Salve o Template






NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner