Jump to content

rafalbino

Members
  • Content count

    3
  • Joined

  • Last visited

Posts posted by rafalbino


  1. 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%;}

     

     


  2. 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%;}

     

     

×

Important Information

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