为什么添加'margin: 0 auto'滑块菜单会破坏它
Why is adding 'margin: 0 auto' to a slider menu breaks it?
我正在创建一个滑块菜单,一切都很好,直到我试图用margin: 0 auto
居中;
我强烈认为这个问题来自于相对定位和我使用的jQuery .animate
函数。所以我正在寻找另一种方法来达到同样的结果!
这里有一个问题
http://jsfiddle.net/jwsh7/(图片不能包含在内,所以我给所有东西都加了边框,问题是绿色边框的div)
删除margin: 0 auto;
,看看它的工作,因为我想要它。
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;
}
<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>
当你居中#content
时,你必须在做动画时考虑额外的偏移量。很难解释,看看这个更新的小提琴:
var fix = ($(document).width() - $('#content').width()) * .5; // <-- need to subtract this
$(".menu").click(function () {
var middleSlider = ($(".slider").width() - $("#option1").width()) * 0.5;
$(".slider").animate({
left: ($(this).offset().left - middleSlider - fix)
});
});
问题是,您正在使用边距和位置来定位幻灯片,并且它们是冲突的。要使它处于死心位置,请使用left - margin-left:50%;
#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: 50%;
border: 1px solid green;
margin-left:-25px;
}
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- angular的下拉菜单
- 使用JQuery的动态上下文菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- Div根据<选择>菜单
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 将JavaScript弹出菜单转换为警报框
- 调整屏幕大小后不显示子菜单
- 固定位置菜单时滚动,直到它击中一个相对容器的底部
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- Jquerymobile-使用javascript创建选择菜单
- 如何将JSON转换为HTML下拉菜单
- 滚动后保持固定的菜单栏不起作用
- 为什么添加'margin: 0 auto'滑块菜单会破坏它
- 我如何删除margin-top仅为每个主菜单的第二级子菜单