I want to make a pull-out menu (hamburger-menu) without using third-party plug-ins. And immediately the first problem: how to move the <div> out of the displayed page? As far as I can imagine, at the touch of a button, I will, through a JavaScript animation, move this <div> to the visible area.

  • code would add - stackanon
  • it is not yet, I just think over the principle. - Hokov Gleb

1 answer 1

Add a list that we want to hide \ show, smoothness (set your time):

 transition: all .27s ease-in-out;

And add the transform transform: translateX(-100%); . The list will be made for the body.

With a click, we add the active class 'on' whole block nav , during which the transformation changes its value from -100% to 0%:

 transform: translateX(0%);

Example:

 $('.trigger').on('click', function(){ var nav = $(this).closest('nav'); if(!nav.hasClass('on')){ nav.addClass('on'); }else { nav.removeClass('on'); } }); 
 nav ul { width: 200px; background: tomato; color: #fff; padding: 1rem; margin: 0; list-style-type: none; position: absolute; transition: all .27s ease-in-out; transform: translateX(-100%); } nav.on ul { transform: translateX(0%); } /* Доп. стилизация для наглядности */ body, html { padding: 0; margin: 0; } nav { position: relative; } nav button { padding: 1rem; position: absolute; right: 0; top: 20px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <nav> <button class="trigger">btn</button> <ul> <li>item-1</li> <li>item-2</li> <li>item-3</li> </ul> </nav> <main> </main>

  • Thank you for taking the time to write an answer! Could you give a brief comment on how the task was solved? As far as I can see, you used CSS animation. - Bokov Gleb
  • @GurebuBokofu, added a short comment in response. The point is that with a small script, we check the navigation for the active class and add / remove the on class depending on the presence / absence. The appearance / disappearance of the list is performed using the transform: translateX(); property transform: translateX(); , 0% - the menu is visible, 100% - the menu is hidden outside the document. Smoothness is accomplished using the transition property - HamSter
  • one
    Ok, now everything is clear. Thanks again for your reply :) - Lateral Gleb