duda en CSS. Menú solo con CSS. Tengo una duda.
Es la primera vez que publico aquí y espero serlo suficientemente claro para que me entiendan. tengo un menú con un subnivel, al hacerlo responsive aculto el menú y lo hago visible con un checked, al submenu igual, cuando activo el submenu se despliega perfectamente pero si desactivo el menu principal, se cierra el menú completo pero el problemas es que al reactivarlo el submenu sigue abierto, la idea sería que se cerrase al desactivar el menú y vuelva minimizado. lo solucione fácil con javascripts, pero quería saber si hay alguna forma de hacerlo solo con css.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Menu desplegable responsive</title>
</head>
<body>
<header>
<input type="checkbox" id="btn-menu" />
<label for="btn-menu"
><i class="fa fa-bars fa-lg" aria-hidden="true"></i
></label>
<nav class="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li class="services">
<input type="checkbox" id="sub-menu" />
<label for="sub-menu">Servicios </label>
<ul class="submenu">
<li><a href="#">Antivirus</a></li>
<li><a href="#">Presencia Web</a></li>
<li><a href="#">Asistencia Remota</a></li>
<li><a href="#">Gestión de contraseñas</a></li>
<li><a href="#">Sincronización de archivos</a></li>
</ul>
</li>
<li><a href="#">Contactos</a></li>
<li><a href="#">Ubicación</a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
<script
src="https://kit.fontawesome.com/14a03e1614.js"
crossorigin="anonymous"
></script>
<script src="menu.js"></script>
</body>
</html>
CSS
:root {
--color_de_fondo: <a href="/comunidad/publicaciones?q=%23f2f2f2" data-community-hashtag="true">#f2f2f2</a>;
--color_de_hedear: <a href="/comunidad/publicaciones?q=%233672c7" data-community-hashtag="true">#3672c7</a>;
--color_del_menu: <a href="/comunidad/publicaciones?q=%234e94ab" data-community-hashtag="true">#4e94ab</a>;
--color_font_white: <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>;
} /* delcaración de variables */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} /* Reseteo simple de parametros */
body {
font-family: sans-serif; /* Fuente que se cva a utilizar */
font-size: 16px; /* tamaño de fuente en todo el documento */
}
header {
width: 100%; /* header ocupa el 100% del ancho */
background-color: var(--color_del_menu); /* color de fondo del header */
}
<a href="/comunidad/publicaciones?q=%23btn" data-community-hashtag="true">#btn</a>-menu {
display: none; /* ocultamos el checkbox */
}
header label {
display: none; /* ocultamos el icono del menu para el responsive */
width: 30px; /* le damos un ancho de 30px */
height: 30px; /* le damos un algo de 30px */
padding: 15px 33px 30px 15px; /* le damos un padding de */
/*border-right: 1px solid <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>; una rayita blanca a la derecha pero no me gusta mucho*/
}
/* header > label " > hijo directo, porque hay optro label que toma el color". */
header > label:hover {
cursor: pointer; /* puntero de la manito cuando passe el raton */
background-color: rgba(
0,
0,
0,
0.1
); /* color de fondo negro con trasparencia de 0.1 */
}
.menu ul {
margin: 0;
list-style: none; /* quitamos el estilo de lista */
padding: 0;
display: flex; /* usamos flexbox */
justify-content: left;
}
.menu li:hover {
background: rgba(
0,
0,
0,
0.1
); /* fondo negro con transpariencia 0.1 al pasar el raton */
}
.menu ul li {
/* border-right: 1px solid <a href="/comunidad/publicaciones?q=%23fff" data-community-hashtag="true">#fff</a>; borde derecho en blanco como efecto pero no me gusta mucho */
}
.menu li a,
.menu li span {
display: block; /* loa link en bloques */
padding: 15px 20px;
color: var(--color_font_white);
text-decoration: none; /* quitamos la decoracion de los link, el subrayado y el color violeta al entrar */
}
<a href="/comunidad/publicaciones?q=%23sub" data-community-hashtag="true">#sub</a>-menu {
display: none; /* ocultamos el checkbox del submenu */
}
.menu li ul {
display: none; /* ocultamos el submenu */
position: absolute; /* Lo sacamos del flujo para que no se expanda el menu en servicios */
background-color: var(
--color_del_menu
); /* le volvemos a poner el color del fondo, ya que al salir del flujo se quedo sin fondo. */
}
.services label {
color: var(--color_font_white);
display: block;
min-width: 100px;
min-height: 48px;
}
.services:hover ul {
display: block; /* hago visible el submenu */
}
[@media](https://ed.team/media) (max-width: 768px) {
/* responsive */
header label {
display: block; /* Muestro el icono del Menú */
}
.menu {
position: absolute; /* Saco del fujo el menu */
background-color: var(--color_del_menu);
width: 100%;
margin-left: -100%; /* muevo el menú completamente a la izquierda */
transition: all 0.3s; /* retraso 0.3segundos el desplazamineto */
}
.menu ul {
flex-direction: column; /* cambio la direccion del munú */
}
.services label {
width: 1000%; /* extiendo el label al 100% para que el click funcione en toda la fila */
}
<a href="/comunidad/publicaciones?q=%23btn" data-community-hashtag="true">#btn</a>-menu:checked ~ .menu {
/* muestro el menú */
margin-left: 0;
}
.services:hover ul {
/* evito que al pasar el raton aparezca el submenú */
display: none;
}
.submenu li {
padding-left: 20px; /* sangria submenú */
}
<a href="/comunidad/publicaciones?q=%23sub" data-community-hashtag="true">#sub</a>-menu:checked ~ .submenu {
/* muestro el menu cuendo se activa el checked */
display: block;
position: relative;
}
}
Javascripts
.getElementById("btn-menu").addEventListener("change", function () {
if (this.checked) {
} else {
document.getElementById("sub-menu").checked = false;
}
});
Espero que alguien pueda ayudarme.
Desde ya , muchas gracias