Ir para conteúdo
Fórum Script Brasil
  • 0

Menu Responsivo

chptr0

Perguntado por chptr0,

 Share

Pergunta

chptr0

chptr0

Postado
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);
    }
}


 
Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0
chptr0

chptr0

Postado
  • Autor
Postado (editado)
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.

Editado por chptr0
Link para o comentário
Compartilhar em outros sites
  • 0
AlexandreNSilva

AlexandreNSilva

Postado
Postado

você quer que apareça o menu somente quando o Checkbox tiver selecionado?

se for isso, você pode desabilitar ele, e criar uma função e atribuir ela no evento onclick da teg do checkbox.

seria mais ou menos assim:

<html>
<head>
<script>
function habilitaMenu()
{
    if(checkbox.value == 1)
    {
        document.getElementById('menu').style.display = "inline";
    }
    else{
        document.getElementById('menu').style.display = "none";
    }
}
</script>
</head>
<body>
 
<input type="checkbox" id="bt_menu" onclick="habilitaMenu()">
<div id="menu">
<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>
</div>
</body>
</html>
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...