更改位置拉元素

Question

我有两个内联块元素并排。如果我改变第二个位置（右-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-导航“被移动。

Answer 1

您还需要向导航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"); 
});