Menu jQuery

[juancarsantana]

Me encuentro con el siguiente problema:

He creado un menú desplegable de dos niveles utilizando CSS y jQuery.

El problemas radica que al insertar jQuery para indicar que a cada ul li que tenga una etiqueta ul de hija, se le modifique la propiedad display cada vez que el puntero del mouse pasa por arriba o sale del mismo, me lo asigna tambien a un menú que tengo en el footer ( y aquí no quiero que lo haga ).

Agradecería cualquier ayuda.

Gracias.

[hasdpk]

Eso es porque estás utilizando un selector muy global y por ello te afecta a toda la página, intenta hacer ese selector más exacto añadiendo una id o clase al menú.

De todas formas tampoco te podemos ayudar mucho sin ver nada del código.

[juancarsantana]

Muchas gracias por responder.
He revisado y modificado, y algo se me escapa.
En el header tengo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul li:has(ul)').hover(
function(e)
{
$(this).find('ul').css({display: "block"});
},
function(e)
{
$(this).find('ul').css({display: "none"});
}
);
});
</script>



<ul class="menu">
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Inicio.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/">Inicio</a></li>

</ul>

<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Conocenos.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/conocenos/">Nuestros Comienzos</a></li>
<li><a href="http://farmaciaciudadalta.com/donde-estamos/">Dónde Estamos</a></li>
<li><a href="http://farmaciaciudadalta.com/horario/">Nuestro Horario</a></li>
</ul>
</li>
<li><a href="http://farmaciaciudadalta.com/farmacias-de-guardia/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Guardias.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/farmacias-de-guardia/">Nuestras Guardias</a></li>
<li><a href="http://farmaciaciudadalta.com/buscar-farmacia-de-guardia/">Buscar Farmacia de Guardia</a></li>
</ul>
<li><a href="http://farmaciaciudadalta.com/servicios/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Farmaceutico.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/material-ortopedico/">Alquiler/Venta Material Ortopédico</a></li>
<li><a href="http://farmaciaciudadalta.com/cabina-de-estetica/">Cabina de Estética</a></li>
<li><a href="http://farmaciaciudadalta.com/cabina-de-masaje/ ">Cabina de Masaje</a></li>
<li><a href="http://farmaciaciudadalta.com/deshabituacion-tabaquica/">Deshabituación Tabaquica</a></li>
<li><a href="http://farmaciaciudadalta.com/empaquetado-de-regalos/">Empaquetado de Regalos</a></li>
<li><a href="http://farmaciaciudadalta.com/nutricionista/">Nutricionista</a></li>
<li><a href="#">Servicio de Pesa</a></li>
<li><a href="#">Servicio de Tensiómetro</a></li>
<li><a href="#">Tarjeta de Fidelización</a></li>
</ul>
</li>
<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Productos.png"></a>
<ul>
<li><a href="">EFP</a></li>
<li><a href="">Dermofarmacia</a></li>
<li><a href="">Dietética</a></li>
<li><a href="">Higiene Corporal</a></li>
<li><a href="">Higiene Capilar</a></li>
<li><a href="">Zona Infantil</a></li>
<li><a href="#">Solares</a></li>
<li><a href="#">Higiene Íntima</a></li>
</ul>
</li>

<li><a href="http://farmaciaciudadalta.com/contacta/ "><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/Contactar.png"></a></li>

<li><a href="http://farmaciaciudadalta.com/"><img src="http://farmaciaciudadalta.com/wp-content/uploads/2012/08/informacion.png"></a>
<ul>
<li><a href="http://farmaciaciudadalta.com/buscar-farmacia-de-guardia/">Buscar Farmacia de Guardia</a></li>
<li><a href="http://farmaciaciudadalta.com/calendario-de-vacunacion/">Calendario de Vacunación</a></li>
</ul>

</ul>


Y en CSS:

ul.menu {
display:inline;
margin-top: 0px;
list-style-type:none;
}
.menu li {
line-height:18px;
font-size:13px;
position:relative;
float:left;
z-index: 400;
}
.menu li a {
color: #000;
text-transform:uppercase;
padding: 5px 22px;
text-decoration:none;
}
.menu li a:hover {
background: #9144ac;
color: white;
}
.menu li ul {
display:none;
position:absolute;
top:80px;
width: 225px;
background-color: #dd752d;
padding: 0px;
list-style-type:none;
}
.menu li ul li {
width: 180px;
border: 4px solid #65289d;
border-top:none;
padding: 10px 20px;
}
.menu li ul li:first-child {
border-top: 2px solid #f26b3a;
}
.menu li ul li a {
width: 240px;
margin: 0;
padding:0;
}
.menu li ul li a:hover {
width: 240px;
margin: 0;
color: #9c0101;
background:none;
}


Gracias de antemano por la ayuda.

[hasdpk]

Si es únicamente para mostar y ocultar al pasar el ratón, no hace falta que uses jQuery ya que puedes usar directamente CSS3.

Aquí tienes unos ejemplos: http://www.cssblog.es/71-menus-de-navegacion-en-css/

[juancarsantana]

Gracias, pero simplemente necesitaría que no me ocultase el widget de enlaces del footer.

Un saludo.

[hasdpk]

Yo no te aconsejo que lo hagas con jQuery, ya que estás haciendo que los usuarios se descargen obligatoriamente jQuery para que te haga el efecto de mostrar u ocultar partes del menú que perfectamente se haría con CSS3.

De todos modos, lo que tienes que hacer es exactamente como te dije en el primer comentario, añadir la clase del menú:

Código Javascript:

$( '.menu ul li:has(ul)' )[...]
 

[juancarsantana]

Gracias, pero no manejo bien estas opciones.

Un saludo.

[Nekko]

La consulta tiene algún problema específico de WordPress? Porque me da la impresión de que en el foro de jQuery tendrías una mejor explicación al respecto. Cualquier cosa avisame y movemos el thread para allá.

Saludos!