Ir para conteúdo
Fórum Script Brasil
  • 0

menu.php para celular


Frank K Hosaka

Pergunta

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>";
?>

 

Link para o comentário
Compartilhar em outros sites

11 respostass a esta questão

Posts Recomendados

  • 1

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 por lowys
Link para o comentário
Compartilhar em outros sites

  • 1

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

image.thumb.png.df846faa3d83488b310d9694264ada81.pngimage.thumb.png.535640ebfa8d8f4a0dcf93c7649e38ca.png

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

image.png.f9bf1faa1642be4127bf58acea215e68.png

Editado por wash
Link para o comentário
Compartilhar em outros sites

  • 1

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>
   
   

Link para o comentário
Compartilhar em outros sites

  • 0
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:

 

Screenshot_20220503-195418_Samsung Internet.jpg

Link para o comentário
Compartilhar em outros sites

  • 0

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?

Link para o comentário
Compartilhar em outros sites

  • 0

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.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...