Create an animation from left to the middle

Question

I need to create an animation which will make a menu appear from the left side of the screen. This animation should be started on a click on a button. The content of the menu should recover 55% of the width of the main page.

JSFiddle Demo

In the previous link you can the the menu and the button to move left. At the beginning the menu (with the "link" elements) should be hidden and the button .glyhicon should be at the very left of the page.
On click on this button the menu and the button should move to the right and recover 55% of the main page.
The problem is I don't know how to do this. (I managed to move the menu by changing the structure but I couldn't move the button.) Here is my HTML code

<div id="left-menu">
    <div id="map-menu" class="test">
      <nav class="menu_content">
        <ul>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
        </ul>
      </nav>
    </div>
    <div id="icon-menu" class="test">
      <button id="button_menu" class="js-menu menu" type="button">
        <span class="glyphicon glyphicon-map-marker"></span>
      </button>
    </div>
  </div>

CSS :

#left-menu {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
#map-menu, #icon-menu {
  display: inline-block;
  vertical-align: middle;
}

.menu {
  background: 0;
  float: left;
  margin: 2rem;
  height: 2.7rem;
  width: 3.5rem;
  z-index: 2;
  outline: 0;
  padding: 0;
  border: 0;
}

.menu_content{
  width: 60%;
  height: 100%;
  background: #eaeaea;
  position: fixed;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  transition: transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91), -webkit-transform 0.6s cubic-bezier(0.56, 0.1, 0.34, 0.91);
  padding-top: 6.2rem;
  z-index: 1;
}

.menu-open nav {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

javascript :

var isActive = false;

$('.js-menu').on('click', function() {
    if (isActive) {
        $(this).removeClass('active');
        $('#left_menu').removeClass('menu-open');
    /*$('#button_menu').removeClass('move-right');
    $('#button_menu').addClass('move-left');*/
    } else {
        $(this).addClass('active');
        $('#left_menu').addClass('menu-open');
    /*$('#button_menu').removeClass('move-left');
    $('#button_menu').addClass('move-right');*/
    }

    isActive = !isActive;
});

Could you help me to adapt or redo the animation please ?

Answer 1

Here's a pure CSS solution without any javascript by making use of the :checked status of a hidden checkbox with display:none, the label for that checkbox should be outside the #left-menu element so it is possible to target it using ~:

JS Fiddle 1

#button_menu {
  display: none;
}
.glyphicon {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
  background-size: 100%;
  position: fixed;
  left: 5px;
  top: 50%;
  transition: all 1s;
  cursor: pointer;
}
#left-menu {
  background-color: orange;
  position: fixed;
  left: -100%;
  width: 55%;
  top: 50%;
  transition: all 1s;
}
#button_menu:checked + .glyphicon {
  left: 55%;
  transition: all 1s;
}
#button_menu:checked ~ #left-menu {
  left: 0;
  transition: all 1s;
}
.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

<input type="checkbox" id="button_menu" class="js-menu">
<label for="button_menu" class="glyphicon"></label>
<div id="left-menu">
  <div id="map-menu" class="test">
    <nav class="menu_content">
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </nav>
  </div>
</div>

---

and here's a simple jQuery solution, where basically we have a variable as a triggering flag toggleFlag, if its value is true the left value is 0, while if the triggering flag value is false then the left value is -55% -which is the menu width as the op said it takes 55% of the screen-, then we animate the .left-menu dependign on the left value, and we need to negate the value of the triggering flag.

JS Fiddle 2

var menuIcon = $('.glyphicon'),
  leftMenu = $('#left-menu'),
  toggleFlag = true;

menuIcon.on('click', function() {
  var leftVal = (toggleFlag) ? '0' : '-55%';
  $('#left-menu').animate({'left': leftVal }, 700);
  toggleFlag = !toggleFlag;
});

.glyphicon {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-image: url('https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
  background-size: 100%;
  position: absolute;
  right: -45px;
  top: 5px;
  cursor: pointer;
}
#left-menu {
  background-color: orange;
  position: fixed;
  left: -55%;
  width: 55%;
  top: 50%;
}
.slideIt {
  color: red;
}
.menu_content ul {
  margin: 0;
  list-style: none;
  padding: 0;
}
.menu_content ul li {
  padding: 20px 5px;
  font-size: 2rem;
}
.menu_content ul li:hover {
  background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="left-menu">
  <span class="glyphicon"></span>
  <div id="map-menu" class="test">
    <nav class="menu_content">
      <ul>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
        <li>Link</li>
      </ul>
    </nav>
  </div>
</div>

Answer 2

There a couple things with your example and fiddle, to start it helps to have jquery loaded in the fiddle to mess around.

Next isActive is not only not defined but unnecessary

if (isActive) {

should be replaced by

if ($(this).hasClass('active')) {

and

isActive = !isActive;

can be removed completely

next you becareful with your underscores and hyphens

$('#left-menu') != $('#left_menu')

Please also wrap it all in a document ready so it can be attached when the page loads

$(document).ready(function () {
  // code
});

so with the fixes you can have something like:

$(document).ready(function () {
  $('.js-menu').on('click', function() {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $('#left-menu').removeClass('menu-open');
    } else {
      $(this).addClass('active');
      $('#left-menu').addClass('menu-open');
    }
  });
});

Now to move your button, the problem is you're adding the transform to the <nav> in the menu-open class with :

.menu-open nav {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

So one way to fix that would be to also add it to your button

.menu-open #icon-menu {
  -webkit-transform: translateX(55%);
  transform: translateX(55%);
}

OR

.menu-open .active {
  -webkit-transform: translateX(55%);
  transform: translateX(55%);
}

I'll leave you to do the slide animation and so on.

There's a couple ways to make it better than this but with what you have for now this'll probably help you get a start on it? Maybe?