Создание выпадающего / нативного меню для IPB 3 (выпадающее меню)

[vizavi]

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

 

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

 

открываем АЦ на своём форуме, затем идём в Внешний вид -> Управление стилями и шаблонами и выбираем "Управление шаблонами и CSS" для Вашего стиля

в списке шаблонов "Глобальные" находим "globalTemplate" и открываем его, затем ищем блок

<div id='primary_nav'>

это и есть начало блока строки навигации

 

теперь нам нужно добавить следующую конструкцию в этот блок

<li id='menuother' class='left ipbmenu'><a href='#' onclick='return false;' title='Прочее >>'><b> Прочее >> </b></a></li>
<div id='menuother_menucontent'>
<a href="#">Меню 1</a>
<a href="#">Меню 2</a>
<a href="#">Меню ...</a>
<a href="#">Меню ...</a>
</div>
<script type='text/javascript'><!--
if( $('menuother_menucontent') ){ $('menuother_menucontent').hide(); }
//--></script>

Пояснения что здесь важно, а что Вы можете менять на своё усмотрение:

1) menuother - названеи меню, только на английском, уникальное и не совпадающее с другими id для других элементов шаблонов на Вашем форуме,

2) в элементе который будет представлять ссылку на выпадающее меню указывается только это название, а в блоке содержащем элементы выпадающего меню, а также в скрипте обязательно добавляем окончание "_menucontent"

3) элемент <li> выбран в качестве обрамляющего ссылку, чтобы встроится в стандартное место в строке навигации, но Вы можете поместить ссылку в любое место в любом шаблоне Вашего форума, ссылка это:

<a href='#' onclick='return false;' title='Прочее >>'><b> Прочее >> </b></a>

 

Вот мой пример блока строки навигации: (красным показано что добавлено в стандартный блок)

<div id='primary_nav'>

<div id='search'>

{parse template="quickSearch" group="global" params=""}

</div>

 

<ul>

<if test="showhomeurl:|:$this->settings['home_url']">

<li id='nav_home' class='left'><a href='{$this->settings['home_url']}' title='{$this->lang->words['homepage_title']}' rel="home">{$this->settings['home_name']}</a></li>

</if>

{parse variable="forumActive" default="" oncondition="IPS_APP_COMPONENT == 'forums'" value="active"}

{parse variable="membersActive" default="" oncondition="IPS_APP_COMPONENT == 'members'" value="active"}

{parse variable="helpActive" default="" oncondition="IPS_APP_COMPONENT == 'core' AND $this->request['module'] == 'help'" value="active"}

<if test="!ipsRegistry::$applications['forums']['app_hide_tab']"><li id='nav_discussion' class='left {parse variable="forumActive"}'><a href='{parse url="act=idx" seotitle="false" base="public"}' title='{$this->lang->words['go_to_discussion']}'>{$this->lang->words['discussion']}</a></li></if>

<li id='menuother' class='left ipbmenu'><a href='#' onclick='return false;' title='Прочее >>'><b> Прочее >> </b></a></li>

<div id='menuother_menucontent'>

<if test="!ipsRegistry::$applications['members']['app_hide_tab']"><li id='nav_members' class='left {parse variable="membersActive"}'><a href='{parse url="app=members" base="public" template="members_list" seotitle="false"}' title='{$this->lang->words['go_to_memberlist']}'>{$this->lang->words['tb_mlist']}</a></li></if>

<if test="applicationsloop:|:is_array($header_items['applications']) AND count($header_items['applications'])">

<foreach loop="applications:$header_items['applications'] as $data">

<if test="showingapp:|:$data['app_show']">

{parse variable="appActive" default="" oncondition="$data['app_active']" value="active"}

<li id='nav_app_{$data['app_dir']}' class="left {parse variable="appActive"}"><a href='{parse url="{$data['app_link']}" seotitle="false" base="public"}' title='{parse expression="sprintf( $this->lang->words['go_to_prefix'], IPSLib::getAppTitle($data['app_dir']) )"}'>{IPSLib::getAppTitle($data['app_dir'])}</a></li>

</if>

</foreach>

