Estudando o menu para celular da w3school

[Frank K Hosaka]

Esse é o código do meu menu.php:

<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- código copiado de https://www.w3schools.com/howto/howto_js_mobile_navbar.asp
     antes de usar o php include é preciso definir a variável $menu              -->
<style> 
ul {margin: 0; padding: 0; list-style-type: none;}
li {margin: 0; padding: 0; list-style-type: none;}
th {border: 1px solid blue;}
td {white-space: nowrap;}
body {font-family: Arial, Helvetica, sans-serif;}
.mobile-container {max-width: 480px;  margin: auto;  background-color: #555; 
    height: 500px;  color: white;  border-radius: 10px;}
.topnav {overflow: hidden; background-color: #333; position: relative;}
.topnav #myLinks {display: none;}
.topnav a {color: white;  padding: 14px 16px; text-decoration: none;  
    font-size: 17px;  display: block;}
.topnav a.icon {background: black;  display: block; position: absolute; right: 0; top: 0;}
.topnav a:hover {background-color: #ddd;  color: black;}
.active {background-color: #04AA6D;  color: white;}
</style>
<link rel="stylesheet" href=
  "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="topnav">
  <a href="#home" class="active"><?php echo $menu; ?></a>
  <div id="myLinks">
    <a href="orcamento.php">Orçamento</a>
    <a href="diario.php">Diário</a>
    <a href="balancete.php">Balancete</a>
	<a href="pessoa.php">Pessoa</a>
	<a href="produto.php">Produto</a>
	<a href="pagar.php">Pagar</a>
	<a href="apuracao.php">Apuração</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
<script>
function myFunction() {  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {    x.style.display = "none";
  } else {    x.style.display = "block";  }}
</script>

Se você quiser testar esse código vai ser necessário tirar o código php que coloquei na <div> que foi "classificado" como topnav e colocar qualquer texto.

O programa é bem simples, ele esconde a <div> topnav, e quando você aperta o ícone do hamburger, ele mostra a <div> topnav, onde estão mascarados vários links com a ajuda do CSS. É bem fácil entender o que o programa faz, como ele faz que é o problema.

Eu tenho uma lista enorme de dúvidas:

1) como o elemento <link> define o formato do ícone do hamburger? Eu abri o arquivo font-awesome.min.css, mas não achei nada que indicasse o formato do ícone.

2) o  elemento <a href="#home"> só atualiza a tela, quando o usuário clicar no texto que está na <div> topnav que está sempre visível?

3) o que é o elemento  <a href="javascript:void(0);">?

4) o que é o elemento <i class="fa fa-bars"></i>?

Vou tentar achar as respostas no Google, o meu problema é que o meu inglês é péssimo.

[Frank K Hosaka]

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

Hoje eu aprendi que o marcador <i> é para deixar o texto em itálico. Eu só conhecia o <b> que deixa o texto em negrito.

No caso do código em estudo, o marcador <i> recebeu a definição de duas classes, o "fa" e o "fa-bars", e eles vão ser encontradas no arquivo indicado no marcador <link>, ou seja, no font-awesome.min.css. Ou seja, a Awesome deve ser a dona do ícone do hamburger.

Fontes: HTML i Tag (w3schools.com) e fa-bars: Font Awesome Icons

[Frank K Hosaka]

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

De acordo com What Does JavaScript:Void(0) Mean? (freecodecamp.org), o void(0) é o único recurso disponível para executar um código JavaScript sem atualizar a página do navegador.

Ele não faz muito sentido, mas eu tentei colocar o código <script> no topo da página, e o resultado foi inesperado, ele começa a página com o menu em evidência. Estudando a função, isso faz sentido. A função altera entre o menu exposto e indisposto. Já o void(0) faz mais sentido, o usuário pode abrir e fechar o menu a vontade, até ele decidir o que fazer da vida.

O curioso é que eu encontrei um código usando o evento ondblclick, não sei se isso existe, mas comigo não funciona. Eu inventei o seguinte código:

<input type="submit" onclick="alert('olá mundo')" ondblclick="alert('olá olá mundo mundo')" value="me clique">

e ele só executa o primeiro clique. O segundo clique, ele nunca executa ou sou devagar demais com o mouse.

Ainda sobre esse código, existe class="icon", eu não consegui achar nenhuma informação no Google e nem no arquivo CSS do Awesome.

 

[Frank K Hosaka]

<a href="#home" class="active">

De acordo com html - What is href="#" and why is it used? - Stack Overflow, o que eu consegui entender é que o href é sempre um hyperlink, geralmente para fora da página de onde você está. Para navegar dentro da página é que se usa # mais o nome do elemente para onde você deseja saltar. O problema do código é que não encontrei nenhum id="home" ou preciso melhorar as minhas buscas no Google.