Меню с подсветкой местоположения
Уже человек 5 спросило, как у меня подсвечиваются пункты меню в блоге. Рассказываю:
Сам код, который нужно вставить туда, где вы хотите, чтобы было меню.
<ul id=”menu”>
<li><a href=”/” {block:IndexPage}class=”current”{/block:IndexPage}>Блог</a></li>
{block:HasPages}
{block:Pages}
<li><a href=”{URL}”>{Label}</a></li>
{/block:Pages}
<script type=”text/javascript”>
try{
var el=document.getElementById(‘menu’).getElementsByTagName(‘a’);
var url=document.location.href;
for(var i=1;i<el.length; i++){if (url==el[i].href){el[i].className += ’ current’;};};}catch(e){}
</script>
{/block:HasPages}
</ul>
А теперь пояснения:
Выводится ссылка «Блог», которая ведет на главную страницу*, а за ней список дополнительных страниц, которые вы создали через кастомайз и поставили флажок «Показывать ссылку на эту страницу»
Небольшой скрипт обходит ссылки и проверяет, не соответствует ли одна из них адресу страницы на которой мы находимся и если да, то присваивает ссылке класс «current», который задается на ваше усмотрение средствами CSS.
*Тумблер делит все страницы на «Index Pages» т.е. все страницы блога и «Permalink Pages» т.е. отдельные посты и статические страницы. Обратите внимание, что в моем примере цикл начинается с 1 т.к. первый пункт меню (0 элемент) подсвечен всегда, когда мы не в отдельном посте или на статической странице и проверять его скриптом не нужно.
Рабочий пример можно наблюдать у меня в блоге, а если есть вопросы — пишите в комментах.
P.S. Возможно я чего-то не знаю и это можно реализовать проще только средствами тумблера, но я такого решения не нашел, по-этому делюсь своим.