All geek questions in one place

Create an animation from left to right

I need to create an animation that makes the menu appear on the left side of the screen. This animation should be launched with the click of a button. The contents of the menu should restore the width of the main page. 55%

JSFiddle Demo

In the previous link, you can move the menu and button to the left. At the beginning, the menu (with the "link" elements) should be hidden, and the button .glyhiconshould be in the very left corner of the page. When you click this button, the menu and the button should move to the right and restore the main page. The problem is that I do not know how to do this. (I managed to move the menu by changing the structure, but I could not move the button.) Here is my HTML code 55%

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

?

+4
2

CSS- javascript, :checked display:none, label #left-menu, ~:

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>

jQuery, toggleFlag, true, left 0, - false left -55% - , op , 55% , .left-menu , .

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>
+2

, , jquery .

isActive ,

if (isActive) {


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


isActive = !isActive;


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

, , ,

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

- :

$(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');
    }
  });
});

, , , <nav> menu-open :

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

, -

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


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

..

, , , , , , ? ?

+1

Source: https://habr.com/ru/post/1625030/

More articles:


All Articles