HTML - Click cierra menú desplegable

 
Vista:
sin imagen de perfil
Val: 19
Ha aumentado su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Julián (5 intervenciones) el 11/08/2020 23:17:35
He creado un menú desplegable el cual sirve como índice para moverse dentro de la misma página, pero no sé cómo hacer para que al clicar una de esas funciones te lleve al lugar (eso sí lo sé) y que te cierre el menú desplegable al mismo tiempo.
Estoy programando en HTML y CSS.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 1.084
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por joel (296 intervenciones) el 12/08/2020 09:03:22
Hola Julián, no comentas como lo estas haciendo, ni muestras el código... por lo que me voy a arriesgar...

1
$("#menu").hide();

Casi seguro que no he acertado... si puedes mostrar como lo estas haciendo...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Julián (5 intervenciones) el 12/08/2020 13:35:47
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
header label {
    float: right;
    font-size: 28px;
    margin: 6px 0px;
    cursor: pointer;
}
 
.menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(51,51,51,0.9);
    transition: all 0.2s;
    transform: translateX(-100%);
}
 
.menu a {
    display: block;
    color: seashell;
    height: 50px;
    text-decoration: none;
    padding: 15px;
    border-bottom: 1px solid rgba(255,255,255, 0.3);
}
 
.menu a:hover {
    background: rgba(255,255,255, 0.3);
}
 
#menu-bar:checked ~ .menu {
    transform: translateX(0%);
    transition: all 0.5s;

Este es el CSS al que recurro para el menú, "TranslateX equivale al movimiento del menú 0=vuisible, -100=invisible.

1
2
3
4
5
6
7
8
9
10
11
12
13
<header>
     <div class="contenedor">
         <a href="#banner"><h1 class="icon-tree">Jellas</h1></a>
         <input type="checkbox" id="menu-bar">
         <label class="icon-menu" for="menu-bar"></label>
 
    <nav class="menu">
      <a href="#banner">Inicio</a>
      <a href="#info">Stock</a>
      <a href="#social">Contacto</a>
    </nav>
    </div>
 </header>

Y este es el HTML del menú dónde "nav class" es el menú desplegado y sus componentes
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 1.084
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por joel (296 intervenciones) el 12/08/2020 18:01:15
El enlace al que haces referencia es el enlace de la linea 3?

Cuando se pulse sobre dicho enlace se tiene que esconder el menú?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Lopez
Val: 810
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Lopez (259 intervenciones) el 12/08/2020 18:50:08
Joel,

Sorry leí y entendí mal el problema de Julián :P
Crees esto le sirva?

Si este es tu enlace:
1
<a href="#banner">Inicio</a>

Bastara con que crees un elemento, por ejemplo

1
2
3
<div id="banner">
tu contenido aqui
</div>


Al clickear ese link "saltara" directamente. Estos se llaman anchor links.

Lo que Joel recomienda es usar Jquery,
y con esta funcion esconder el elemento de clase menu al ser clickeado.

1
2
3
$(document).ready(function(){
$("#menu").hide();
});

El comportamiento que se cierre solo, es por default.

Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 1.084
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por joel (296 intervenciones) el 13/08/2020 08:59:31
Hola Lopez, lo que yo entendi, es que quieres que se esconda el menú en el momento que pulse en el link... algo así:

1
2
3
4
5
<a href="#banner" onclick="hideMenu">Inicio</a>
 
<script>
const hideMenu = () => document.querySelector(".menu").display=none;
</script>

Aunque no lo tengo muy claro...

Un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de Lopez
Val: 810
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Lopez (259 intervenciones) el 13/08/2020 15:21:07
Hola Joel,

Idem por aquí :P

1
moverse dentro de la misma página, pero no sé cómo hacer para que al clicar una de esas funciones te lleve al lugar ...

Igual me quedo con tu respuesta.
Esperemos el autor se haga presente para que le de flechita arriba.

Saludos, doc!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Julián (5 intervenciones) el 13/08/2020 16:12:19
Hola, la función trabaja perfectamente, aunque no es lo que buscaba. Muchísimas gracias por el esfuerzo y la ayuda ^^
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Julián (5 intervenciones) el 13/08/2020 16:10:54
Realmente no es lo que busco, pero la sí que funciona. Muchísimas gracias por el esfuerzo y la ayuda un saludo ^^
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 810
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Lopez (259 intervenciones) el 12/08/2020 15:31:24
Julian,

En este cosa tienes dos opciones:

Cargar mediante javascript/ajax el contenido o bien usar algún lenguaje del lado del servidor como PHP y usar sesiones.
La primera opción evita resfrescar toda la pagina, lo cual te viene perfecto. La otra opciones es añadir una variable de session para que recuerde lo que clickeaste.

Quedamos atentos,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 19
Ha aumentado su posición en 4 puestos en HTML (en relación al último mes)
Gráfica de HTML

Click cierra menú desplegable

Publicado por Julián (5 intervenciones) el 12/08/2020 15:38:40
Lo probaré lo antes posible. de momento estoy con la décima página derivada...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar