rafalbino
-
Total de itens
3 -
Registro em
-
Última visita
Posts postados por rafalbino
-
-
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%;}
Versão Mobile Menu
em Desenvolvimento frontend
Postado
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%;}