Avatar
Oscar Yaniuk

@oscaryaniuk

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

<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

 --color_de_fondo: #f2f2f2;
 --color_de_hedear: #3672c7;
 --color_del_menu: #4e94ab;
 --color_font_white: #fff;
} /* 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 */
}

#btn-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 #fff; 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 #fff;  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 */
}

#sub-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 */
 }
 #btn-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ú */
 }
 #sub-menu:checked ~ .submenu {
   /* muestro el menu cuendo se activa el checked */
   display: block;
   position: relative;
 }
}

Javascripts

 if (this.checked) {
 } else {
   document.getElementById("sub-menu").checked = false;
 }
}); ```

Espero que alguien pueda ayudarme.

Desde ya , muchas gracias
Avatar
Oscar Yaniuk

@oscaryaniuk

Buenas tardes. Me pregunta si podrían explicarme mejor lo del la estructura semántica, ya que en el video 2.4 muestra un las etiquetas

<article> <h1>.....</h1> <seccion> <h1>..</h2> </seccion> <article> y no me queda claro cuan va primero o cuál va dentro? he leído y visto en otros lugares "article" dentro de un "seccion". he incluso en w3school dice que" seccion" es el documento principal y "article" es un elemento independiente que tiene sentido por si mismo y además puede ir uno dentro de otro, es decir "seccion" dentro de "article" y viceversa.

Desde ya gracias

Este usuario no ha indicado que le gusta algún video

Amigos

Oscar aún no tiene un enlace de referidos

Si eres estudiante premium ya tienes el enlace en tu perfil de usuario. Si aún no eres premium recibirás tu enlace de referidos como recompensa cada vez que completes un curso gratuito.

Más información

Estos son los beneficios que tú y Oscar recibirán si compras con su enlace de referidos 🙌

BeneficiosMensualSemestralAnual
Descuento ()$ 3 USD$ 15 USD$ 120 USD
Semanas gratis (Oscar)1612

Al comprar con el enlace de referidos aceptas los términos y condiciones

Publicaciones
Certificados
Me gusta
Referidos