chptr0
-
Total de itens
2 -
Registro em
-
Última visita
Sobre chptr0
chptr0's Achievements
0
Reputação
-
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.
-
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">☰</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); } }