Выдвиньте боковую панель меню

Question

Я пытаюсь научиться создавать слайд-меню. До сих пор у меня есть базовый HTML и CSS. Тем не менее, я не уверен в лучшем подходе к написанию jQuery. В настоящее время он скользит, но не будет скользить назад. Или я могу использовать переход CSS?

<div class="side-menu"> 
    MENU 
</div> 

<div class="page"> 

    <a href="#" id="slideMenu"><i class="fa fa-bars"></i></a> 

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p> 

</div> 

Мой CSS:

div.side-menu { 
    width:260px; 
    height:400px; 
    background:#202020; 
    position:absolute; 
    left:-260px; 
    top:0px; 
} 

div.page { 
    width:100%; 
    height:100%; 
    position:relative; 
    top:0; 
    left:0px; 
    padding:4%; 
    padding-top:100px; 
    background:#f4f4f4; 
} 


div.page a { 
    display:block; 
    width:50px; 
    height:50px; 
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;  
    background:#666; 
    position:absolute; 
    top:20px; 
    left:4%; 
    font-size:24px; 
    text-align:center; 
    text-decoration:none; 
    padding-top:7px; 
    color:#fff; 
    outline:none; 
} 

p { 
    color:#555; 
    font-size:18px; 
    font-weight:normal; 
} 

Мой JQuery:

<script> 
    $(document).ready(function() { 

     $("a").click(function() { 
     $(".page").animate({"left": "260px"},"fast"); 
     }); 

    }); 
    </script> 

Answer 1

$ (документ) .ready (функция() {

$("a").click(function() { 
     if($(".page").css("left") == "0px"){ 
      $(".page").animate({"left": "260px"},"fast"); 
     } 
     else{ 
      $(".page").animate({"left": "0px"},"fast"); 
     } 
    }); 

}); 

heres a fiddle

Answer 2

делать такие звонки гораздо быстрее, обрабатывать целое как целое, а не как строка ...
вы также можете заменить «быстрый» с 200, потому что нормальное время составляет 400 мс и 200 мс «быстрых»

$(document).ready(function() { 

    $("a").click(function() { 
     if(parseInt($(".page").css("left")) == 0){ 
      $(".page").animate({left: 260},200); 
     } 
     else{ 
      $(".page").animate({left: 0},200); 
     } 
    }); 

}); 

Answer 3

Дайте это Попробуйте.

http://jsfiddle.net/qdp7j8mq/

--------------- CSS --------------

div.side-menu { 
    width:260px; 
    height:400px; 
    background:#202020; 
    position:absolute; 
    left:-260px; 
    top:0px; 
    z-index:99999; 
     -webkit-transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -ms-transition: all .32s ease-in-out; 
    -o-transition: all .32s ease-in-out; 
    transition: all .32s ease-in-out; 
} 

.nav-active{ 
    left: 0px !important; 
     -webkit-transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -ms-transition: all .32s ease-in-out; 
    -o-transition: all .32s ease-in-out; 
    transition: all .32s ease-in-out; 
} 

.body-active{ 
    left: 260px !important; 
     -webkit-transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -ms-transition: all .32s ease-in-out; 
    -o-transition: all .32s ease-in-out; 
    transition: all .32s ease-in-out; 
} 

div.page { 
    width:100%; 
    height:100%; 
    position:relative; 
    top:0; 
    left:0px; 
    padding:4%; 
    padding-top:100px; 
    background:#f4f4f4; 
     -webkit-transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -ms-transition: all .32s ease-in-out; 
    -o-transition: all .32s ease-in-out; 
    transition: all .32s ease-in-out; 
} 


#slideMenu { 
    display:block; 
    width:50px; 
    height:50px; 
    -o-border-radius: 100%; 
    -webkit-border-radius: 100%; 
    -moz-border-radius: 100%; 
    border-radius: 100%;  
    background:#666; 
    position:absolute; 
    top:20px; 
    left:4%; 
    font-size:24px; 
    text-align:center; 
    text-decoration:none; 
    padding-top:7px; 
    color:#fff; 
    outline:none; 
     -webkit-transition: all .32s ease-in-out; 
    -moz-transition: all .32s ease-in-out; 
    -ms-transition: all .32s ease-in-out; 
    -o-transition: all .32s ease-in-out; 
    transition: all .32s ease-in-out; 
} 

p { 
    color:#555; 
    font-size:18px; 
    font-weight:normal; 
} 

---- ----------- jQuery --------------

$(document).ready(function() { 

    $("#slideMenu").click(function() { 
    $(".page").toggleClass('body-active'); 
     $(".side-menu").toggleClass('nav-active'); 
    }); 

}); 

--------------- HTML - -------------

<div class="side-menu"> 
    MENU 
</div> 

<div class="page"> 

    <div id="slideMenu"><i class="fa fa-bars"></i></div> 

    <p>The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In this city, as stated in the _Hartford Times_, recently, we have five hundred liquor shops, and one million eight hundred and twenty-five thousand dollars were, last year, paid for intoxicating drinks. A cry, an appeal, came to me from the city, a few days since, after this wise: 'Our young men are going to destruction, and we want your influence, counsel, and prayers, to help save them.'"</p> 

</div> 

Это простой jQuery. когда вы нажимаете ссылку переключения навигация, она добавляет классы css в страницу и навигационное меню, чтобы сдвинуть их обоих влево. Это позволяет использовать ту же кнопку переключения, чтобы открыть и закрыть навигацию.

Я также бросил некоторые переходы CSS3, чтобы сгладить его.

Answer 4

Вы также можете достичь этого без использования jquery или javascript с осторожным использованием флажков и меток.

Как видно в этом учебнике https://www.youtube.com/watch?v=d4P8s-mkMvs