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

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

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

with(document) {
  write('
    • ‘); write(‘

    • меню просто и удобно

‘); write(‘

    • tree (дерево)

‘); write(‘

    • drag&drop

‘); write(‘

    • изменение размера блока

‘); write(‘

‘); }

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

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

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

проблемы:

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

 

Оцените статью
Добавить комментарий

  1. тестер

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

  2. Alek Veritov

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

  3. тестер

    если можно поподробнее

  4. тестер

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

  5. или

    самое простое апач + src="/menu.js">

  6. Andrew

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

  7. тестер

    прикольно! аффтар жжот!! Спасибо!!!

  8. Намик

    Добрый день!Очень понравилась статья про одинаковые меню на странице "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 Спасибо