Menu desplegable JS no funciona en ciertos navegadores
Publicado por Luis (2 intervenciones) el 07/12/2020 19:24:51
Bueno, tengo mi página web creada y publicada correctamente. Contiene un menú desplegable que se activa cuando la dimensión de pantalla es inferior a un tamaño determinado (pensada para tablets, móviles...).
Pues bien, cuando abro mi página en Chrome (buscando en google, con la ventana adaptada para que se active el @mediaquery), aparece el icono de menú pero por más que pinche no realiza su función. En cambio si abro la página en EDGE sí que realiza la acción de "aparecer".
Por qué en unos navegadores sí y en otros no? De hecho, si pincho en un link, también funciona, probad: "https://derechopresupuestario.es/". En cambio si copio la dirección y la pego en la barra de direcciones, no...
Este es el HTML del menú y sus script:
Esta la parte correspondiente de la hoja de estilos:
}
Y este el código JS:
A ver qué os parece. Decir que en el móvil tampoco me funciona si busco la página en Safari, pero si abro la página desde un enlace sí que funciona...
Pues bien, cuando abro mi página en Chrome (buscando en google, con la ventana adaptada para que se active el @mediaquery), aparece el icono de menú pero por más que pinche no realiza su función. En cambio si abro la página en EDGE sí que realiza la acción de "aparecer".
Por qué en unos navegadores sí y en otros no? De hecho, si pincho en un link, también funciona, probad: "https://derechopresupuestario.es/". En cambio si copio la dirección y la pego en la barra de direcciones, no...
Este es el HTML del menú y sus script:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<header>
<div class="menu_bar">
<a href="#"><span class="icon-menu"></span></a>
</div>
<nav>
<ul>
<li><a href="index.html">INICIO</a></li>
<li><a href="videos.html" target="_blank">VÍDEOS EJEMPLO</a></li>
<li><a href="contacto.html" target="_blank">CONSULTAS</a></li>
</ul>
</nav>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="menu.js"></script>
</header>
</body>
Esta la parte correspondiente de la hoja de estilos:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (max-width:57.5rem){
.menu_bar .icon-menu {
display:block; padding: 2rem;background:#2e3132;
color:#ffc107;
text-decoration:none;
font-weight: bold;
font-size:2.5rem;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}Y este el código JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(document).ready(main);
var contador = 1;function main(){
$('.menu_bar').click(function(){
// $('nav').toggle();if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;} else {
contador = 1;$('nav').animate({
left: '-100%'
});
}});
}A ver qué os parece. Decir que en el móvil tampoco me funciona si busco la página en Safari, pero si abro la página desde un enlace sí que funciona...
Valora esta pregunta
0
