Estoy tratando de hacer un menú responsivo con html
css
y javascript
y funciona bien, cuando hago click en alguna opción del menú en pantallas menores de 768px se cierra el menú y aparece el botón de menú nuevamente. Hasta ahí todo va bien, como el menú se cerro después de ese procedimiento yo hago 'resize' para una pantalla mayor a 768px y me sigue apareciendo el botón del menú, trate de quitarlo con el evento 'resize' pero no me funciona (me elimina el botón menú en pantallas menores de 768 al hacer 'resize', aunque le especifiqué que solo en pantallas mayores), creo que está mal porque debería parar de ejecutar la función o algo, la verdad no estoy muy seguro.
Gracias por la ayuda.
document.addEventListener("DOMContentLoaded", function() {
click_events();
});
var width = window.innerWidth;
window.addEventListener('resize', function() {
resize_events();
});
function click_events(){
if(width <= 768){
var options = document.getElementsByClassName("menu-options");
for(var i=0; i < options.length; i++){
//cuando le de click a cada a cierre el menu
options[i].addEventListener("click", function(){
var menu = document.getElementById("menu");
menu.style.marginLeft = "-100%";
//esconda el boton de cerrar X
var btn_close_menu = document.getElementById("x-close-menu");
btn_close_menu.style.display = "none";
//muestre el boton del menu
var btn_open_menu = document.getElementById("bars-open-menu");
btn_open_menu.style.display = "block";
//cuando haga click sobre el boton menu
btn_open_menu.addEventListener("click", function(){
menu.style.marginLeft = "0";
btn_close_menu.style.display = "block";
this.style.display = "none";
});
//cuando haga click sobre el boton cerrar
btn_close_menu.addEventListener("click", function(){
btn_open_menu.style.display = "block";
this.style.display = "none";
menu.style.marginLeft = "-100%";
});
});
}
}
}
function resize_events(){
if(width >= 769){
var btn_open_menu = document.getElementById("bars-open-menu");
btn_open_menu.style.display = "none";
}
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
ul {
list-style: none;
}
h1, h2, h3 {
font-family: 'Rubik', sans-serif;
font-weight: 400;
}
.container {
width: 90%;
margin: auto;
/*max-width: 1200px;*/
}
header {
position: fixed;
width: 100%;
top: 0;
background: #ffffff;
z-index: 100;
padding: 15px 0;
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
header .img-container {
width: 50px;
}
header .img-container img {
width: 100%;
}
header .btn-menu, .btn-close-menu {
display: block;
}
header nav {
margin-left: -100%;
}
header nav ul {
display: flex;
}
header nav ul li {
padding-right: 10px;
}
header nav ul li:last-child {
padding-right: 0;
}
header nav ul li a {
color: #000;
font-weight: 500;
font-size: 1.0625rem;
transition: 0.3s;
}
header nav ul li a:hover {
text-decoration: line-through;
color: #14f3bd;;
}
header nav ul li a:active {
text-decoration: line-through;
color: #000;
}
/*******Menú********/
header .x-close-menu, #btn-menu, .bars-open-menu {
display: none;
font-size: 20px;
}
@media screen and (max-width: 768px){
nav {
position: fixed;
background: #0000EC ;
width: 100%;
left: 0;
top: 84px;
height: 100vh;
overflow-y: auto;
display: flex;
margin-left: -100%;
}
nav ul {
flex-direction: column;
width: 100%;
overflow-y: auto;
padding-left: 20px;
padding-top: 30px;
}
nav ul li {
padding: 20px 0;
}
header nav ul li a {
color: #ffffff;
text-align: left;
}
/*opening and closing menu*/
header .bars-open-menu {
display: block;
}
header #btn-menu:checked ~ .menu {
margin-left: 0;
transition: 1s;
}
header #btn-menu:checked ~ .bars-open-menu{
display: none;
}
header #btn-menu:checked ~ .x-close-menu {
display: block;
}
header #btn-menu:not(:checked) ~ .menu {
margin-left: -100%;
transition: 1s;
}
}
<!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="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Karla|Rubik&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/c3e042a20b.js"></script>
<title>My podcast</title>
</head>
<body>
<header>
<div class="container">
<div class="img-container">
<img src="images/logo.png" alt="">
</div>
<input type="checkbox" id="btn-menu" class="btn-menu">
<label class="bars-open-menu" id="bars-open-menu" for="btn-menu"><i class="fas fa-bars"></i></label>
<label class="x-close-menu" id="x-close-menu" for="btn-menu"><i class="fas fa-times"></i></label>
<nav class="menu" id="menu">
<ul>
<li><a class="menu-options" href="#episodes">EPISODIOS</a class="menu-options"></li>
<li><a class="menu-options" href="#us">NOSOTROS</a></li>
<li><a class="menu-options" href="#interviews">ENTREVISTAS</a></li>
<li><a class="menu-options" href="#topics">TÓPICOS</a></li>
</ul>
</nav>
</div>
</header>
<script src="js/effects.js"></script>
</html>
width
al hacer resize, ademas de esto la comprobaciónif(width <= 768){
la deberías de hacer dentro del evento ya que si lo haces fuera lo único que estas haciendo es que se aplique el evento solo si en ese momento era de tamaño<=768