При создании меню на срипте Н скрипт, возникает вопрос сделать активной ту кнопку(пункт) меню, для той странице на которой находится пользователь, с соответствующими стилями.
Вариантов решения этого вопроса несколько, рассмотрим их по отдельности.
1. Самый простой - это на каждой странице поставить html теги для меню и указывать активный стиль для соответствующей страницы. Недостатки этого метода в неудобной работе с этим самым меню, например если надо что то поправить в меню то надо вводить изменения в примерно 7 файлах.
2. Java скрипт, который будет отслеживать кнопку на которую кликнули и сделать ее активной, но в этом случае, возникают трудности, потому что построение скрипта сделано так, что при открытии страниц файл header.tpl загружается заново и скрипт перегружаясь теряет данные о клике. Все равно это вопрос решается java скриптами, но код будет усложненный и "тяжелый".
3. На мой взгляд самый правильный и удобный способ решения этого вопроса - это использование возможности самого скрипта.
Вот код такого идеального меню
Код:
<nav>
<ul>
<li><a href="home" {if $smarty.server.REQUEST_URI == '/' or $smarty.server.REQUEST_URI == '/home'} class='active' {/if} >Главная</a></li>
<li><a href="about" {if $smarty.server.REQUEST_URI == "/about"} class='active' {/if}>О Нас</a></li>
<li><a href="reviews" {if $smarty.server.REQUEST_URI == "/reviews"} class='active' {/if}>Отзывы</a></li>
<li><a href="faq" {if $smarty.server.REQUEST_URI == "/faq"} class='active' {/if}>FAQ</a></li>
<li><a href="contacts" {if $smarty.server.REQUEST_URI == "/support"} class='active' {/if}>Контакты</a></li>
</ul>
</nav>
Выгоды применения этого метода очевидны, код намного упрощен и может быть помещен в файл header.tpl, для исправления пунктов меню надо править всего 1 файл.
Код проверен на рабочем проекте.
Социальные закладки