Yani burada problem animasyon 0 auto;Bağıl konum ve jQuery
Sorunun göreceli konumlandırmadan ve kullandığım Jquery .animate işlevinden kaynaklandığını düşünüyorum. Yani aynı sonucu elde etmek için başka bir yol arıyorum! 0 auto;: Burada
http://jsfiddle.net/jwsh7/ sorun İLE keman var
P.S.Remove marjı (görüntü i her konuda bir sınır koymak içermesini olamazdı, sorun yeşil sınırlanmıştır div ile) o ı o istediğiniz gibi çalışacak göremeyecek
CSS:
body {
margin: 0;
padding:0;
}
#content {
width: 625px;
border: 1px solid red;
}
#content div.slider
{
position:relative;
width: 50px;
height: 100px;
background-image:url(images/rond.png);
background-repeat:no-repeat;
background-position:center;
background-size:cover;
z-index: 2;
top: 110px;
left: 25px;
border: 1px solid red;
}
.menu
{
color:#00C;
font-size:18px;
font-family:"OnomatoShark!";
position:absolute;
width:50px;
height:100px;
background-image:url(images/ligne_barre.png);
background-position:center;
background-repeat:no-repeat;
cursor:pointer;
border: 1px solid red;
}
.menu p
{
width: 150px;
float: left;
position:absolute;
top: -25px;
left: 10px;
}
.menu p:hover
{
width: 150px;
float: left;
position:absolute;
top: -25px;
color:red;
}
#barre
{
position:relative;
width:600px;
height:28px;
background-image:url(images/ligne.png);
background-position:center;
list-style-type:none;
top: 25px;
padding:0;
border: 1px solid red;
}
#sousMenu1 {
margin: 0;
padding: 0;
margin-top: 90px;
background-image:url(images/sousmenu.png);
background-position:left;
background-repeat:no-repeat;
overflow:hidden;
float:left;
height:150px;
display:none;
text-align:left;
}
#sousMenu2 {
margin: 0;
padding: 0;
margin-top:90px;
margin-left: 10px;
background-image:url(images/sousmenu.png);
background-position:left;
background-repeat:no-repeat;
overflow:hidden;
float:left;
height:150px;
display:none;
}
#sousMenu3 {
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 10px;
background-image:url(images/sousmenu.png);
background-position:left;
background-repeat:no-repeat;
height:150px;
width: 250px;
overflow:hidden;
float:left;
display:none;
}
#sousMenu4 {
margin: 0;
padding: 0;
margin-top: 90px;
margin-left: 10px;
background-image:url(images/sousmenu.png);
background-position:left;
background-repeat:no-repeat;
height:150px;
overflow:hidden;
float:left;
display:none;
}
ol {
text-align:left;
padding-top: 20px;
}
ol a{
text-decoration:none;
}
HTML:
<div class='slider'></div>
<ul id="barre">
<li class="menu" id="option1"><p>Accueil</p></li>
<li class="menu" id="option2">
<p>Animation</p>
<ul class="sous-menu" id="sousMenu1">
<ol><a href="#">Histoire</a></ol>
<ol><a href="http://google.com">Avancées technologiques</a></ol>
</ul>
</li>
<li class="menu" id="option3">
<p>Techniques</p>
<ul class="sous-menu" id="sousMenu2">
<ol><a href="#">Rotoscopie</a></ol>
<ol><a href="#">Trait</a></ol>
</ul>
</li>
<li class="menu" id="option4">
<p>Fondements</p>
<ul class="sous-menu" id="sousMenu3">
<ol><a href="#">Processus de production</a></ol>
<ol><a href="#">Interpolation</a></ol>
<ol><a href="#">Guide de mouvement</a></ol>
</ul>
</li>
<li class="menu" id="option5"><p>Principes</p></li>
<li class="menu" id="option6"><p>Effets Avancés</p>
<ul class="sous-menu" id="sousMenu4">
<ol><a href="#">Rotation</a></ol>
</ul>
</li>
</ul>
</div>
VE JS:
<script type="text/javascript">
$(document).ready(function() {
function sousmenuCache(){
$("#sousMenu1").hide("fast");
$("#sousMenu2").hide("fast");
$("#sousMenu3").hide("fast");
$("#sousMenu4").hide("fast");
}
$("#option1").click(function(){
sousmenuCache();
});
$("#option2").click(function(){
sousmenuCache();
$("#sousMenu1").delay(300).show("slow");
});
$("#option3").click(function(){
sousmenuCache();
$("#sousMenu2").delay(300).show("slow");
});
$("#option4").click(function(){
sousmenuCache();
$("#sousMenu3").delay(300).show("slow");
});
$("#option5").click(function(){
sousmenuCache();
});
$("#option6").click(function(){
sousmenuCache();
$("#sousMenu4").delay(300).show("slow");
});
// Centrer la barre dans le container
var middleOption = ($("#barre").height() - ($("#option1").height() - $("#barre").height()));
// Création des options du menu
var leftOption = -70;
$("#content #barre li").each(function() {
$(this).css('top',''+middleOption+'px');
$(this).css('left',''+(leftOption + 90)+'px');
leftOption += 90;
});
$(function(){
$(".menu").click(function() {
var middleSlider = (($(".slider").width() - $("#option1").width()) * 0.5);
$(".slider").animate({ left: ($(this).offset().left - middleSlider)
});
});
});
TweenMax.set("#content", {x:300});
});
</script>
Teşekkürler x 1000 bütün bir öğleden sonra bunu düzeltmeye çalıştım. –
Evet, bazen sadece taze göze ihtiyacımız var. – dfsq