#1
|
|
Вес репутации:
0
Регистрация: 27.02.2009
Адрес: Москва
Сообщений: 7,247
Сказал(а) спасибо: 574
Спасибок 2,673
в 1,898 сообщениях |
Красивое меню для navbar -
29.03.2012, 13:16
Много вопросов было о том, как прикрутить красивое меню на vbulletin.
В данной статье речь пойдет о стабильной 3-ей версии (3.8.x) И так открываем ваш шаблон navbar кнопки навигации расположены между двумя строчками комментария <!-- nav buttons bar --> .... <!-- / nav buttons bar --> (конечно если стиль у вас не дефолтный, то его создатель мог и не указать эти комментарии) Код HTML:
<!-- nav buttons bar --> <div class="tborder" style="padding:$stylevar[cellspacing]px; border-top-width:0px"> <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> <tr align="center"> <if condition="$show['member']"> <td class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td> </if> <if condition="$show['registerbutton']"> <td class="vbmenu_control"><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td> </if> $template_hook[navbar_buttons_left] <td class="vbmenu_control"><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td> <if condition="$show['communitylink'] AND $show['popups']"> <td class="vbmenu_control"><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community"); </script></td> <else /> <if condition="$show['memberslist']"> <td class="vbmenu_control"><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td> </if> <if condition="$show['quick_links_groups']"> <td class="vbmenu_control"><a rel="nofollow" href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></td> </if> </if> <td class="vbmenu_control"><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td> <if condition="$show['popups']"> <if condition="$show['searchbuttons']"> <if condition="$show['member']"> <td class="vbmenu_control"><a rel="nofollow" href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td> <else /> <td class="vbmenu_control"><a rel="nofollow" href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td> </if> <td class="vbmenu_control"><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td> </if> <if condition="$show['member']"> <td class="vbmenu_control"><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td> </if> <else /> <if condition="$show['searchbuttons']"> <td class="vbmenu_control"><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td> <if condition="$show['member']"> <td class="vbmenu_control"><a rel="nofollow" href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td> <else /> <td class="vbmenu_control"><a rel="nofollow" href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td> </if> </if> <td class="vbmenu_control"><a href="forumdisplay.php?$session[sessionurl]do=markread&markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></td> <if condition="$show['member']"> <td class="vbmenu_control"><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></td> </if> </if> $template_hook[navbar_buttons_right] <if condition="$show['member']"> <td class="vbmenu_control"><a rel="nofollow" href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td> </if> </tr> </table> </div> <!-- / nav buttons bar --> Отличия лишь в том, что используются переменные php движка vbulletin: Участки кода заключенные в условия: Код HTML:
<if condition="$show['member']"> <td class="vbmenu_control"><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td> </if> Возможные варианты условий можно посмотреть тут Переменные начинающиеся на vbphrase - это фразы (Админ панель - языки и фразы)
Жмем найти и получаем результат: Жмем редактировать и видим, что переменная $vbphrase[user_cp] всего навсего выводит простой текст - Мой кабинет (Аналогично и другие фразы, при том можно добавлять и свои фразы в булку, а можно просто писать текст сразу в шаблонах, не заморачиваясь) Почему тогда сделали фразы в качестве переменных php, а не просто писали текст в шаблонах ?Ответ довольно простой. Если у вас много шаблонов, в которых встречается фраза, например, Мой кабинет, то эффективнее использовать переменную, так как если вы захотите исправить это название, например на Кабинет, то нужно будет сделать всего лишь поиск по фразам и исправить фразу - изменения произойдут во всех шаблонах... а если вы ручками писали текст в каждый шаблон, то и исправлять этот текст придется так же ручками во всех шаблонах.
То есть при использовании фраз, которые повторяются несколько раз - рационально использовать $vbphrase [-] Могут быть ещё переменные:
по такому же принципу действуют многие хаки, то есть добавляют автоматически свой пункт в меню. Если вы удалите эти переменные из шаблона navbar, то хаки не смогут добавлять автоматом своё меню и придется в ручную редактировать navbar и добавлять ссылку (оформленные по аналогии с уже имеющимися) Вот собственно и всё, что может встретится подозрительного в дефолтном шаблоне navbar. Итак прикрутим вот такое меню, то есть изменим внешний вид квадратного табличного дефолтного меню булки. Читаем инструкцию и видим:
CSS код, если не будете изменять название классов, сразу вставляйте в Админка - Стили и шаблоны - Управление стилями - у выбранного стиля из выпадающего меню указать на - Основная таблица CSS - Дополнительные определения CSS Как видим HTML код нового меню очень и очень скромный, по сравнению с нашим: PHP код:
Наше дефолтное меню выполнено в виде таблицы, новое же, в виде списка. По этому удаляем все табличные html теги и заменяем их тегами списка ul и li Там где были теги: <td class="vbmenu_control"> .... </td> заменяем на <li> .... </li> Теги <tr align="center"> ... </tr> - удаляем вообще. Тег <table cellpadding="0" cellspacing="0" border="0" width="100%" align="center"> .... </table> заменяем на теги <ul> ... </ul> Дописываем теги <nav> ... </nav> И удаляем теги <div class="tborder" style="padding:$stylevar[cellspacing]px; border-top-width:0px"> ... </div> Переменные $template_hook[navbar_buttons_left], $template_hook[navbar_buttons_right] также заключаем в теги <li>...</li> так как хаки будут добавлять свои меню, но вероятно придется их потом все равно удалять (эти переменные) и вставлять новый html код пункта меню для каждого хака, ссылка которого необходима в навигации. Но если вы переменные эти все же оставляете, то используйте для них дополнительно условия <if condition="$template_hook[navbar_buttons_left]"><li>$template_hook[navbar_buttons_left]</li></if> <if condition="$template_hook[navbar_buttons_right]"><li>$template_hook[navbar_buttons_right]</li></if> чтобы если хаков не установлено, то не отображались в коде пустые теги <li></li> Получился у нас окончательно вот такой код: Код HTML:
<!-- nav buttons bar --> <nav> <ul> <if condition="$show['member']"> <li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li> </if> <if condition="$show['registerbutton']"> <li><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></li> </if> <if condition="$template_hook[navbar_buttons_left]"><li>$template_hook[navbar_buttons_left]</li></if> <li><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></li> <if condition="$show['communitylink'] AND $show['popups']"> <li><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community"); </script></li> <else /> <if condition="$show['memberslist']"> <li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li> </if> <if condition="$show['quick_links_groups']"> <li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li> </if> </if> <li><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></li> <if condition="$show['popups']"> <if condition="$show['searchbuttons']"> <if condition="$show['member']"> <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li> <else /> <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li> </if> <li><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></li> </if> <if condition="$show['member']"> <li><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li> </if> <else /> <if condition="$show['searchbuttons']"> <li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li> <if condition="$show['member']"> <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li> <else /> <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li> </if> </if> <li><a href="forumdisplay.php?$session[sessionurl]do=markread&markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></li> <if condition="$show['member']"> <li><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></li> </if> </if> <if condition="$template_hook[navbar_buttons_right]"><li>$template_hook[navbar_buttons_right]</li></if> <if condition="$show['member']"> <li><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li> </if> </ul> </nav> <!-- / nav buttons bar --> Всё круто, но нужно подправить CSS стили, чтобы выровнять его. Подправим размер шрифта заменим строчку font: PHP код:
PHP код:
PHP код:
Как искать проблемные элементы и в живую править CSS - читайте эту статью. (читать только про firebug) Получили мы в итоге такое: Добавлено через 10 минут Дополнение Если в меню используется javascript код, то он вставляется обычно в шаблон headinclude Исправил Vector; 30.03.2012 в 09:41. |
#2
|
|
Вес репутации:
0
Регистрация: 15.03.2012
Адрес: Иваново
Сообщений: 282
Сказал(а) спасибо: 79
Спасибок 7
в 6 сообщениях |
29.03.2012, 21:44
все по инструкции сделал,а выход уехал в низ
Добавлено через 50 минут помогите переделать PHP код:
подскажите как фон сменить и цвет когда накнопку нажимаеш? Исправил Vector; 30.03.2012 в 19:46. |
#3
|
|
Вес репутации:
0
Регистрация: 27.02.2009
Адрес: Москва
Сообщений: 7,247
Сказал(а) спасибо: 574
Спасибок 2,673
в 1,898 сообщениях |
Re: Красивое меню для navbar -
30.03.2012, 19:46
|
#4
|
|
Вес репутации:
0
Регистрация: 23.08.2012
Сообщений: 2
Сказал(а) спасибо: 0
Спасибок 0
в 0 сообщениях |
Re: Красивое меню для navbar -
24.08.2012, 17:21
А можете переписать код под 4 ?
|
#5
|
|
Вес репутации:
0
Регистрация: 12.04.2012
Адрес: Гомель
Сообщений: 663
Сказал(а) спасибо: 70
Спасибок 90
в 84 сообщениях |
Re: Красивое меню для navbar -
25.08.2012, 12:13
Цитата:
Сообщение от Frost
А можете переписать код под 4 ?
|
#6
|
|
Вес репутации:
0
Регистрация: 08.07.2012
Сообщений: 305
Сказал(а) спасибо: 15
Спасибок 5
в 5 сообщениях |
Re: Красивое меню для navbar -
22.03.2013, 11:41
а как сделать чтоб не дублировалась меню?
|
#7
|
|
Вес репутации:
0
Регистрация: 27.02.2009
Адрес: Москва
Сообщений: 7,247
Сказал(а) спасибо: 574
Спасибок 2,673
в 1,898 сообщениях |
Re: Красивое меню для navbar -
22.03.2013, 16:58
asd, скриншот
|
#8
|
|
Вес репутации:
0
Регистрация: 20.01.2012
Сообщений: 10
Сказал(а) спасибо: 2
Поблагодарили 1 раз
в 1 сообщении |
Re: Красивое меню для navbar -
23.03.2013, 17:31
Странно, у меня не работает, стиль дефолтный, как я понял проблема вот в нем
Код HTML:
<!-- nav buttons bar --> <nav> <ul> <if condition="$show['member']"> <li><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></li> </if> <if condition="$show['registerbutton']"> <li><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></li> </if> <if condition="$template_hook[navbar_buttons_left]"><li>$template_hook[navbar_buttons_left]</li></if> <li><a rel="help" href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></li> <if condition="$show['communitylink'] AND $show['popups']"> <li><a id="community" href="$show[nojs_link]#community" rel="nofollow" accesskey="6">$vbphrase[community]</a> <script type="text/javascript"> vbmenu_register("community"); </script></li> <else /> <if condition="$show['memberslist']"> <li><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></li> </if> <if condition="$show['quick_links_groups']"> <li><a href="group.php?$session[sessionurl]">$vbphrase[social_groups]</a></li> </if> </if> <li><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></li> <if condition="$show['popups']"> <if condition="$show['searchbuttons']"> <if condition="$show['member']"> <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li> <else /> <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li> </if> <li><a id="navbar_search" href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></li> </if> <if condition="$show['member']"> <li><a id="usercptools" href="$show[nojs_link]#usercptools" accesskey="3">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></li> </if> <else /> <if condition="$show['searchbuttons']"> <li><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></li> <if condition="$show['member']"> <li><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></li> <else /> <li><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></li> </if> </if> <li><a href="forumdisplay.php?$session[sessionurl]do=markread&markreadhash=$bbuserinfo[securitytoken]" rel="nofollow">$vbphrase[mark_forums_read]</a></li> <if condition="$show['member']"> <li><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_contacts]</a></li> </if> </if> <if condition="$template_hook[navbar_buttons_right]"><li>$template_hook[navbar_buttons_right]</li></if> <if condition="$show['member']"> <li><a href="login.php?$session[sessionurl]do=logout&logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></li> </if> </ul> </nav> <!-- / nav buttons bar --> |
Ответить |
Опции темы | |
Опции просмотра | |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
FAQ Дополнительное выпадающее меню в navbar | Vector | Навигация (navbar, navbits, header и т.д.) | 4 | 19.10.2012 17:24 |
FAQ Делаем красивое меню в шапке | noname | Навигация (navbar, navbits, header и т.д.) | 37 | 03.09.2012 17:42 |
Хаки lavalamp меню для navbar на jQuery | Vector | Навигация (navbar, navbits, header и т.д.) | 0 | 10.03.2012 14:55 |
Вопрос Как правильно дабавить сылку в меню navbar? | Wor | Вопросы по vBulletin 3.х | 1 | 08.11.2011 15:22 |
Вопрос Как русифицировать меню из navbar | krishtianu | Вопросы по vBulletin 3.х | 1 | 12.04.2011 17:19 |