Jump to content
rafalbino

Versão Mobile Menu

Recommended Posts

Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.

A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.

 

Segue o código:


.menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }

.menu ul{list-style: none;position: relative;float: right;}
.menu ul li {width: 200px;float: left;}
#menu2 {width: 130px;float: left;}
#menu3 {width: 160px;float: left;}
.menu ul li:last-child {width: 200px;float: left;}
.menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
.menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
.menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
.menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
.menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
#primeiro{ border-radius: 7px 7px 0px 0px;}
#ultimo{ border-radius: 0px 0px 7px 7px;}

.menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
.menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
.menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
.menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
.borda {border-radius: 0;}

label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
#bt_menu{display: none;}
label[for="bt_menu"]{display: none;}

 

Agora o código da versão mobile

 

label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
    #bt_menu:checked ~ .menu{margin-left: 0;}
    .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
    .menu ul{float: none;}
    .menu ul li{width: 100%;float: none;}
    .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
    .menu ul ul{ /*Escondendo os subitens no modo mobile*/
        position: static;overflow: hidden;max-height: 0;transition: all .9s;}
    .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
        height: auto;max-height: 900px;}
    .menu ul ul li{width: 100%}
    .menu ul ul li:last-child {width: 100%;}

 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Baby01
      Prezados, bom dia.
       
      Gostaria de uma ajudar, sobre um script que estou criando. 
       
      Não estou conseguindo fazer a comparação entre data e horário, tipo assim : eu quero que quando o usuário faça um agendamento ex: data 15/07/2019 horário: 10h00 ás 12h00, não pode ter outro agendamento nessa data 15/07/2019 e nem entre esse horário 10h00 às 12h00.  Mais pode ter outro agendamento nessa data 15/07/2019, mais não no mesmo horário.
      Abaixo está meu script : 
       
       
       
      <!DOCTYPE html>
      <html>
      <head>
          <title>GESTÃO DE CASOS</title>
          <meta lang="pt-br" charset="utf-8">
          <link rel="icon" type="imagem/png" href="../gestao/img/logo.png" />
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <script type="text/javascript" src="../bootstrap/sweetalert/dist/sweetalert.js"></script>
      </head>
      <body>
      <?php
      if(!isset($_SESSION)) 
          { 
              session_start(); 
          } 
              date_default_timezone_set('America/Sao_Paulo');
              header('Content-type: text/html; charset=utf-8');
              
              if (isset($_POST["submit"])) {
              $hr_agendamento = ('H:i:s');
              $now = date('Y-m-d H:i:s');
              $planoID = $_POST["planoID"];        
              $pacienteID = $_POST["pacienteID"];
              $unidadeID = $_POST["unidadeID"];
              $dt_programada = $_POST["dt_programada"];
              $hr_inicial = $_POST["hr_inicial"];
              $hr_final = $_POST["hr_final"];
              $atendimentoID = $_POST["atendimentoID"];
              }
              
              $unidade = $_SESSION['unidade_referencia'];
              
              include ("../administracao/conn.php");
              
              $agenda = "SELECT a.hr_inicial, a.hr_final, DATE_FORMAT(  `dt_programada` ,  '%d/%m/%Y' ) AS  `data_formatada` , b.unidadeID, b.unidade_referencia
                          FROM tb_agenda a
                          INNER JOIN tb_unidade b ON a.unidadeID = b.unidadeID
                          WHERE b.unidade_referencia =  $unidade";
                  
                 /* nessa parte que não estou conseguindo fazer a comparação , consigo pegar a variável que o usuário digita, porém não estou conseguindo trazer do banco de dados*/        
              IF ( (["dt_programada"] == $_POST["dt_programada"]) && (["hr_inicial"] == $_POST["hr_inicial"]) && (["hr_final"] == $_POST["hr_final"])) {
                  echo "<script>    swal('ATENÇÃO','DATA E HORÁRIO JÁ CADASTRADO', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";    
                  
              }
                  ELSE
                  {
                  
              $sql = "INSERT INTO tb_agenda (planoID, pacienteID, unidadeID, dt_programada, hr_inicial, hr_final, atendimentoID) values ('$planoID','$pacienteID', '$unidadeID', '$dt_programada', '$hr_inicial', '$hr_final', '$atendimentoID')";
              
              if (mysqli_query($connect, $sql)) 
              {
                  echo "<script>swal('BOM TRABALHO!', 'AGENDA CADASTRADA COM SUCESSO!', 'success').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>";
                  $x = 'Agenda criada com sucesso';
                  include "../administracao/agenda_log.php";
              } 
              else 
              {
                  echo "<script>swal('INFELIZMENTE', 'NÃO FOI POSSÍVEL CADASTRAR A AGENDA', 'warning').then(function() {window.location = '../plano/escolha_paciente_plano.php';});</script>" . $sql . "<br>" . mysqli_error($connect);
                  $x = 'Não foi possível criar a agenda';
                  include "../administracao/agenda_log.php";
                  
                  }
              }
              
      ?>
      </body>
      </html>
    • By Ewfc2005
      Queria saber como faço para fazer um texto aparecer ao rolar a pagina
      igual ao desse site: https://ciesalon.com/services
    • By Aureo Almeida
      Problema em definir largura e disposição horizontal de tabelas com resultado de while
      Como iniciante em programação estou tendo problemas para estilizar uma tabela dentro de um script PHP. Possuo o seguinte script:
      <?php $sql = 'SELECT * FROM psd_produtos'; $stmt = $conn->query($sql); echo '<table>'; while($row = $stmt->fetch(PDO::FETCH_OBJ)){ echo " <td> <tr><h1>$row->prd_nome <br /></h1></tr> <tr><p>$row->prd_detalhe <br /></p></tr> <tr>$row->prd_valor <br /></tr> </td> "; } echo '</table>'; ?> Ele funciona perfeitamente, buscando e produzindo um loop das informações que preciso, porém, gostaria que o resultado me retornasse em tabelas que ficasse dispostas horizontalmente lado a lado, e imaginei colocar uma classe CSS que estabelecesse a largura da tabela em 400px com um float que me permitiria alinhar o resultado em “4 colunas”. Porém, essa classe não funciona dentro do script.
      Tentei echo '<table class="tabela-produto">'; e não funciona.
      A mesma classe, que estabelece uma largura para a tabela, aplicada a uma tabela fora do script funciona e isso tirou minha dúvida se este tópico seria sobre CSS/HTML ou PHP.
      Como posso fazer para obter meu objetivo com este script, alinhando horizontalmente o resultado do while em tabelas dispostas horizontalmente em 4 colunas?
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.