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
Em 14/05/2019 at 15:21, rafalbino disse:

 #bt_menu:checked ~ .menu{margin-left: 0;}

 

Na versão mobile do seu código o trecho acima tem que vir depois da linha abaixo para sobrescrevê-la e mostrar o menu quando clicar no botão.

 

Em 14/05/2019 at 15:21, rafalbino disse:

.menu{margin-top: 255px;margin-left: -110%;transition: all .9s;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 tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By GabrieldaBahia
      Tenho duas paginas HTMl e o PHP onde estou tratando uns dados XML retornado após a leitura de um arquivo, porém estou com uma duvida besta, preciso pegarum valor que pego do XML e colocar dentro de uma tag html,  já fiz assim e nada </caption> <?php  echo $cnpj ?><caption>
      a pagina PHP está sendo chamada no HMTL pelo require_once.
       
       
      trecho do HTML
       
      <head>     <title>Testes</title> </head> <?php include_once 'load.php'; ?>   <body>   <table> <caption >Ti<?php echo $cnpj ?></caption> <tr> Trecho do PHP   $arq = simplexml_load_file('29190411412201000112650010000000181000000180-nfe.xml') or die("Erro ao carregar arquivo XML");   foreach($arq->NFe->infNFe->children() as $infNFe){ $cnpj = $infNFe->CNPJ;   }
    • By makinh0
      <table width="90%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
      <tr>
        <td align="center" bgcolor="<?php echo $background ?>"><table width="100%" border="0" align="center" cellpadding="5" cellspacing="0" style="margin-top:10px;">
          <tr>
            <td width="48%" align="left" bgcolor="#3399FF"><strong>Produto</strong></td>
            <td width="16%" align="center" bgcolor="#3399FF"><strong>Hora</strong></td>
            <td width="19%" align="center" bgcolor="#3399FF"><strong>Mesa</strong></td>
            <td width="9%" align="left" bgcolor="#3399FF"><strong>Garçom</strong></td>
            <td width="8%" align="center" bgcolor="#3399FF"><strong>Ação</strong></td>
             <td width="8%" align="center" bgcolor="#3399FF"><strong>Observações</strong></td>
          </tr>
          <?php 
        $sql = mysql_query("SELECT * FROM tbl_carrinho INNER JOIN garcon ON tbl_carrinho.idGarcon = garcon.idGarcon WHERE destino='1' AND status = '0' ORDER BY id DESC") or die(mysql_error());
        while($ver = mysql_fetch_array($sql)){
          $background = (++$i%2) ? '#FFFFF' : '#F2F2F2';
          $feito = $ver['feito'];
        ?>
          <tr>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nome']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['time']; ?></td>
            <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>"><?php echo $ver['nomeGarcon'] ?></td>
              <td align="center" bgcolor="<?php echo $background ?>"><?php echo $ver['id_mesa'] ?></td>
            <td bgcolor="<?php echo $background ?>">
       
       
      Sistema restaurante; gente precisava fazer a tela de observacoes , tipo na tela cozinha aparece produto,hora,mesa,garcom e acao, queria por observacao para a cozinha receber como o cliente quer? alguem tem ideia?obg
    • By reytlersouza
      Não consigo passar variável obtida por consulta no banco no value de uma TAG <option> "<option value="<?php $item['id_eq']?>">"
       
      O que está errado no meu código que ele não passa o valor de value no $_GET nem no $_POST?

       
      <?php
          echo $_GET['equi1'];
      ?>
      <form method="GET">   
          <select name="equi1" class="form-control">
              <?php
              require 'conn.php';
              $sql = $pdo->prepare("SELECT * FROM equipamento WHERE 1");
              $sql->execute();
              if($sql->rowCount() > 0) {
              foreach($sql->fetchAll() as $item) {
                                                                      
              ?>
              <option value="<?php $item['id_eq'];?>"><?php echo $item['nome'];?></option>
              <?php
                  }
                  }
                  ?>
          </select>
          <input type="submit" value="Salvar"/>
      </form>
×

Important Information

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