Показано с 1 по 1 из 1

Тема: Идеальное меню для сайта на Н скрипт

  1. #1

    Идеальное меню для сайта на Н скрипт

    При создании меню на срипте Н скрипт, возникает вопрос сделать активной ту кнопку(пункт) меню, для той странице на которой находится пользователь, с соответствующими стилями.

    Вариантов решения этого вопроса несколько, рассмотрим их по отдельности.

    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 файл.
    Код проверен на рабочем проекте.
    Последний раз редактировалось Alivan; 21.08.2016 в 06:43.

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения
  •  

Индекс цитирования