我有两个并排的行内 block 元素。如果我要更改第二个的位置(右 -300 像素),第一个会保留并且不会被第二个拉动。
如果您正在单击 <div class="navigation"></div>
<nav class="main-nav">
得到 right: -300px;
但是蓝色背景的第一个元素不会移动到右侧。
看看:FIDDLE
<section class="sidebar">
<div class="navigation">
</div><nav class="main-nav">
<ul>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
</ul>
</nav>
</section>
这是我用于切换类的 jQuery:
$( ".navigation" ).click(function() {
$( ".main-nav" ).toggleClass( "open" );
});
.sidebar {
position: fixed;
top: 0;
right: 0;
z-index: 99;
}
.sidebar .navigation {
height: 130px;
width: 130px;
background: #0077b4;
position: relative;
display: inline-block;
cursor: pointer;
float: left;
}
.main-nav {
display: inline-block;
position: relative;
right: 0;
transition: right 0.3s linear;
-webkit-transition: right 0.3s ease;
-moz-transition: right 0.3s ease;
-o-transition: right 0.3s ease;
}
.main-nav.open {
right: -300px;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul li {
float: left;
height: 130px;
width: 130px;
background: #000;
position: relative;
}
.main-nav ul li a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.main-nav ul li span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
color: #fff;
}
我的问题:左边的蓝色元素应该移动到右侧“main-nav”被移动的右侧。
最佳答案
您还需要向导航 div 添加过渡和点击效果。查看更新后的 fiddle
HTML
<section class="sidebar">
<div class="navwrap">
<div class="navigation">
</div><nav class="main-nav">
<ul>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
<li><a href="#"><span>Lorem</span></a></li>
</ul>
</nav>
</div>
</section>
CSS
.sidebar {
position: fixed;
top: 0;
right: 0;
z-index: 99;
}
.sidebar .navigation {
height: 130px;
width: 130px;
background: #0077b4;
position: relative;
display: inline-block;
cursor: pointer;
}
.navwrap {
display: inline-block;
position: relative;
right: 0;
transition: right 0.3s ease;
-webkit-transition: right 0.3s ease;
-moz-transition: right 0.3s ease;
-o-transition: right 0.3s ease;
}
.main-nav {
display: inline-block;
position: relative;
right: 0;
}
.open {
right: -300px;
}
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav ul li {
float: left;
height: 130px;
width: 130px;
background: #000;
position: relative;
}
.main-nav ul li a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.main-nav ul li span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
color: #fff;
}
JQuery
$( ".navwrap" ).click(function() {
$( this ).toggleClass( "open" );
});
关于jquery - 改变位置拉动元件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33554041/