Wayfinder и divider
Тут twitter.github.com/bootstrap/components.html#navbar
в разделе Responsive navbar
есть пример меню с разделителями
вложенных меню
1.
и в разделе Nav links разделители пунктов основного меню
с разделителями вложенных меню все просто
создали в меню пункт divider и поправили wayfinder.row.inner.tpl
tpl.Wayfinder.row.inner и пункт divid-header
То с вертикальными разделителями немного запарился. Или его нет перед первым пунктом или нет перед последним. Как задать уникальный 1й или последний? Класс first применяется и к под меню…
в разделе Responsive navbar
есть пример меню с разделителями
вложенных меню
1.
<li class="divider"></li>
2. <li class="divider"></li><li class="nav-header">заголовок</li>
и в разделе Nav links разделители пунктов основного меню
<li class="divider-vertical"></li>
с разделителями вложенных меню все просто
создали в меню пункт divider и поправили wayfinder.row.inner.tpl
<li class="[[+wf.classnames]] [[+wf.isfolder:is=`1`:then=`dropdown`]]">
<a href="[[+wf.isfolder:is=`1`:then=`#`:else=`[[+wf.link]]`]]" [[+wf.isfolder:is=`1`:then=`class="dropdown-toggle" data-toggle="dropdown"`]] [[+wf.attributes]]>[[+wf.linktext]] [[+wf.isfolder:is=`1`:then=`<b class="caret"></b>`]]</a>
[[+wf.wrapper]]
</li>
<li class="divider-vertical-my"></li>
tpl.Wayfinder.row.inner и пункт divid-header
[[+wf.linktext:is=`divider`:then=`<li class="divider"></li>`:
else=`[[+wf.linktext:is=`divid-header`:
then=`<li class="nav-header">[[+wf.description]]</li>`:
else=`<li [[+wf.classes]]> <a href="[[+wf.link]]" [[+wf.attributes]]>[[+wf.linktext]]</a> [[+wf.wrapper]]</li>`]]`]]
То с вертикальными разделителями немного запарился. Или его нет перед первым пунктом или нет перед последним. Как задать уникальный 1й или последний? Класс first применяется и к под меню…
<li class="divider-vertical-my"></li> <!-- 1й разделитель -->
<li class="dropdown"><!-- drop -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Каталог <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li class="first"><a href="" title=""></a></li>
<li class="divider"></li>
<li class="last"><a href="" title=""></a></li>
</ul>
</li>
<li class="divider-vertical-my"></li> <!-- 2й разделитель -->
Комментарии: 7
Не силен в wayfinder, но могу предложить использовать псевдоклассы CSS :first-child и :last-child.
Они позволят скрыть ненужное, или добавить.
Они позволят скрыть ненужное, или добавить.
есть два способа.
1) включить уровни — &levelClass
2) обычно при помощи css. Смотрите в каком уровне вам нужно обработать first — задайте стиль именно к этому уровню.
1) включить уровни — &levelClass
2) обычно при помощи css. Смотрите в каком уровне вам нужно обработать first — задайте стиль именно к этому уровню.
в принципе &levelClass не обязателен (но спасибо, теперь знаю, что это такое) т.к. оказалось достаточно li.first.dropdown{} :)
молодцы — это самый лучший способ, задать вопрос, а потом самому найти ответ!!!
Согласен, это гораздо лучше, чем задать вопрос и сидеть, сложа лапки.
Я бы до сих пор сидел =) forums.modx.com/thread/79111/runprocessor-for-resources-in-modx-api-mode
Я бы до сих пор сидел =) forums.modx.com/thread/79111/runprocessor-for-resources-in-modx-api-mode
Спасибо! Попробую.
p.s.
Еще возникла такая проблема. Если в wayfinder.row.inner.tpl в выпадающем меню указать вместо
a href="[[+wf.isfolder:is=`1`:then=`#`
a href="[[+wf.isfolder:is=`1`:then=`[[+wf.link]]
указать ссылку (например для того, чтобы при отключенных скриптах меню работало) переставало раскрываться вложенное меню
поменял jquery 1.8.1 на 1.7.2 и заработало.
p.s.
Еще возникла такая проблема. Если в wayfinder.row.inner.tpl в выпадающем меню указать вместо
a href="[[+wf.isfolder:is=`1`:then=`#`
a href="[[+wf.isfolder:is=`1`:then=`[[+wf.link]]
указать ссылку (например для того, чтобы при отключенных скриптах меню работало) переставало раскрываться вложенное меню
поменял jquery 1.8.1 на 1.7.2 и заработало.
Тогда это какие то непонятки у jquery и bootstrap. Мы тут не при чем =)
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.