MENU DESPLEGABLE
Código PHP :
<style type="text/css">
h3 {
font-size: 13px;
font-family: "Open Sans";
color: #fff;
margin: 0;
padding: 8px 0 8px 15px;
text-transform: uppercase;
font-weight: 300;
}
img {
border:none;
}
.megamenu {
border: 1px solid #000000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
font-family: "Open Sans";
font-size: 13px;
width: 725px;
height: 112px;
color: #FFF;
margin: 0;
padding: 0;
background-color: #000000;
}
.megamenu ul {
text-align: center;
list-style-type: none;
margin: 0;
padding-top: 45px;
padding-bottom: 16px;
padding-right: 16px;
padding-left: 16px;
}
.megamenu ul li {
list-style-type: none;
display: inline;
margin: 0;
padding: 0;
}
.megamenu ul li a,.megamenu ul li a:visited {
text-decoration: none;
color: #FFF;
margin: 0;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}
.megamenu ul li a:hover,.megamenu ul li a:visited:hover {
text-decoration: none;
color: #000000;
margin: 0;
padding-top: 45px;
padding-right: 20px;
padding-bottom: 51px;
padding-left: 20px;
background-color: #29abe2;
}
.megamenu ul li a:active, .megamenu ul li a:visited:active {
text-decoration: none;
color: #000000;
margin: 0;
padding-top: 45px;
padding-right: 20px;
padding-bottom: 51px;
padding-left: 20px;
background-color: #29abe2;
}
.megamenu ul li.downservices {
background:url(images/arrow.png) 100% 55% no-repeat;
margin:0;
padding:10px 8px 10px 10px;
}
.servicesdropped {
display: none;
text-align: left;
position: absolute;
font-size: 12px;
width: 590px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
margin: 10px 0 0 20px;
padding: 10px 20px 20px;
background-color: #2b2b2c;
}
.servicesdropped d.textleft {
float:left;
font-size:12px;
width:200px;
margin:10px 0 0;
padding:0 20px 15px 10px;
}
.servicesdropped .middle {
text-align: left;
float: left;
border-right: 1px solid #333;
border-left: 1px solid #333;
font-size: 12px;
width: 180px;
margin: 0;
padding: 0;
font-family: "Open Sans";
}
.servicesdropped .right {
text-align:left;
float:left;
border-right: 1px solid #333;
font-size:12px;
width:178px;
margin:0;
padding:0;
}
.servicesdropped ul.right li a,.servicesdropped ul.middle li a {
list-style-type:none;
display:block;
color:#888;
font-size:12px;
margin:0;
padding:5px 0 5px 20px;
}
.servicesdropped ul.right li a:hover,.servicesdropped ul.middle li a:hover {
list-style-type: none;
color: #000000;
display: block;
font-size: 12px;
margin: 0;
padding: 5px 0 5px 21px;
}
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>
</head>
<body>
<div class="megamenu">
<ul>
<li><a href="#">INICIO</a></li>
<li><a href="#">QUIENES SOMOS</a></li>
<li class="downservices"><a href="#">SERVICIOS</a></li>
<div class="servicesdropped">
<ul class="middle">
<h3>Insectos tipicos</h3>
<li><a href="#">Cucarachas</a></li>
<li><a href="#">Hormigas</a></li>
<li><a href="#">Pulgas o Garrapatas</a></li>
<li><a href="#">Moscas o Mosquitos</a></li>
<li><a href="#">Mosquitas</a></li>
<li><a href="#">Arañas</a></li>
</ul>
<ul class="right">
<h3>Insectos atipicos</h3>
<li><a href="#">Termitas o Bichos taladro</a></li>
<li><a href="#">Vinchucas</a></li>
<li><a href="#">Grillos</a></li>
<li><a href="#">Alacranes</a></li>
<li><a href="#">Abejas o Avispas</a></li>
</ul>
<ul class="right">
<h3>Aves y Mamiferos</h3>
<li><a href="#">Ratas, Ratones o Lauchas</a></li>
<li><a href="#">Murciélagos</a></li>
<li><a href="#">Palomas</a></li>
</ul>
<ul class="right">
<h3>Locales e Instituciones</h3>
<li><a href="#">Locales de comidas</a></li>
<li><a href="#">Colegios</a></li>
<li><a href="#">Clubes</a></li>
</ul>
</div>
<li><a href="#">PREGUNTAS FRECUENTES</a></li>
<li><a href="#">CONTÁCTO</a></li>
</ul>
</div>
</body>
</html>1:Al deslizar el mouse (rollover) por encima de los botones del menu estos cambian a color celeste, uno de ellos , el botón "servicios" , contiene un megamenu, me gustaría que el megamenu de desplegara cuando le paso el mause por ensima, por que hasta el momento se despliega solo haciéndole clic. ¡como puedo lograr este efecto? he probado lo siguiente pero no me funciona:
Reemplace este:
Código PHP :
<script type="text/javascript">
$(document).ready(function(){
$(".downservices").click(function(){
$(".servicesdropped").toggle("fast");
});
});
</script>Por este:
Código PHP :
<script type="text/javascript">
$(document).ready(function(){
$(“.downservices”).mouseenter(function() {
$(this).parent().find(“.servicesdropped”).slideDown(“fast”).show();
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(“.servicesdropped”).slideUp(“fast”);
}); }); });
</script>2: El mismo no deja encendidos los botones de la pagina que esta activa. No entiendo mucho de css y seguro algo debe estar pasando con eso o alguna regla me falta. Explico mejor, cuando pasamos por encima de los botones en la barra de menús de la web los mismos cambian a color celeste (rollover), al ingresar linkea a la pagina que hayamos ingresado pero el color celeste no se queda en el botón activo , necesito que se quede de color celeste mostrando que nos encontramos en esa pagina. ¿Dónde esta el error o que me falta?
Muchas gracias!!
