Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Barra navegación NavBar responsive

JavaScript - Barra navegación NavBar responsive

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 11
Ha aumentado su posición en 7 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra navegación NavBar responsive

Publicado por Orion (8 intervenciones) el 04/06/2020 18:27:32
Buenas tardes,

Tengo una duda. Cuando hago pequeña mi pantalla me sale un menu para abrir un desplegable (Foto1). Hasta ahi todo correcto.

El problema esta cuando pincho una de las opciones de la lista (Foto 2). Le pincho por ejemplo a "Sobre nosotros" y me baja en la pagina a donde tengo puesto que baje (Foto 3). Eso lo hace perfectamente.

Sin embargo cuando doy a cerrar el menu desplegable a la x se me vuelve a subir a la navbar en vez de quedarse en el apartado "Sobre nosotros" que es donde me ha llevado al puslar el boton de la lista desplegable. ¿Como puedo hacer para que se quede?

He conseguido tocando un poco el js que al cerrar al x se quede en ese apartado pero me desaparece la barra lateral para poder navegar a partir de ese punto.

Tengo en js este codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
/*---------- navbar menu-----------*/
 
$('.navbar-toggle').on('click', function () {
    $(this).toggleClass('is-active');
    $('.nav-menu').toggleClass('open-nav');
    var wH = $(window).height();
 
    if ($('.nav-menu').hasClass('open-nav')) {
        $('.wrapper').css('height', wH);
    } else {
        $('.wrapper').css('height', 'auto');
    }
});


Foto1
Foto-2
Foto-3
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 ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Barra navegación NavBar responsive

Publicado por ScriptShow (692 intervenciones) el 05/06/2020 15:44:47
Saludos,

en mi caso, optaría por código nativo compatible, flexible, etc. sin librerías de terceros...

Un ejemplo básico adaptable, mejorable:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family:'Helvetica', sans-serif;
}
.menu {
top:0;
left:0;
width:100%;
height:100%;
display:none;
position:fixed;
z-index:1;
background-color:rgb(142,148,162);
background-color:rgba(142,148,162, 0.8);
}
.menu-cont {
position:relative;
top:24%;
width:100%;
margin-top:24px;
text-align:center;
}
.menu a {
padding: 8px;
color: #FFFFFF;
display: block;
font-size: 28px;
text-decoration: none;
transition: 0.4s;
}
.menu a:hover, .menu a:focus {
color: #000000;
}
.menu .close {
position: absolute;
top: 16px;
right: 16px;
font-size: 48px;
}
</style>
<script>
function openNav() { document.getElementById("menu").style.display="block";
}
function closeNav() { document.getElementById("menu").style.display="none";
}
</script>
</head>
<body>
<div id="menu" class="menu">
<a href="javascript:void(0)" class="close" onclick="closeNav()">&times;</a>
<div class="menu-cont">
<a href="#01">Home</a>
<a href="#02">Sobre Nosotros</a>
<a href="#03">Galería</a>
<a href="#04">Redes Sociales</a>
</div>
</div>
<h2>Ejemplo Navbar Menú</h2>
<p>Click en el icono siguiente para abrir el menu.</p>
<span style="font-size:24px;cursor:pointer" onclick="openNav()">&#9776;</span>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<a name="01"></a>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<a name="02"></a>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<a name="03"></a>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<a name="04"></a>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
<p>Texto del contenido del Stio para activar el Scroll. Etc...</p>
</body>
</html>

Por supuesto, se puede simplificar dedicándole más horas de trabajo...

Espero sea útil.
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