Wayfinder и divider

Тут twitter.github.com/bootstrap/components.html#navbar
в разделе 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й разделитель -->
Максим Франц
06 сентября 2012, 11:35
modx.pro
3 180
0

Комментарии: 7

Василий Наумкин
06 сентября 2012, 15:44
0
Не силен в wayfinder, но могу предложить использовать псевдоклассы CSS :first-child и :last-child.
Они позволят скрыть ненужное, или добавить.
    Valentin Rasulov
    06 сентября 2012, 15:46
    0
    есть два способа.
    1) включить уровни — &levelClass
    2) обычно при помощи css. Смотрите в каком уровне вам нужно обработать first — задайте стиль именно к этому уровню.
      Максим Франц
      06 сентября 2012, 18:12
      0
      в принципе &levelClass не обязателен (но спасибо, теперь знаю, что это такое) т.к. оказалось достаточно li.first.dropdown{} :)
    Максим Франц
    06 сентября 2012, 15:54
    0
    Спасибо! Попробую.

    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 и заработало.
      Василий Наумкин
      06 сентября 2012, 15:56
      0
      Тогда это какие то непонятки у jquery и bootstrap. Мы тут не при чем =)
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      7