Hace varios días que trato de solucionar mi problema y no doy con el bug.
tengo un menú superior animado con java y el problema es cuando cierro la ventana modal se desplaza el menú hacia arriba.
pueden ver un ejemplo aquí http://designwebargentina.com.ar/proyecto/
html
Código:
style.css<!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" />
<title>Documento sin tÃ*tulo</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/colorbox.css" media="screen"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/jquery.colorbox.js"></script>
</head>
<body>
<!-- Menu Superior-->
<div align="center" class="container">
<ul id="menu">
<li>
<a id="link_tendencias" href="">
<span class="title">Tendencias</span>
<span class="description">Ultimos cortes de cabello</span>
</a>
</li>
<li>
<a id="link_servicios" class='nuestros_servicios' href="#nuestros_servicios">
<span class="title">Servicios</span>
<span class="description">Servicios que te brindamos</span>
</a>
</li>
<li>
<a id="link_galeria" href="#">
<span class="title">GalerÃ*a</span>
<span class="description">Fotos de Pina Estilista</span>
</a>
</li>
<li>
<a id="link_contacto" class='contacto' href="">
<span class="title">Contacto</span>
<span class="description">Contactá a nuestro Staff</span>
</a>
</li>
</ul>
</div>
<!-- Contenidos de Pagina -->
<div style='display:none'>
<!-- Contenido Servicios -->
<div id='nuestros_servicios' style='padding:10px; background:#fff;'>
<p><strong>SERVICIOS</strong></p><br />
<div class="contenedor_texto">
<div class="texto_servicios">
<ul><h2>Servicios</h2><br />
<li>Corte de pelo<br />
<li>Peinados de novia y quince años<br />
<li>Tintura<br />
<li>Reflejos<br />
<li>Permanente<br />
<li>Permanente de pestañas<br />
<li>Pach<br />
<li>Color<br />
<li>Iluminación<br />
<li>Mechas artisticas<br />
<li>Vanguardias</li>
</ul>
</div>
<div class="texto_servicios_adicionales">
<ul><h2>Servicios adicionales</h2><br />
<li>ManicurÃ*a<br />
<li>Belleza de pies<br />
<li>PedicurÃ*a<br />
<li>Depìlación Sistema español<br />
<li>Maquillajes sociales<br />
<li>Extensiones<br />
<li>Uñas esculpidas<br />
<li>Especialista en colocación de cortinas<br />
<li>CosmetologÃ*a<br />
<li>Reiki</li>
</ul>
</div>
</div>
<!-- Fin Contenido Servicios -->
</div>
</div>
<!-- Fin de Contenidos de Pagina -->
<!-- JavaScript -->
<script type="text/javascript">
$(document).ready(function(){
$(".contacto").colorbox({iframe:true, width:"50%", height:"85%"});
$(".nuestros_servicios").colorbox({inline:true, width:"70%"});
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("");
return false;
});
});
</script>
<script type="text/javascript">
$(function() {
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-15px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'-10px'
}, 400);
},
function () {
var $this = $(this);
$('a',$this).stop(true,true).animate({
'bottom':'-95px'
}, 300);
$('i',$this).stop(true,true).animate({
'top':'50px'
}, 400);
}
);
});
</script>
<!-- Fin JavaScript -->
</body>
</html>
Código:
*{
margin:0;
padding:0;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
color: #FFF;
}
body{
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
height:600px;
background-image: url(../images/fondo.jpg);
background-position:center;
background-repeat:repeat-y;
background-color:#ff6600;
}
.contenedor_texto{
padding:20px;
width:820px;
height:300px;
margin:0 auto;
position:relative;
overflow:hidden;
color: #000;
text-indent:0px;
letter-spacing:1px;
}
.texto_servicios{
padding:10px;
position:relative;
float:left;;
width:350px;
height:300px;
}
.texto_servicios_adicionales{
padding:10px;
position:relative;
float:left;;
width:350px;
height:300px;
}
.contenido{
padding:20px;
width:820px;
height:150px;
margin:0 auto;
position:relative;
overflow:hidden;
border:3px solid #fff;
background-color: #069;
text-shadow:1px 1px 1px #000;
color: #fff;
text-indent:0px;
letter-spacing:1px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:20px 20px 20px 20px;
}
.imag_logo{
background-image:url(../images/logo.png);
background-repeat:no-repeat;
width:900px;
height:150px;
margin:0 auto;
position: fixed;
}
.container{
width:900px;
height:150px;
margin:0 auto;
position: relative;
overflow:hidden;
border:3px solid #fff;
background-color: #069;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
-moz-border-radius:0px 0px 20px 20px;
-webkit-border-bottom-left-radius:20px;
-webkit-border-bottom-right-radius:20px;
border-radius:0px 0px 20px 20px;
}
ul#menu{
list-style:none;
position:absolute;
bottom:0px;
left:10px;
font-size:30px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
color:#999;
letter-spacing:1px;
}
ul#menu li{
float:left;
margin:0px 12px 0px 0px;
}
ul#menu a{
cursor:pointer;
position:relative;
float:left;
bottom:-95px;
line-height:20px;
width:210px;
}
ul#menu span.title{
display:block;
height:24px;
text-shadow:1px 1px 1px #000;
color: #fff;
text-indent:0px;
letter-spacing:1px;
}
ul#menu span.description{
width:150px;
height:80px;
background-color: #204875;
border:3px solid #fff;
color:#fff;
display:block;
font-size:24px;
text-shadow:1px 1px 1px #000;
padding:10px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
box-shadow:1px 1px 6px #000;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
ul#menu a:hover span.description{
background-color:#ff6600;
}
ul#menu a:hover span.title{
color:#fff;
}
