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 Mauricio Molina
      Ola,
       
      Podem me dar uma força, estou elaborando um dashord onde terá algumas funções, uma delas é chamar uma listagem de usuário no banco.
       
      Preciso chamar o css e js para o menu e a tabela.
       
      Sei que é fácil mas sinceramente me perdi, alguém pode dar uma força para chamar os arquivos.
       
      Seguem as imagem de como fica a página
       
      MENU:
       
      <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet"> <link href="css/theme.css" rel="stylesheet"> <script src="js/ie-emulation-modes-warning.js"></script> Tabelas
       
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> Como chamo tudo junto sem um interferir no outro?
       
      No aguardo...
       
      Obrigado!
       
       
       
       
    • By Mucio Willamys
      olá, gostaria da ajuda de vcs :
      este código traz as informações do banco de dados e as coloca dentro de um select html
      é parte de um projeto de um sistema de uma clínica médica, onde ao cadastrar os médicos posso escolher a especialidade do mesmo.
      <select name="especialidade" required="">                 <option value="" >--Escolha uma especialidade--</option>          <?php              $result_especialidade = "select * from especialidade";              $result_especialidade = mysqli_query($bd, $result_especialidade);              while ($row_especialidade = mysqli_fetch_assoc($result_especialidade)){ ?>                    <option value="<?php echo $row_especialidade['id']; ?>"><?php echo  $row_especialidade['nome']; ?> </option> public function editar($id){ include "Bd.class.php"; $nome = $this->nome; $cpf = $this->cpf; $crm = $this->crm; $especialidade = $this->especialidade; $query = "update medico set nome = '$nome', cpf = '$cpf', crm = '$crm', especialidade_id = '$especialidade' where id = $id"; $status = $bd->query($query); return $status; } Acima ^ está a função editar...
       
       
       
      abaixo está o form com as informações do médico.
      <form method="POST" action="../controller/Controller-medico.php?op=e"> <input type="hidden" name="id" size="5" value="<?php echo $id; ?>" > <div class="campo"> <label for="nome">Nome: </label> <input type="nome" name="nome" size="30" value="<?php echo $m->getNome() ?>"> </div> <div class="campo"> <label for="cpf">CPF: </label> <input type="text" name="cpf" size="30" value="<?php echo $m->getCpf() ?>"> </div> <div class="campo"> <label for="rg">CRM: </label> <input type="text" name="crm" size="30" value="<?php echo $m->getCrm() ?>"> </div> <div class="campo"> <label for="especialidade"> Especialidade: </label> </div> <div class="campo"> <input type="submit" value="Atualizar"> </div> </form> Gostaria de saber como faço pra setar um input ou um select no caso para a alteração do dado(especialidade)?
    • By Tommoraes
      Pessoal preciso de ajudar! Queria implementar no meu site um gerador de texto,  tipo ao clicar no botão "gerar" mostraria  texto aleatórios. Como faço isso no HTML? Fiz uma imagem de exemplo. 
       
       


    • By AlanB.
      Boa tarde galera, tudo bem? estou tentando aprender javascript, mas o que eu preciso fazer eu ainda não sei.
       
      Eu tenho o meu menu do site e logo abaixo tenho a section serviços e a section produtos. Eu queria que inicialmente o background do menu fosse azul, mas quando a pessoa desse um scroll e chegasse na section serviços, o background do menu alterasse a cor. Alguem pode me ajudar? 
×

Important Information

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