Animate Foundation 5 Иконка Offcanvas

Question

i googled пол дня и попробовал несколько решений, но ничего не работало для меня. Итак, вы, ребята, мой последний шанс :( Я создал новый сайт, используя foundation5. Для мобильной версии я использую offcanvas. Сейчас я пытаюсь заменить гамбургер offcanvas или хотя бы оживить его. -of коробки стиль не очень дружелюбных, как оно не указывает на то, что он также может быть использован, чтобы закрыть offcanvas снова

Я lookig что-то как здесь:. http://sarasoueidan.com/blog/navicon-transformicons/

Я Allready пробовал как

.menu-icon.arrow.close { 
    transform: scale3d(.8,.8,.8); 
} 

.menu-icon.arrow.close .lines{ 
    &:before, 
    &:after { 
     top: 0; 
     width: $button-size/1.8; 
    } 

    &:before { transform: rotate3d(0,0,1,40deg); } 
    &:after { transform: rotate3d(0,0,1,-40deg); } 
} 

с такой кнопкой

<section class="left-small"> 
     <a class="left-off-canvas-toggle menu-icon lines-button arrow arrow-left" role="button" aria-label="Toggle Navigation"><span class="lines"></span></a> 
    </section> 

Любые предложения, что я должен делать?

Answer 1

Вот jsfiddle с использованием классов CSS, принятые по ссылке вы предоставили и некоторые Javascript, чтобы добавить/удалить «закрыть» класс http://jsfiddle.net/3cc3T/6/, чтобы получить анимацию

$(".lines-button").click(function(){ 
    $(this).toggleClass('close'); 
}); 
$(".exit-off-canvas").click(function(){ 
    $("#startupButton").removeClass("close"); 
});