Как сделать такой эффект без перезагрузки страницы?

Question

[Genri_Rus]

Допустим вот пример: https://codepen.io/Genri_Rus/pen/BaaWxYb

При клике на пункт меню без перезагрузки страницы точно также плавно сворачивать меню и показывать уже другую плавно выезжающую страницу ?

И подойдет ли такой вариант ?

$(function(){
        const mainApp = $('.main-wrapper'); // получаем нашу обводку для контента
        mainApp.on('click', '.menu li a', function(e){// при клике на пункт меню получаем путь до href 
            e.preventDefault();
            History.pushState(null, document.title, $(this).attr('href'));
        });

        function loadPage(url) {            
           mainApp.css({opacity: 0.5});
           mainApp.load(url + " .menu-wrapper > *", function(){
                mainApp.css({opacity: 1});
            });
        }

        History.Adapter.bind(window, 'statechange',function(e){
            var State = History.getState();
            loadPage(State.url);
        });
    });

Собственно куда нужно прописать все анимации, чтобы все происходило наиболее плавно ?

Answer 1

[Сергей]

Например делать контейнер div для содержимого страниц
При старте в этот див вставляется в пхп нужный контент
При нажатии на кнопки меню, JS отправляет запрос на сервер получая только контент, который будет в div. В этот момент закрывается меню и в div после загрузки запихивается полученный html прямо в div
Для навигации можно еще менять hash и отслеживать его смену событием hashchange и вызывать загрузку нужной страницы. Тем самым нажимая назад, человек вернется на прошлую страницу.
Таким образом перезагружаться страница не будет.

Comments

[Genri_Rus]

Спасибо за ответ
А данный вариант, который выше правильный ?

А если мне не нужно php, а просто html ?

И есть ли готовые похожие примеры ?