Как вставить код меню из отдельного файла на все страницы сайта?
Есть прототип сайта, расположен локально.
На каждой странице есть слайд-меню, код меню достаточно длинный, используется jquery для раскрытия подменю. Т.к. страниц у сайта много, то после добавления новой ссылки копипастить меню на каждую страницу нереально.
Идея такая: вынести код меню в отдельный menu.html и вставить его на каждую страницу через js, что бы при внесении изменений в menu.html, они сразу отображались на всех страницах. И при этом сохранилась возможность открытия пунктов подменю.
Как это лучше всего реализовать?
В интернете получалось найти некоторые варианты решения этого вопроса, но они все подразумевают расположение сайта на сервере, либо маленький код самого меню.
JS знаю на уровне новичка, так что нужно очень подробное объяснение)
Вообще, лучше использовать сервер и php (ну или другой серверный язык), но если вам принципиально, то можно и на js (в данном примере используется jquery)
$('body').prepend('<div id="menu">'); //в начало body добавляем элемент с id=menu
$.post('menu.html',function(data) { //получаем код файла menu.html
$('#menu').html(data); //вставляем в div id=menu
});
Плохая практика - динамически вставлять блок с меню на клиенте. Это ооочень скажется на выдаче в ПС. Подобные задачи в 99.9% случаев решаются на серверной части - серверный рендеринг.
Но если очень хочется, то единственный, и далеко не оптимальный, способ динамической вставки блока - использование frames.
Вот вам простой пример, на основе которого сможете всё реализовать.
Простой
