Menu hamburguer a direta
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>Discussão (0)
Carregando comentários...