Buonasera, ho un problema con un menù che ha un'animazione fatta con jQuery. Praticamente questo menù al passaggio del mouse sul link si allunga verso il basso con effetto easing easeOutBounce, tuttavia questo effetto fa si che nel mio sito il[*] allungato mi vada a finire dietro (quindi al di sotto) di due dive che si trovano immediatamente sotto al menù. Spero che possiate aiutarmi a risolvere il problema. Questo è il codice html:
e questi sono i css:Codice PHP:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
@import url("style.css");
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function(){
$("#menu li").mouseover(function(){
$(this).stop().animate({height:'150px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("#menu li").mouseout(function(){
$(this).stop().animate({height:'20px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
</script>
</head>
<body>
<div id="container">
<div id="logo"></div>
<div id="header">
<ul id="menu">
<li id="home">[url=""]<span>Home</span>[/url][img]images/home.png[/img]
<li id="azienda">[url=""]<span>L'azienda</span>[/url][img]images/azienda.png[/img]
<li id="progetti">[url=""]<span>I progetti</span>[/url][img]images/progetto.png[/img]
<li id="termografia">[url=""]<span>Termografia</span>[/url]
<li id="dove_siamo">[url=""]<span>Dove siamo</span>[/url][img]images/dovesiamo.png[/img]
<li id="contatti">[url=""]<span>Contatti</span>[/url][img]images/contatti.png[/img]
[/list]
</div>
<div id="centro">
<div id="menu_verticale">
<ul id="servizi">
[*][url=""]Servizio1[/url]
[*][url=""]Servizio2[/url]
[*][url=""]Servizio3[/url]
[*][url=""]Servizio4[/url][/list]
</div>
<div id="testo">
[b]Benvenuti![/b]
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Codice PHP:body {
background-color: black;
}
#container {
width: 800px;
height: 700px;
margin: 0 auto;
position: relative;
border: 1px solid black;
background: url("images/repeatbg.png");
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
#logo {
width: 800px;
height: 200px;
background-image: url("images/header.png");
border-bottom: 2px solid black;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
border-radius:20px 20px 0px 0px;
}
#header {
width: 800px;
height: 20px;
border-bottom: 2px solid black;
position: relative;
}
#menu {
width: 800px;
list-style: none;
position: absolute;
top: 0px;
left: 0px;
padding: 0px 0px 0px 20px;
margin:0px 0px 0px 0px;
}
#menu li {
float:left;
height: 20px;
width: 120px;
margin:0px 5px 0px 0px;
overflow: hidden;
background-color: #727272;
position: relative;
}
#menu li:hover {
font-weight:bold;
color:white;
}
#menu li img {
position: absolute;
left: 10px;
top: 40px;
}
#menu a {
display: block;
text-decoration: none;
text-align: center;
font-size: 14px;
color: white;
text-shadow:1px 1px 1px #000;
}
#menu li a span {
display: block;
margin: 2px 0px 0px 10px;
width: 100px;
}
#home:hover {
background-color: #db0000;
}
#home span:hover {
background-color:#ff6666;
}
#azienda:hover {
background-color: #66d800;
}
#azienda span:hover {
background-color: #b8d88f;
}
#progetti:hover {
background-color: #00dbde;
}
#progetti span:hover {
background-color: #badede;
}
#termografia:hover {
background-color: #5a0bf4;
}
#termografia span:hover {
background-color: #c4abf4;
}
#dove_siamo:hover {
background-color: #c80aea;
}
#dove_siamo span:hover {
background-color: #e4c1ea;
}
#contatti:hover {
background-color: #ea990a;
}
#contatti span:hover {
background-color: #eacd9b;
}
#centro {
width: 800px;
height: 430px;
position: relative;
}
#menu_verticale {
width: 150px;
height: 350px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
border: 2px solid black;
position: relative;
left: 20px;
top: 40px;
background-color: white;
}
#servizi {
padding: 0px;
position: absolute;
top: 20px;
left: 10px;
}
#servizi li {
display: block;
margin: 0px 0px 10px 0px;
width: 120px;
height: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow:1px 1px 2px #000;
-webkit-box-shadow:1px 1px 2px #000;
background-color: #bcbcbc;
}
#servizi li:hover {
background-color: #727272;
}
#servizi a{
text-decoration:none;
font-size: 14px;
display: block:
height: 20px;
color: white;
text-shadow:1px 1px 1px #000;
padding: 0px 0px 0px 5px;
}
#testo {
width: 590px;
height: 350px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow:1px 1px 6px #000;
-webkit-box-shadow:1px 1px 6px #000;
border: 2px solid black;
position: absolute;
right: 20px;
top: 40px;
background-color: white;
}
#testo p {
padding: 20px;
font-size: 14px
}
#footer {
width: 800px;
height: 50px;
border-top: 2px solid black;
}
Rispondi quotando