</if>

</div>

<script type='text/javascript'><!--

if( $('menuother_menucontent') ){ $('menuother_menucontent').hide(); }

//--></script>

</ul>

 

</div>

Также для того, чтобы перенести оформление для элементов выпадающего меню, Вам нужно подправить CSS стиль Вашего шаблона, для этого в том же окне где выбирали и редактирвоали шаблон "globalTemplate" нажимаете по вкладке CSS и выбираете "ipb_styles.css", в нём находите блок

#primary_nav {
...
}

и копируете его ниже меняя название элемента на название Вашего меню с добавлением окончания "_menucontent", в моём варианте это выглядит так:

#primary_nav {
background: #444;
font-size: 0.95em;
border: 1px solid #666;
border-bottom: 5px solid #f8b04a;
padding-left: 10px;
height: 31px;
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-top-left-radius: 5px;
}
#menuother_menucontent {
background: #444;
border: 1px solid #666;
padding-left: 10px;
height: 31px;
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-top-left-radius: 5px;
}

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

	font-size: 0.95em;
border-bottom: 5px solid #f8b04a;
border-bottom: 5px solid #f8b04a;

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

 

Вот собственно и всё, Вы получили удобное и юзабельное выпадающее меню стандартными средствами IPB.

Написано по-моему очень понятно, отсюда и много букв

 

P.S> если у Вас своё решение, можете им поделится для сравнения

Изменено 29 Сентября 2010 пользователем vizavi

[Ritsuka]

Написано понятно, вот только с отключенным JS это меню будет нелепо висеть посередине экрана...

 

Имеет смысл сделать что-то вроде этого:

<noscript><!-- классическое меню --></noscript>
<div id='menuother_menucontent' style='display:none;'>

[Arhar]

(красным показано что добавлено в стандартный блок)

к сожалению не получится так выделить

 

в целом автор пиши ещё)

[vizavi]

Offtop

Ritsuka если честно сталкиваюсь с веб программированием уже лет так 12, ещё с тех пор когда этот самый js только появлялся, последние года 3-4 меня вопрос отключения JS уже вообще не волнует, т.к. это тоже самое что когда-то считавшееся минимальное разрешение 640*480 под которое пытались адаптировать шаблоны или тот же ИА 6 или 5 поколения, это прошлое, о котором можно забыть как о кошмарном сне, он есть у всех изначально, а те кто отключил - вот пусть и объяснят сами себе зачем они это сделали ))

Изменено 29 Сентября 2010 пользователем vizavi

[Ritsuka]

Offtop

vizavi, как раз вчера начальство вызывало на ковер из-за того, что на сайте одного из министерств, что я делал и поддерживаю, форма отправки писем не работает с отключенным JS (получено гневное письмо на имя министра от раздраженного пользователя-гика), плюс что в IE5.5 и IE6 этот же сайт не масштабируется встроенными средствами браузера ("колесико"). И дело все в том, что, в соответствии с разнообразнейшими ФЗ и нормативами, госсайт должен корректно отображаться и функционировать во всех существующих браузерах и при любых параметрах и с разрешением от 640х480, так что данные проблемы приходится устранять. Т.е. я считаю, что в данном случае вопрос не в том - насколько ты "профессионал", а в том, какие у тебя типовые задачи. Я как-то привык проектировать и работать с учетом всех самых неудобных девиаций, потому и обращаю свое (и ваше) внимание на них... Конечно, так работать гораздо сложнее, чем выкладывать все просто добиваясь первой рабочей версии, но такая работа и оценивается несколько иначе...

[vizavi]

Offtop

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

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

[Dark_Forces]

(IM)Custom Navigation - уже все придумали, но там при откл. яве ссылки просто не открываются. а вообще считаю на ипб3 без явы делать нечего. самым первым критерием является скрытый текст(спойлеры)

[vizavi]

Dark_Forces (IM)Custom Navigation мб и поможет с основным меню форума, но данный способ можно использовать и для других меню, например в профиле пользователя при наличии большого кол-ва приложений также ссылки не умещаются, этим способом можно свернуть в выпадающее меню