No funciona el menu desplegable para pc solo en responsive
Tengo este código de un menu desplegable, resulta que no me funciona en tamaño de pc, solo funciona para tamaño tablet o para movil. Como hago para que me funcion para pc.
Editado
<div class="contenedor"> <nav class="menu menu-negro"> <div class="contenedor no-hidden"> <div class="menu-boton menu-boton-negro" id="menu1"></div> <div class="menu-lista" id="menu1"> <ul> <li class="menu-activo"><a href="#"><span class="fa fa-home"></span> Home</a></li> <li><a href="#">About as</a></li> <li> <a onclick="menumas('menu-mas1');"> All Comercial Proyects <span class="fa fa-caret-down"> </span></a> <ul class="menu-mas" id="menu-mas1"> <li><a href="">Subitem1</a></li> <li><a href="">Subitem2</a></li> </ul> </li> </ul> </div> </div> </nav> </div>
Editado
0
Puntos
Puntos
1041
Visitas
Visitas
7
Resp
Resp
Respuesta #1
claro por que no estas usando un menú desplegable pero sin una menú responsive por eso no te funciona
aquí tienes un ejemplo de como hacer que los item sean desplegables en pc https://datoweb.com/basecss/#menudesplegable
salu2
aquí tienes un ejemplo de como hacer que los item sean desplegables en pc https://datoweb.com/basecss/#menudesplegable
salu2
0
Puntos
Puntos
Por alber hace 71 meses
Administrador
Respuesta #2
vale sorry, lo acabo de comprobar de nuevo y parece que lo tienes bien, solo una cosa.. has probado a hacerle clic encima cuando estas en pc??
es posible que te refieras a eso, a que se despliegue cuando pones en cursor encima en vez de cuando haces clic
prueba y nos cuentas ;)
es posible que te refieras a eso, a que se despliegue cuando pones en cursor encima en vez de cuando haces clic
prueba y nos cuentas ;)
0
Puntos
Puntos
Por alber hace 71 meses
Administrador
Respuesta #3
yo copie ese menu en un archivo solito y tampoco se despliega el boton en pc.
te muestro el código
<body>
<div class="contenedor">
<nav class="menu">
<div class="contenedor no-hidden">
<ul>
<li class="menu-activo"><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li>
<a onclick="menumas('menu-mas1');">Desplegar</a>
<ul class="menu-mas" id="menu-mas1">
<li><a href="">Subitem1</a></li>
<li><a href="">Subitem2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
te muestro el código
<body>
<div class="contenedor">
<nav class="menu">
<div class="contenedor no-hidden">
<ul>
<li class="menu-activo"><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li>
<a onclick="menumas('menu-mas1');">Desplegar</a>
<ul class="menu-mas" id="menu-mas1">
<li><a href="">Subitem1</a></li>
<li><a href="">Subitem2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
0
Puntos
Puntos
Respuesta #4
y entonces no se podría usar un menu responsive con botones desplegables?
0
Puntos
Puntos
Respuesta #5
No ni colocando el mouse, ni dando click funciona
0
Puntos
Puntos
Respuesta #6
Alber me podrías ayudar con este tema, no lo he podido solucionar. El botón no despliega las opciones en tamaño pc.
Muchas gracias
Muchas gracias
0
Puntos
Puntos
Respuesta #7
ok, mira te lo eh preparado listo para usarlo, pero ojo.. remplaza tu menú por todo este código es decir donde tienes esto:
slds
<div class="contenedor"> <nav class="menu"> <div class="contenedor no-hidden"> <ul> <li class="menu-activo"><a href="#">Item1</a></li> <li><a href="#">Item2</a></li> <li> <a onclick="menumas('menu-mas1');">Desplegar</a> <ul class="menu-mas" id="menu-mas1"> <li><a href="">Subitem1</a></li> <li><a href="">Subitem2</a></li> </ul> </li> </ul> </div> </nav> </div>por esto:
<style> .menu ul li ul { display: none; position: absolute; top: 38px; width: auto; z-index: 999; padding-top: 10px; margin: 0 !important; } .menu ul li:hover > ul { display: block; } @media (max-width: 950px) { .menu ul li:hover > ul { display: none; } .menu ul li > ul { position: relative; top: 0; padding: 0; } .menu ul li ul li { border: none; } .menu ul li ul li a { margin-left: 7px; text-align: left; } } </style> <script> function menu_res(){ var anchoweb=$(window).width(); if(anchoweb<=800) $('.menu ul li ul').slideToggle(); } </script> <div class="contenedor no-hidden"> <nav class="menu menu-negro no-hidden"> <div class="menu-boton menu-boton-negro" id="menu1"></div> <div class="menu-lista" id="menu1"> <ul> <li class="menu-activo"><a href="#">Inicio</a></li> <li><a onclick="menu_res();">Secciones</a> <ul> <li><a href="#">Item</a></li> <li><a href="#">Item2</a></li> </ul> </li> </ul> </div> </nav> </div>como ves, es importante que elimines tu menú incluyendo la primera capa "contenedor" y si tienes bien las librería debería funcionar tanto en pc como responsive
slds
1
Puntos
Puntos
Por alber hace 70 meses
Administrador