Выдвижная меню с помощью CSS и Javascript

Question

Я хотел бы создать меню, как на скриншоте

1. красная стрелка означает, что при нажатии на кнопку будет либо показать/ скрыть меню

2. оранжевая стрелка означает, что, когда меню скрыть окно должно увеличить ширину, и наоборот

До сих пор я создал HTML, проблема

1) скользящий эффект, кажется, не совсем то, что я ожидал, что слайд после содержания шоу, но то, что я хотел бы достичь, это скрыть и слайд в то же время

  $("#menu_btn").on("click", function() { 
       var menu = $("#left_menu #btn"); 
       if (menu.css('display') !== "none") { 
        $("#left_menu #btn").hide("slide", {direction: "left"}, 1000); 
       } else { 
        $("#left_menu #btn").show("slide", {direction: "right"}, 1000); 
       } 
      }); 

2) как объединить код для расширения/уменьшения ширины после эффекта скольжения, и блок является абсолютным в контейнере, можно сохранить тот же верх после расходуют контента/уменьшить?

$(".content #bg").css("width","600"); 
$(".content #bg").css("width","1000"); 

Спасибо за помощь.

Answer 1

Нечто подобное может работать: https://jsfiddle.net/7k4kdmxu/4/

CSS:

.container{width:100%; margin:0 auto;} 
nav{ 
    width:20%; 
    float:left; 
    background:#efefef; 
} 
.openNav{ width:20%;} 
#content.openNavContainer{ width:80%!important;} 
.closeNav{width:10%;} 
#content.closeNavContainer{ width:90%!important;} 
#content{ 
    width:80%; 
    float:right; 
    background:#e9e9e9; 
} 
nav ul {list-style:none;} 
nav ul li{list-style:none; display:block;} 

HTML

<div class="container"> 
<nav> 
    <a href="#" id="open">Open -></a> 
    <ul> 

     <li><a href="#">HOME</a></li> 
<li><a href="#">ABOUT</a></li> 
<li><a href="#">OUT VALUE</a></li> 
<li><a href="#">SEASONAL</a></li> 
     <li><a href="#">CONTACT</a></li> 
    </ul> 
    <a href="#" id="close"><- Close </a> 
</nav> 
    <div id="content"><p>Body Content Can Go Here</p></div> 
</div> 

JS/JQ

$(function(){ 
$("#open").click(function(){ 

    $("nav").addClass("openNav"); 
    $("nav").removeClass("closeNav"); 
    $("#content").addClass("openNavContainer"); 
    $("#content").removeClass("closeNavContainer"); 
}); 
$("#close").click(function(){ 
     $("nav").addClass("closeNav"); 
     $("nav").removeClass("openNav"); 
    $("#content").addClass("closeNavContainer"); 
    $("#content").removeClass("openNavContainer"); 
    }); 
});