How to make the initially invisible menu block when you click on the button smoothly went to the right of the whole screen. The screen is narrow mobile.

<div class="container"> <button>меню</button> <div class="menu" style="display:none; width:100%"></div> </div>

    2 answers 2

    Well, you understand the meaning)

     $('button').on('click', function() { $('.menu_mobile').removeClass('hidden').addClass('active'); }); $('.close-menu').on('click', function() { $('.menu_mobile').removeClass('active'); }); 
     .hidden { display: none !important; } .menu_mobile { position: fixed; display: block; width: 100%; height: 100%; left: -700px; top: 0; padding: 40px; z-index: 50; background: #eee; animation-name: menuClose; animation-duration: 1s; } .menu_mobile.active { left: 0; animation-name: menuOpen; animation-duration: 1s; } .menu_mobile.active .close-menu { position: absolute; margin: auto; top: 0; right: 70px; width: 60px; height: 60px; background-color: #eeeeee; font-size: 20px; text-align: center; line-height: 60px; cursor: pointer; } @keyframes menuOpen { from { left: -700px; } to { left: 0; } } @keyframes menuClose { from { left: 0; } to { left: -700px; } } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <button>меню</button> <div class="menu_mobile hidden"> <button class="close-menu">x</button> </div> </div>

    • Why animate when simple transform:translateX(); is enough? Or even just left: 0 ; и left:-100%; left: 0 ; и left:-100%; - Air
    • But first met with @keyframes - Artur Han

     // тут мы вешаем на кнопку МЕНЮ событие которое при клике на кнопку // добавляет menu_mobile некий класс, в данном случае это active document.querySelector('button').addEventListener('click', () => { document.querySelector('.menu_mobile').classList.add('active'); document.querySelector('.close-menu').classList.add('close-menu-active'); }) // а тут мы вешаем на кнопку close-menu событие которое пр кликена кнопку // удаляет menu_mobile класс active document.querySelector('.close-menu').addEventListener('click', () => { document.querySelector('.menu_mobile').classList.remove('active'); document.querySelector('.close-menu').classList.remove('close-menu-active') }) 
     .menu_mobile { position: fixed; display: block; width: 100%; height: 100%; left: -100%; top: 0; z-index: 1; background: blue; transition: left 1s 1s; } .menu_mobile.active { left: 0; transition: left 1s; } .close-menu { transform: scale(0); transition: transform 1s; } .close-menu-active { transform: scale(1); transition: transform 1s 1s; } 
     <button>меню</button> <div class="menu_mobile "> <button class="close-menu">X</button> </div>

    Option two, it was just nothing to do ...

     const buttons = document.querySelectorAll('button'); const btnWrap = document.querySelector('.btn-wrap'); const menu = document.querySelector('menu'); btnWrap.addEventListener('click', () => { buttons.forEach(s => { s.classList.contains('active') ? s.classList.remove('active') : s.classList.add('active'); }) menu.classList.contains('open') ? menu.classList.remove('open') : menu.classList.add('open'); }) 
     * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #2b2b2b; } li { list-style-type: none; } .btn-wrap { position: relative; left: 25px; top: 15px; width: 100px; height: 25px; z-index: 5; overflow: hidden; } button { position: absolute; width: 100%; height: 100%; font-family: fantasy; font-size: 15px; letter-spacing: 5px; background: transparent; border: none; outline: none; color: white; cursor: pointer; left: -100%; transition: left 1s; } .active { left: 0; } menu { overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; width: 100%; height: 1px; left: 50%; top: 50%; z-index: 1; background: rgba(250, 250, 250, .1); transform: translate(-150%, -50%); transition: transform 1s 1s, height 1s; } .open { height: 100%; transform: translate(-50%, -50%); transition: transform 1s, height 1s 1s; } li { overflow: hidden; color: white; font-family: fantasy; font-size: 3vmax; letter-spacing: 5px; margin: 5px; padding: 1px; } li span { display: block; width: 100%; height: 100%; } menu>li { opacity: 0; transition: opacity 1s; } menu.open>li { opacity: 1; transition: opacity 1s 1s; } menu>li span { transform: translateY(-100%); transition: transform .5s; } menu.open>li span { transform: translateY(0); transition: transform .5s 1.5s; } 
     <div class="btn-wrap"> <button class="open-menu active">Menu</button> <button class="close-menu ">Close</button> </div> <menu> <li class=menu><span>Menu_1</span></li> <li class=menu><span>Menu_1</span></li> <li class=menu><span>Menu_1</span></li> <li class=menu><span>Menu_1</span></li> </menu>