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 daviassumpcao
      Estou buscando uma orientação ou referência para desenvolver algo similar ao formulário dessa página do iPhone https://www.apple.com/shop/buy-iphone/iphone-se ... quando selecionamos alguma opção, a div que contém o formulário centralizar na página e rola feito um carrossel. Estou completamente perdido com essa demanda que recebi... agradeço antecipadamente a todos que derem uma força. Abraço
    • By tony_lu
      Ola pessoal tudo bem? Gostaria de saber se existe a possibilidade de no meu site eu inserir um link para que o usuario ao clicar, crie um icone de atalho na area de trabalho do celular, tanto android quanto Apple, alguem sabe?
    • By lucasseribeiro
      Bons dias, fórum!
       
      Procurei uma área específica para o JavaFX e não encontrei... Estou aprendendo a usar essa biblioteca, está ficando interessante, se assemelha às tecnologias web com as quais tenho muita familiaridade pois uso há anos. Mas o CSS do JavaFX é diferente daquele do consórcio W3, e não estou encontrando material para entender esse -fx-CSS... A referência CSS da Oracle (https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html) é obscura e não contém as infos que preciso, apesar de esclarecer muitas coisas... Passa uma impressão de que eles não querem que todos saibam!
      Por exemplo: ao estilizar uma menu-bar, mudei seu background, alterei a cor da fonte dos menus, mas eles ficaram colados uns nos outros, e eu não entendi como escolher a propriedade CSS adequada do FX para controlar a distância dos menus. Pude usar um padding, mas ao executar, quando abrimos um menu, os outros ainda são empurrados pois ainda que suas inscrições estejam separadas, os botões do menu ainda estão colados. O tutoriais não abordam o CSS do FX em profundidade, focam-se nos objetivos dos projetos e suas abordagens...
      Rsrs, podia ter no W3Schools... Alguém pode me ajudar com isso???
       
      Grato desde já!
       
      Lucas Ribeiro
    • By Alberto Nascimento
      Como faço que consiga colocar parágrafos no campo tipo "text" do formulário?
          <input name="Text1" style="width: 528px; height: 223px" type="text" /></form>
      Se eu pressiono ENTER automaticamente envia o formulário
      Como então consigo digitar ao preencher o formulário da forma abaixo?
       
×

Important Information

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