Всем привет в новом видео я вам покажу интересную реализацию страниц для мобильного телефона. Этот вариант подойдёт для небольших сайтов, а так же просто будет интересен в качестве практики.
Мы с вами создадим меню со страницами в виде карточек для аккордеона.

HTML

<div class="wrapper">
       <a class="menu-btn" onclick="toggleMenu()">
           <span class="hamburger"></span>
       </a>
       <section class="one" onclick="goToPage(0)">
           <h1>Первая страница</h1>
       </section>
       <section class="two" onclick="goToPage(1)">
           <h1>Вторая страница</h1>
       </section>
       <section class="three" onclick="goToPage(2)">
           <h1>Третья страница</h1>
       </section>
       <section class="four" onclick="goToPage(3)">
           <h1>Четвёртая страница</h1>
       </section>
       
       <section class="five" onclick="goToPage(4)">
           <h1>Пятая страница</h1>
       </section>
</div>

CSS

html, body {
    margin: 0;
}

/*
СТИЛИ ДЛЯ КНОПКИ МЕНЮ
=====================
*/
.hamburger {
    position: relative;
    display: block;
    width: 30px;
    height: 15px;
    margin: 20px auto;
    border-top: 3px solid #000;
    border-bottom: 3px solid #000;
}
.hamburger:before {
    content: "";
    position: absolute;
    width: 100%;
    top: 6px;
    left: 0;
    border-top: 3px solid #000;
}
/*
СТИЛИ ДЛЯ КНОПКИ МЕНЮ
=====================
*/
body {
    background: #1f252d;
}

.wrapper {
    height: 100vh;
    width: 100vw;
    background: #2e394b;
    overflow: hidden;
    position: relative;
    margin: 0;
}

.menu-btn {
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    height: 70px;
    width: 54px;
    cursor: pointer;
    background-size: 44px;
}

.menu-btn:active {
    opacity: 0.2;
}

section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 0.3s;
}

section.one {
    background: #f75b5b;
    -webkit-transition-delay: 0s;
}
section.two {
    background: #4888c8;
    -webkit-transition-delay: 0.05s;
}
section.three {
    background: #48c888;
    -webkit-transition-delay: 0.1s;
}
section.four {
    background: #c8c848;
    -webkit-transition-delay: 0.15s;
}

section.five {
    background: #c87448;
    -webkit-transition-delay: 0.15s;
}

section.after {
    -webkit-transform: translateY(100%);
}

h1 {
    color: #fff;
    font-weight: 500;
    font-size: 25px;
    text-align: center;
    margin: 0;
    line-height: 70px;
    -webkit-user-select: none;
}

.page-one section.one {
    -webkit-transition-delay: 0s;
}
.page-one section.two {
    -webkit-transition-delay: 0.15s;
}
.page-one section.three {
    -webkit-transition-delay: 0.1s;
}
.page-one section.four {
    -webkit-transition-delay: 0.05s;
}
.page-one section.five {
    -webkit-transition-delay: 0.05s;
}

.page-two section.one {
    -webkit-transition-delay: 0s;
}
.page-two section.two {
    -webkit-transition-delay: 0.05s;
}
.page-two section.three {
    -webkit-transition-delay: 0.1s;
}
.page-two section.four {
    -webkit-transition-delay: 0.05s;
}
.page-two section.five {
    -webkit-transition-delay: 0.05s;
}

.menu-open section {
    cursor: pointer;
}

.menu-open section.one {
    -webkit-transform: translateY(70px);
    -webkit-transition-delay: 0.15s;
}
.menu-open section.one:active {
    background: #f48181;
}
.menu-open section.two {
    -webkit-transform: translateY(140px);
    -webkit-transition-delay: 0.1s;
}
.menu-open section.two:active {
    background: #689acc;
}
.menu-open section.three {
    -webkit-transform: translateY(210px);
    -webkit-transition-delay: 0.05s;
}
.menu-open section.three:active {
    background: #72cc9f;
}
.menu-open section.four {
    -webkit-transform: translateY(280px);
    -webkit-transition-delay: 0s;
}
.menu-open section.four:active {
    background: #bcbc80;
}
.menu-open section.five {
    -webkit-transform: translateY(350px);
    -webkit-transition-delay: 0s;
}
.menu-open section.four:active {
    background: #c98d6e;
}
.menu-open.page-one section.one {
    -webkit-transition-delay: 0s;
}
.menu-open.page-one section.two {
    -webkit-transition-delay: 0.05s;
}
.menu-open.page-one section.three {
    -webkit-transition-delay: 0.1s;
}
.menu-open.page-one section.four {
    -webkit-transition-delay: 0.15s;
}
.menu-open.page-one section.five {
    -webkit-transition-delay: 0.15s;
}
.menu-open.page-two section.one {
    -webkit-transition-delay: 0s;
}
.menu-open.page-two section.two {
    -webkit-transition-delay: 0.05s;
}
.menu-open.page-two section.three {
    -webkit-transition-delay: 0.1s;
}
.menu-open.page-two section.four {
    -webkit-transition-delay: 0.15s;
}
.menu-open.page-one section.five {
    -webkit-transition-delay: 0.15s;
}

JavaScript

var pages = new Array('one', 'two', 'three', 'four', 'five');
        
function toggleMenu() {
    document.getElementsByClassName('wrapper')[0].classList.toggle('menu-open');
}
       
function goToPage(page) {
    var wrapper = document.getElementsByClassName('wrapper')[0];
    var sections = document.getElementsByTagName('section');
    for(i = 0; i < sections.length; i++) {
        sections[i].classList.remove('before', 'after');
        if(i > page) {
            sections[i].classList.add('after');
        }
    }
    wrapper.classList.remove('menu-open', 'page-one', 'page-two');
    wrapper.classList.add('page-' + pages[page]);        
}