Рейтинг: 5.0/1

Метки

меню

Опрос: Чего добавлять больше?

Чего добавлять больше?
Всего ответов: 192

Главная » 2011 » Март » 8 » Информационная панель для форума (меню - информационная панель)

В данной теме будет рассмотрено создание и установка на форуме сайта информационной панели (меню), которая с лёгкостью заменит стандартные меню системы и будет содержать, кроме того, информер о посетителях сайта.

в общем виде панель будет выглядеть так:

При наведении на первую вкладку будет отображаться таблица - информер с информацией о посетителях сайта

Второй пункт панели "Авторизация", если пользователь вошел на сайт незалогиненным, то при наведении на этот пункт меню отобразится форма авторизации

для залогиненного пользователя отобразиться информация

Пункт "Меню сайта" показывает основное меню сайта

Пункт "Меню форума" отображает меню форума

Ну и в заключении пункт "Вход/Выход"

А теперь об установке

1. В шаблоне "Общий вид страниц форума" в секции HEAD нужно прописать ссылки на файлы стилей

Code
<link rel="stylesheet" href="/jquery.megamenu.css" type="text/css" media="screen" />
     <link rel="stylesheet" href="/example.css" type="text/css" media="screen" />

После тега вставить скрипты

Code
<script src="/jquery.megamenu.js" type="text/javascript"></script>
     <script type="text/javascript">
     jQuery(function(){
     var SelfLocation = window.location.href.split('?');
     switch (SelfLocation[1]) {
     case "justify_right":
     jQuery(".megamenu").megamenu({ 'justify':'right' });
     break;
     case "justify_left":
     default:
     jQuery(".megamenu").megamenu();
     }
     });
     </script>

2. Затем в нужном месте шаблона страницы вставляем код самого меню (я вставил его после системного кода глобального блока шапки $GLОBAL_AHEADER$)

Code
<!--MegaMenu Starts-->
     <ul class="megamenu">
     <li>
     <a href="javascript:void(0)">Сегодняшние посетители</a>
     <div style="width: 500px;">
     <h3>Сегодня нас посетили пользователи:</h3>
     <table border="1" cellpadding="0" cellspacing="0" id="tabular-content">
     <tr>
     <th style="width: 15px">ID</th>
     <th>Логин</th>
     <th>Пол пользователя</th>
     <th style="width: 60px">Профиль</th>
     </tr>
$MYINF_1$
         
     </table>
     </div>
     </li>
     <li>
     <a href="javascript:void(0)">Авторизация</a>
     <div style="width: 265px;">
     <?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> · <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?>Введите логин и пароль<?endif?>
     $LOGIN_FORM$
     </div>
     </li>

<li>
     <a href="javascript:void(0)">Меню сайта</a>
     <div style="width: 300px;">
     <ul id="list-content">
     $SMENU_1$
     </ul>
         
     </div>
     </li>

       <li>
            <a href="javascript:void(0)">Меню форума</a>
            <div style="width: 500px;">
[<?if($USER_LOGGED_IN$)?>
<a href="javascript://" rel="nofollow" id="upml" class="fNavLink" onclick="window.open('$PM_URL$','pmw','scrollbars=1,top=0,left=0,resizable=1,width=680,height=350');return false;"><!--<s3065>-->ЛС<!--</s>-->($UNREAD_PM$)</a> ·
<?if($IS_NEW_PM$)?><script type="text/javascript">function flashit(id,cl){var c=document.getElementById(id);if (c.style.color=='red'){c.style.color=cl;}else {c.style.color='red';}}setInterval("flashit('upml','')",500)</script><bgsound src="http://s107.ucoz.net/img/fr/pm.wav" loop="1" volume="0" balance="0">
<?endif?><?endif?>
<a class="fNavLink" href="$RECENT_POSTS_LINK$" rel="nofollow"><!--<s5209>-->Новые сообщения<!--</s>--></a> ·     
<a class="fNavLink" href="$MEMBERS_LIST_LINK$" rel="nofollow"><!--<s5216>-->Участники<!--</s>--></a> ·     
<a class="fNavLink" href="$BOARD_RULES_LINK$" rel="nofollow"><!--<s5166>-->Правила<!--</s>--></a> ·     
<a class="fNavLink" href="$SEARCH_PAGE_LINK$" rel="nofollow"><!--<s3163>-->Поиск<!--</s>--></a> ·     
<a class="fNavLink" href="$RSS_LINK$" rel="nofollow">RSS</a> ]
            </div>
          </li>
         
         
     <li>
     <?if($USER_LOGGED_IN$)?><a href="$LOGOUT_LINK$">Выход</a><?else?><?endif?>
     </li>
     </ul>
<!--MegaMenu Ends-->

3. Как мы видим, в первом пункте меню будет отображаться таблица посетителей сайта. Для этого нам нужно создать информер. Заходим в Панель управления сайтом на главную страницу, жмём вкладку "Информеры" , затем на кнопку "Создать информер" , выбираем раздел "Пользователи, посетившие сайт за текущий день", нажимаем "Создать".

Информер создан, входим в его редактирование шаблона и заменяем имеющийся в нём код на такой:

Code
<tr>
     <td>$USER_ID$</td><td>$USERNAME$</td><td>$GENDER$</td><td><a href="$PROFILE_URL$" class="$CLASS$">Смотреть</a></td>
     </tr>

Полученный код информера вида $MYINF_1$ вставляем в код меню (у вас он может быть и $MYINF_2$ и $MYINF_3$, в зависимости от того, сколько вы создали информеров ранее)

4. В файле example.css откорректируйте путь к файлу изображения menu-bac.gif

Вот и всё. Будут вопросы - пишите!

Ссылка:
BB-код:
HTML-код:
Всего комментариев: 0
Оставь комментарий первым!
Имя *:
Email:
Код *: