Ir para conteúdo
Fórum Script Brasil

chptr0

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    2

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por chptr0

  1. Menu Responsivo

    em Tutoriais & Dicas - HTML, XHTML, CSS

    Postado · Editado por chptr0

    17 horas atrás, AlexandreNSilva disse:

    Boa tarde, eu testei o seu código, e para mim funcionou normalmente, ele esta fazendo o checked, eu utilizei o chrome,

    qual navegador você esta utilizando?

    Olá bom dia, eu estou utilizando o Google Chrome também mais especificamente a Versão 78.0.3904.70 (Versão oficial) 64 bits. Aqui quando eu dou um click no Label ele faz o check-in, porém o evento de aparecer o "Menu" não ocorre.

  2. Menu Responsivo

    em Tutoriais & Dicas - HTML, XHTML, CSS

    Postado

    Boa noite galera! Tudo bom com vocês? Espero que sim!

    Eu estou num projeto de criar um Menu responsivo para um site. Mas não estou conseguindo finalizar o último passo e não faço a menor IDEIA de onde que eu to errando. Sou novo no Fórum, nem sei se era aqui que eu deveria postar isto. Se não for peço humildes desculpas, é que eu estou realmente desesperado já faz alguns dias que to nessa e não consigo resolver.

    Eu atribui o <Label> a um <Input>, na hora que eu dou check-in no <Label> deveria chamar o <Input:Checked>, mas nada ta acontecendo. Alguém tem uma luz????

     

    Aqui ta o HTML:

    <!DOCTYPE html>
    <html lang="en">
     
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
        <title>NAVIGATION</title>
    </head>
     
    <body>
        <div class="container">
            <nav>
                <div class="logo">
                    <h4>The Nav</h4>
                </div> 
                <ul class="nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Projects</a></li>
                </ul>
                <input type="checkbox" id="bt_menu">
                <label for="bt_menu">&#9776;</label>
            </nav>
        </div>
    </body>
    </html>

    E aqui ta o CSS:

    *{
        margin: 0px;
        padding:0px;
        box-sizing: border-box;
    }
     
    .container{
        width: 100%;
        min-height: 70px ;
        border-style: solid;
        border-color: mediumblue;
        border-width: medium;
    }
     
    nav{
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 70px;
        background-color: gray;
        font-family: 'poppins', sans-serif;
    }
     
    .logo{
        color: rgb(226, 226, 226);
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 20px;
    }
     
    .nav-links{
        display: flex;
        justify-content: space-around;
        width: 30%;
    }
     
    .nav-links a{
        color: rgb(226, 226, 226);
        text-decoration: none;
        letter-spacing: 3px;
        font-weight: bold;
        font-size: 14px;
    }
     
    .nav-links li{
        list-style: none;
    }
     
    input{
        /*display: none;*/
    }
     
    label[for="bt_menu"]{
        padding: 5px;
        background-color: gray;
        color: white;
        font-family: Arial;
        font-size: 30px;
        align-items: center;
        cursor: pointer;
        width: 50px;
        height: 50px;
        display: none;
    }
     
    @media(max-width:1024px){
        .nav-links{
            width: 60%;
        }
    }
     
    @media(max-width:768px){
     
        #bt_ menu:checked ~ .nav-links{
            margin-right: 0%;
        }
        body{
            /*overflow-x: hidden;*/
            }
        .nav-links{
            position: absolute;
            right: 0px;
            height: 92vh;
            top:13vh;
            background-color: gray;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 50%;
            margin-right: -50%;
            transition: all 0.5s ease-in;
        }
        .nav-links li{
            /*opacity:0;*/
        }
     
        label[for="bt_menu"]{
            display: block;
        }
     
       
        .nav-active{
            transform: translateX(0);
        }
    }


     
×
×
  • Criar Novo...