Warum ist das hinzufügen von 'margin: 0 auto", um ein slider-Menü bricht es?
Ich bin momentan dabei, ein slider-Menü und alles war in Ordnung arbeiten, bis ich versuchte, um es mit margin: 0 auto
;
Ich stark denke, das problem kommt von der relativen Positionierung und der jQuery .animate
- Funktion, die ich verwende. Also ich bin auf der Suche nach einem anderen Weg das gleiche Ergebnis zu erzielen!
Hier eine Geige mit dem problem
http://jsfiddle.net/jwsh7/ (Bild konnte nicht zählen, also setze ich eine Grenze auf alles, das problem ist mit der grünen grenzt div)
Entfernen margin: 0 auto;
zu sehen, dass es funktioniert wie ich es will.
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:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<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>
<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>
InformationsquelleAutor Nyko Gagné | 2013-03-19
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie center
#content
Sie haben zu berücksichtigen, zusätzliche offset, wenn dabei die animation. Schwer zu erklären, werfen Sie einen Blick auf diese aktualisierte fiddle:http://jsfiddle.net/jwsh7/1/
Das problem ist, dass Sie mit beiden margin und position um position auf die Folie und Sie sind widersprüchlich. Um es dead center, verwenden Sie ein margin-left, das ist -0.5 * Breite des Schiebers, und klicken Sie dann Links:50%;