Информация

"4admins.ru" Рекомендует

Меню, которое "держит" активный пункт.

Список модификаций, которые вы можете установить себе на форумы.
  • Автор 
    Сообщение
Аватара пользователя
Сообщения: 686
Зарегистрирован: 24 июн 2010, 13:42
Благодарил (а): 122
Поблагодарили: 312 раз в 210 сообщениях
Город: Москва
Пол: Женский
Адрес форума: http://foxlodge.fatbb.ru
Баллы репутации: 39

Меню, которое "держит" активный пункт.

Сообщение Добавлено: 07 июн 2011, 12:03

Очень мне понравилось меню на http://www.phpbbguru.net/, в котором "держится" активный пункт меню, пока пользователь не уйдет со страниц, объединенных какой-то общей целью.
Например. Сидит пользователь в форуме -активным остается пункт меню "Форум".
Уходит пользователь читать материалы блога - активным становится пункт меню "Блоги".

Позырив исходник рнргуру и поразмышляв над ним, поняла, что далеко не к любому меню на форуме 4админс возможно применить использованный там механизм. :(
Да и на самом рнр гуру меню работает не всегда ровно. Например, если пользователь выбирает в меню "FAQ", то активными становятся сразу два пункта - "Форумы" и "FAQ".

В общем, пришлось написать свое. :)
Принцип действия - каждому пункту меню присваивается свой айди.
В НТМЛ код после меню ставится скрипт, который проверяет, где находится пользователь, и в зависимости от этого присваивает соответствующему пункту меню помимо айди еще и класс.

Пример. Предположим, у нас есть меню-список, примерно такое, как в форуме Шанса http://1ua.2ua.in.ua/index.php, содержащее следующие пункты: форум, портал, сайт (ссылка на какую-нибудь статическую страницу), чаво, галерея, пользователи, поиск, личный раздел, личные сообщения, регистрация, вход/выход.
Присвоим каждому элементу списка свой айди.

Код: Выделить всё
<ul id="navlist">
             
<li id="on-forum"><a href="{U_INDEX}">&#8226;Форум</a></li>
<li id="on-portal"><a href="{U_PORTAL}">&#8226;{L_PORTAL}</a></li>
<li id="on-site"><a href="/page.php?p=welcome">&#8226;Сайт</a></li>           
<li id="on-gallery"><a href="{U_GALLERY_MOD}">&#8226;{L_GALLERY}</a></li>
<li id="on-help"><a href="{U_FAQ}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
             <!-- IF S_DISPLAY_MEMBERLIST -->
<li id="on-memberlist"><a href="{U_MEMBERLIST}">&#8226;{L_MEMBERLIST}</a></li>
                <!-- ENDIF -->
                <!-- IF S_DISPLAY_SEARCH -->
<li id="on-search"><a href="{U_SEARCH}">&#8226;{L_SEARCH}</a></li>
                 <!-- ENDIF -->
<!-- ENDIF -->
<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<li id="on-ucp"><a id="on-ucp" href="{U_PROFILE}">&#8226;{L_PROFILE}</a></li>
             <!-- IF S_DISPLAY_PM -->
<li id="on-pm"><a href="{U_PRIVATEMSGS}">&#8226;{PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a></li>
             <!-- ENDIF -->
                  
<!-- ENDIF -->

<!-- IF not S_IS_BOT and not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li id="on-register"><a href="{U_REGISTER}">&#8226;{L_REGISTER}</a></li><!-- ENDIF -->
            
            <!-- IF not S_IS_BOT --><li id="on-loginlogout"><a href="{U_LOGIN_LOGOUT}">&#8226;{L_LOGIN_LOGOUT}</a></li> <!-- ENDIF -->
                     </ul>


Теперь поставим после меню скрипт проверялку-присвоялку активного класса.
В хедер этот скрипт совать бесполезно, потому что если скрипт загрузится до меню, то он не увидит элементы с нужными айди (ведь они еще не загрузились) и не присвоит им класс.

Код: Выделить всё
<script type="text/javascript">
// <![CDATA[   
currentpathname=window.location.pathname
currentsearch=window.location.search

if (currentpathname.indexOf('gallery') != -1) document.getElementById("on-gallery").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('portal') != -1) document.getElementById("on-portal").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('search') != -1) document.getElementById("on-search").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('memberlist') != -1) document.getElementById("on-memberlist").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('faq') != -1) document.getElementById("on-help").setAttribute("class", "menu-active");

else if (currentsearch.indexOf('i=pm') != -1) document.getElementById("on-pm").setAttribute("class", "menu-active");

else if (currentsearch.indexOf('login') != -1||currentsearch.indexOf('logout') != -1) document.getElementById("on-loginlogout").setAttribute("class", "menu-active");

else if (currentsearch.indexOf('register') != -1) document.getElementById("on-register").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('page.php') != -1) document.getElementById("on-site").setAttribute("class", "menu-active");

else if (currentpathname.indexOf('ucp.php') != -1) document.getElementById("on-ucp").setAttribute("class", "menu-active");

else document.getElementById("on-forum").setAttribute("class", "menu-active");

// ]]>
</script>


И нам остается добавить в тему стиля описание класса активного пункта меню.
Например, зададим ссылкам другой фон.
Код: Выделить всё
.menu-active a {
    background: url("/storage/1ua_2ua_in_ua/images/nav_hover.gif") repeat-x scroll center top transparent;
    }

Готово. :) Теперь если Шанс творчески влепит эту заготовку в свои шаблоны и тему стиля, то находясь в галерее у пользователя всегда будет отмеченным активным пункт меню "галерея", пока пользователь будет шастать по страницам галереи.
А если пользователь будет сидеть в любом месте личного раздела (кроме лички) -то активным будет оставаться пункт "Личный раздел". Если же пользователь отправиться в личные сообщения, то активным станет пункт меню "Личные сообщения".

Разумеется, стиль описывать надо с учетом особенностей вашей каскадной таблицы. :privet:

За это сообщение пользователя Alice поблагодарили:
anya, ArtPro, Bukovka, GoDFaTHeR, Loveaction, Shans

Сообщения: 15
Зарегистрирован: 20 июн 2012, 16:59
Благодарил (а): 0
Поблагодарили: 0 раз в 0 сообщении
Город: ДнДз
Пол: Мужской
Адрес форума: zisar.4adm.ru
Баллы репутации: 0

Re: Меню, которое "держит" активный пункт.

Сообщение Добавлено: 27 июн 2012, 01:34

yasovral

Аватара пользователя
Сообщения: 7010
Зарегистрирован: 11 авг 2009, 16:58
Благодарил (а): 655
Поблагодарили: 2335 раз в 1735 сообщениях
Город: Москва
Пол: Мужской
Адрес форума: http://help.4admins.ru
Баллы репутации: 165

Re: Меню, которое "держит" активный пункт.

Сообщение Добавлено: 27 июн 2012, 01:36

отправлен в баню
На этом сервисе можно cоздать форум бесплатно

Аватара пользователя
Сообщения: 621
Зарегистрирован: 13 авг 2009, 14:08
Откуда: EU
Благодарил (а): 73
Поблагодарили: 286 раз в 191 сообщениях
Город: 4админс
Пол: Женский
Адрес форума: http://boardgame.ekafe.ru/
бабло: 0
Баллы репутации: 37

Re: Меню, которое "держит" активный пункт.

Сообщение Добавлено: 06 фев 2014, 00:40

Какая прелесть! Спасибо, Alice! :)
Прежде, чем задать вопрос, просмотрите F.A.Q.
и воспользуйтесь поиском. Спасибо.


Вернуться в Модификации

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1