Меню: просто и удобно

В этой статье поднимается старая затертая тема — повторяющееся на разных страницах сайта меню.
Я думаю, многие разработчики сталкивались с ситуацией, когда меню или список должны повторяться в нескольких местах, но при этом необходимо обеспечить их удобное обновление и расширение. Решать проблему в лоб — непосредственно кодом html — не очень удобно, особенно при количестве повторений больше 5, покольку при добалении/изменении придется вручную править в 5 и более местах. С помощью JavaScript можно решить задачу следующим образом.

Выносим меню в отдельный файл:

with(document) {
  write('');
}

При достаточно объемном списке с одинаковым оформлением элементов можно попробовать еще сильнее упростить задачу:

var items1 = {"basic.html" : "Основы", "forex.html" : "Forex",
		"pif.html" : "ПИФы", "bank.html" : "Банки"};
for (var key in items1)
document.write(""+items1[key]+"");

Теперь добавление/удаление нового элемента сводится к редактированию даже не строки, а двух фраз. На любой странице, где необходимо меню, можно написать:

проблемы:

  • если хотите, чтобы меню участвовало в индексации, придется на одной из страниц, лучше на главной, оставить html код, ибо поисковые роботы исполнять JavaScript пока не умеют;

8 Комментарии “Меню: просто и удобно

  1. все классно но как быть со страницами в подпапках, как их заставить использовать единое меню

  2. to тестер: то же самое <script type="text/javascript" src="menu.js"></script> + тег base, например

  3. локально его сложно будет посмотреть без подключения к сети
    или можно задать путь как нибудь хитро без адреса сайта

  4. А почему бы не использовать такую давно известную вещь как SSI (Server Side Includes). Понятно, что если хостинг не поддерживает, то надо выкручиваться другими путями, но об этом в статье ни слова. К тому же, страницы, содержащие "SSI код" будут правильно обрабатываться как поисковиками так и браузерами с отключенной/отсутствующей поддержкой JavaScript…

  5. Добрый день!Очень понравилась статья про одинаковые меню на странице "easywebscripts.net/javascriptmenu.htm". Всё проверил, всё нормально. У меня похожая ситуация. Я меню сделал в HTML(40 стр.) в виде таблиц,но когда использую Ваш метод, ничего не работает. Т.е. если что-то надо напечатать в JS с помощью documentwrite, то всё нормально, как только хочу вставить таблицу, ничего не идёт. В HTML, где нужно вызвить меню стоит строка <Script type="text/javascript" src="menu.js"></Script> А вот menu.js(общий набросок) Documentwrite("<Table>"); Documentwrite("<Tr>"); Documentwrite("<Td"); Documentwrite("</Td>"); Documentwrite("</tr>"); Documentwrite("</Table>"); Если можно, ответьте и на почту: namig.alimardanov@yandex.ru Спасибо

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *