Простое и удобное меню на Javascript
В этой статье поднимается старая затертая тема - повторяющееся на разных страницах сайта меню.Я думаю, многие разработчики сталкивались с ситуацией, когда меню или список должны повторяться в нескольких местах, но при этом необходимо обеспечить их удобное обновление и расширение.Решать проблему в лоб - непосредственно кодом html - не очень удобно, особенно при количестве повторений больше 5, покольку при добалении/изменении придется вручную править в 5 и более местах. С помощью JavaScript можно решить задачу следующим образом.
Выносим меню в отдельный файл:
view source
with(document) {
write('<ul id="javascriptmenu">');
write('<li><a href="javascriptmenu.htm">меню просто и удобно</a></li>');
write('<li><a href="javascripttree.htm">tree (дерево)</a></li>');
write('<li><a href="javascriptdd.htm">drag&drop</a></li>');
write('<li><a href="javascriptrsz.htm">изменение размера блока</a></li>');
write('</ul>');
}
При достаточно объемном списке с одинаковым оформлением элементов можно попробовать еще сильнее упростить задачу:
view source
var items1 = {"basic.html" : "Основы", "forex.html" : "Forex",
"pif.html" : "ПИФы", "bank.html" : "Банки"};
for (var key in items1)
document.write("<a href="+key+">"+items1[key]+"</a><br>");
Теперь добавление/удаление нового элемента сводится к редактированию даже не строки, а двух фраз. На любой странице, где необходимо меню, можно написать:
view source
<script type="text/javascript" src="menu.js"></script>
Проблемы:
Если хотите, чтобы меню участвовало в индексации, придется на одной из страниц, лучше на главной, оставить html код, ибо поисковые роботы исполнять JavaScript пока не умеют.
Рекомендуем почитать
