Элемент изменения позиции позиции

Question

У меня есть два встроенных блока рядом. Если я меняю положение второго (правый -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; 
} 

Мой вопрос: Левый синий элемент должен перейти на правую сторону права «привычного nav "перемещается.

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"); 
});