Search the Community
Showing results for tags 'responsividade'.
Found 1 result
-
Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade codigo do menu que fica a esquerda <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Menu vertical reponsivo com html e css</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css"> <style> *{ margin:0; padding:0; } .menuMobileVertical a{ text-decoration:none; color:white; display:block; padding:20px 5px; } .menuMobileVertical a:hover{ background:rgba(176,224,230); color:black; } body{ font-family:arial; } input[type="checkbox"]:checked ~ nav{ transform: translateX(350px); } .menuMobileVertical ul{ list-style:none; position:absolute; top:70px; width:100%; } .icone-menu{ font-size:40px; } input[type="checkbox"]{ display:none; } .menuMobileVertical{ background:rgba(16,16,16,.5); width: 350px; height: 100vh; left:-350px; position: absolute; transition:all 0.5s; } label{ padding:15px; position:absolute; z-index:1; } </style> </head> <body> <div class="menuMobile"> <input type="checkbox" id="check"> <label for="check"><i class="bi bi-list icone-menu"></i></label> <nav class="menuMobileVertical"> <ul> <li><a href="">HOME</a></li> <li><a href="">LOGIN</a></li> <li><a href="">ALUNO</a></li> <li><a href="">PROFESSOR</a></li> <li><a href="">CONTATO</a></li> </ul> </nav> </div> </body> </html>
