Сегодня мы сделаем меню для нашего блога с помощью сниппета Wayfinder (документацию по сниппету Wayfinder). Верхняя навигация и главная у нас на блоге состоит из двух частей:

  • Мобильная
  • Обычная

Поэтому делать мы будем навигацию в двойном экземпляре). Итак, нашу главную навигацию мы разобьем на чанки. В соответствии с документацией должно получиться 4 чанка (не забываем убирать пробелы):

&outerTpl=` wayOuterTpl` - чанк обертка основного списка

<ul class="nav">
  [ [+wf.wrapper] ]
</ul>

&innerTpl=` wayInnerTpl` - чанк обертка выпадающего списка

<ul class="dropdown-menu">
	[ [+wf.wrapper] ]
</ul>

&rowTpl=` wayRowTpl`- чанк вывод элементов списка

<li [ [+wf.classes] ]>
  <a href="[ [+wf.link] ]">[ [+wf.linktext] ]</a>
</li>

&parentRowTpl=`wayHasChildTpl` - чанк вывод элементов списка-родителей

<li class="dropdown [ [+wf.classnames] ]">
  <a class="dropdown-toggle" data-toggle="dropdown" href="[ [+wf.link] ]">[ [+wf.linktext] ] <b class="caret"> </b></a>
  [ [+wf.wrapper] ]
</li>

И привожу вызов сниппета в чанке header:

[ [Wayfinder? 
&startId=`0`
&level=`2`
&outerTpl=`wayOuterTpl`
&innerTpl=`wayInnerTpl`
&rowTpl=`wayRowTpl`
&parentRowTpl=`wayHasChildTpl` 
] ]	

&startId=`0` - задаем начало прохода сниппета, в нашем случае от корня сайта.
&level=`2` - количество уровней в нашем меню.

Следующий шаг – вывод нашего мобильного меню. Принцип подобный тому, что я выше изложил, здесь нам тоже понадобится 4 чанка.

&outerTpl=`wayOuterMobileTpl` - чанк обертка основного списка.

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
	[ [+wf.wrapper] ]
</select>

&innerTpl=`wayInnerMobileTpl` - чанк обертка внутреннего списка.

[ [+wf.wrapper] ]

&rowTpl=`wayRowMobileTpl` - чанк вывод элементов списка.

<option value="[ [+wf.link] ]">[ [+wf.linktext] ]</option>
[ [+wf.wrapper] ]

&innerRowTpl=`wayInnerRowMobileTpl` - чанк вывод элементов внутреннего списка.

<option value="[ [+wf.link] ]">- [ [+wf.linktext] ]</option>
[ [+wf.wrapper] ]

Вызов Wayfinder примет следующий вид:

[ [Wayfinder? 
&startId=`0`
&level=`2`
&outerTpl=`wayOuterMobileTpl`
&innerTpl=`wayInnerMobileTpl`
&rowTpl=`wayRowMobileTpl`
&innerRowTpl=`wayInnerRowMobileTpl` 
] ]

Все тоже самое, только изменились чанки. Теперь у нас есть мобильная навигация, проверить ее можете с помощью инструмента Responsive Web Design Tester для Opera и Chrome.

Привожу полный код чанка header:

<div class="row header">
  <div class="span5 logo">
	<a href="[ [++site_url] ]"><img src="img/piccolo-logo.png" alt="" /></a>
	<h5>Big Things... Small Packages</h5>
  </div>
  <div class="span7 navigation">
	<div class="navbar hidden-phone">	  
	  [ [Wayfinder? 
	  &startId=`0`
	  &level=`2`
	  &outerTpl=`wayOuterTpl`
	  &innerTpl=`wayInnerTpl`
	  &rowTpl=`wayRowTpl`
	  &parentRowTpl=`wayHasChildTpl` 
	  ] ]	  
	</div>
	<form action="#" id="mobile-nav" class="visible-phone">
	  <div class="mobile-nav-select">
		[ [Wayfinder? 
	  	&startId=`0`
		&level=`2`
		&outerTpl=`wayOuterMobileTpl`
		&innerTpl=`wayInnerMobileTpl`
		&rowTpl=`wayRowMobileTpl`
		&innerRowTpl=`wayInnerRowMobileTpl` 
		] ]
	  </div>
	</form>	
  </div>  
</div>

Наша навигация готова! В видео мы еще рассмотрели создание меню категорий в блоге. Так как принцип один и тот же, то здесь рассматривать я не стал, смотрите видео) До встречи в следующих уроках!