Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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.
<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
1041
Visitas
7
Resp
Por adrianagodoy hace 71 meses
Principiante Sitio web
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
0
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 ;)
0
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>
0
Puntos
Por adrianagodoy hace 71 meses
Principiante Sitio web
Respuesta #4
y entonces no se podría usar un menu responsive con botones desplegables?
0
Puntos
Por adrianagodoy hace 71 meses
Principiante Sitio web
Respuesta #5
No ni colocando el mouse, ni dando click funciona
0
Puntos
Por adrianagodoy hace 71 meses
Principiante Sitio web
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
0
Puntos
Por adrianagodoy hace 70 meses
Principiante Sitio web
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:
<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
Por alber hace 70 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate