menu.php para celular

[Frank K Hosaka]

A tela do meu celular é bem pequena, eu precisaria de duas linhas para colocar todas as opções do meu sistema (eu ainda não sei como fazer aquele painel com três traços que desliza para o usuário escolher a opção), assim eu montei a seguinte gambiarra:

 

menu.php

<meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
ul {margin: 0; padding: 0; list-style-type: none;}
th {border: 1px solid blue;}
</style>
<?php
$orçamento="<li onclick=window.location.replace('orcamento.php')>Orç</li>";
$diario="<li onclick=window.location.replace('diario.php')>Diário</li>";
$balancete="<li onclick=window.location.replace('balancete.php')>Bal</li>";
$pagar="<li onclick=window.location.replace('pagar.php')>Pagar</li>";
$produto ="<li onclick=window.location.replace('produto.php')>Prod</li>";
$fornecedor="<li onclick=window.location.replace('fornecedores.php')>Forn</li>";
$cliente="<li onclick=window.location.replace('cliente.php')>Cliente</li>";
echo "<ul><table><tr><th>$orçamento<th>$diario<th>$balancete<th>$pagar<th>$produto<th>$fornecedor<th>$cliente</table></ul>";
?>

 

[amwdeveloper]

o certo seria fazer um menu mobile, usando css e javascript.

de uma olhada nesse aqui: https://codepen.io/syrizaldev/pen/JjNmbNN

[lowys]

Não entendi.
O que são 6 linhas?
6 linhas de q?
Qual é a altura máxima de uma linha?
Há um número máximo de linhas?
Por quê há essa preocupação com a quantidade de linhas?
Esse sistema deve aparecer em uma tela LCD de poucos pontos?

Editado Maio 4, 2022 por lowys

[wash]

beleza @Frank K Hosaka?
Tomei a liberdade de escrever uma versão de menu usando apenas html e css pro sr. visualizar.



Só lembrando que eu adoro javascript.
Mas como o sr. diz sempre que está começando, acredito que somente html e css é uma linguagem a menos pra entender.

O exemplo pode ser testado aqui:
https://w-studies.github.io/html-css-only-hamburger-menu/

E pode ser baixado aqui:
https://github.com/w-studies/html-css-only-hamburger-menu

Basta clicar ali em Code -> Download ZIP

Editado Maio 5, 2022 por wash

[wash]

Olá!
Claro!

2 horas atrás, Frank K Hosaka disse:

<a href='#apuracao.php'>Apuração</a>

para ir diretamente a um outro arquivo, remova as #
deixando apenas o endereço do arquivo  no href: <a href='apuracao.php'>Apuração</a>
lembrando que apuracao.php deve estar no mesmo nível de pastas que o arquivo atual.
do contrário, é só colocar o endereço relativo: <a href='pasta-qualquer/apuracao.php'>Apuração</a>
   
   

[Frank K Hosaka]

8 horas atrás, amwdeveloper disse:

o certo seria fazer um menu mobile, usando css e javascript.

de uma olhada nesse aqui: https://codepen.io/syrizaldev/pen/JjNmbNN

Esse menu é enorme, ele ocupa seis linhas, o meu é feio, mas ocupa apenas uma linha, e ele fica persistente em quase todas as rotinas do sistema, usei o comando include do PHP, oha só como ficou:

 

[Frank K Hosaka]

Você tem toda razão, esse negócio de linha não faz o menor sentido. Eu executei o programa e fiquei preocupado com a disposição das informações na vertical, nada me impede de colocar tudo na horizontal. A dica de usar o CSS gerou essa tela, e ela é bem mais bonita que a minha.

 

[Frank K Hosaka]

Valeu! Isso sim que é menu de gente civilizada, e não aquele trambolho que eu fiz!

[Frank K Hosaka]

Olá, Wash, estou estudando o seu código, e alterei o código HTML

    <nav>
      <a href='#' class='hamburger-close'></a> <a href='orcamento.php'>Orçamento</a> <a href='#diario.php'>Diário</a>
      <a href='#balancete.php'>Balancete</a> <a href='#pagar.php'>Pagar</a> <a href='#produto.php'>Produto</a> <a href='#pessoa.php'>Pessoa</a>
      <a href='#apuracao.php'>Apuração</a>
    </nav>

eu seleciono o menu desejado, mas ele não vai para onde eu esperava. Você pode me ajudar?

[Frank K Hosaka]

Eu fiz exatamente isso, mas ele não funciona.

Mexi no CSS

.app > header > nav {  display: flex;  flex-direction: column;  position: absolute; 
    top: 55px;  width: 160px;  transition: all .2s ease;  transform: translateX(-170px);} 

onde está flex-direction: column eu mudei para row, e aí o link funcionou, mas não tenho todas as opções e também é difícil de visualizar.

[wash]

30 minutos atrás, Frank K Hosaka disse:

Eu fiz exatamente isso, mas ele não funciona.

verifique se esse funciona

[Frank K Hosaka]

Se você está falando da versão que retirou os hashes, ele também tem o mesmo problema.