Меню, которое "держит" активный пункт (phpbb 3.0)

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

Украшения для сайтов и форумов на новый год, 8 марта, 23 февраля, 9 мая и другие праздники.
Ответить

Сообщение Admin »

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

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

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

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

Код: Выделить всё

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

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

Поделитесь ссылкой.

HTML код
BBCode
Link
Ответить

Вернуться в «Украшения для форумов и сайтов»

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

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