我有两个并排的内联块元素。如果我改变第二个的位置(右-300px),第一个保持不被第二个保持拉动。
如果您点击<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;
}
我的问题:左边的蓝色元素应该移动到右边的#34; main-nav&#34;感动了。
答案 0 :(得分:2)
您还需要将过渡和点击效果添加到导航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" );
});