Pixel (blog - blogger profissional)

Conversão Hotmart

Google ADS

Este site utiliza cookies

Quer aprender como fiz esse aviso? CLIQUE AQUI

Baixe nossos 3 ebooks

Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

3 E-book Grátis

3 E-book Grátis
3 E-book Grátis

Pesquisar

Artigos em Destaque

Grátis

Baixe 3 ebooks
Aprenda a criar anúncios Online nas principais ferramentas de Marketing da Internet ...

Menu Responsivo HTML pronto (html, css e JavaScript) - Responsive Navigation Bar



 Percebi nos últimos dias que vários dos meus alunos que estão aprendendo a criar templates Blogger do zero tem uma dificuldade em comum...

Como criar um Menu responsivo do zero?

E é exatamente isso que eu vou falar nesse artigo. Na verdade, vou te dar um código pronto e prático.

Fácil de usar e compatível com blogger (Como sempre).


Primeiro Passo:

Importar ícones prontos e adicionar o <style> dentro da tag <head>:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

    <style>

body {

  margin: 0;

    padding: 0;

  font-family: Arial, Helvetica, sans-serif;

}

.menuresponsivo {

    overflow: hidden;

    background-color: #333;

    width: 100%;

    position: sticky;

    top: 0;

    left: 0;

    z-index: 999;

    max-width: none;

}

.menuresponsivo a {

  float: left;

  display: block;

  color: #fff;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

  font-size: 17px;

}

.menuresponsivo a:hover {

  background-color: #fff;

  color: black;

}

.menuresponsivo a.active {

  background-color: #2196f3;

  color: white;

}

.menuresponsivo .icon {

  display: none;

}

@media screen and (max-width: 600px) {

  .menuresponsivo a:not(:first-child) {display: none;}

  .menuresponsivo a.icon {

    float: right;

    display: block;

  }

  .menuresponsivo.responsive {position: relative;}

  .menuresponsivo.responsive .icon {

    position: absolute;

    right: 0;

    top: 0;

  }

  .menuresponsivo.responsive a {

    float: none;

    display: block;

    text-align: left;

  }

}

</style>


Segundo Passo:

Inserir uma lista  com seus links do menu.

<div class="menuresponsivo" id="mymenuresponsivo">

  <a href="#home" class="active">Início</a>

  <a href="#news">Notícias</a>

  <a href="#contact">Contato</a>

  <a href="#about">Sobre</a>

  <a href="javascript:void(0);" class="icon" onclick="myFunction()">

    <i class="fa fa-bars"></i>

  </a>

</div>


Terceiro e último:

Adicionar um <script> para fazer funcionar a versão Mobile.

<script>

function myFunction() {

  var x = document.getElementById("mymenuresponsivo");

  if (x.className === "menuresponsivo") {

    x.className += " responsive";

  } else {

    x.className = "menuresponsivo";

  }

}

</script>



Esse menu ao ser salvo terá a seguinte aparência:

Aparência no Computador



Aparência no Celular:






Espero ter ajudado você ... Qualquer dúvida pode entrar em contato.

Conheça nosso trabalho e nossos produtos.

Até a próxima.

Nenhum comentário:

Postar um comentário

Deixe um comentário com seu Feedback sobre este Conteúdo.