Инструкция по созданию сайта на MODx. Урок 16 — Реализация вспомогательного меню на странице

Сегодня переходим к следующему шагу в создании нашего динамического сайта-визитки и приступаем к организации вспомогательного меню в правой колонке на внутренних страницах сайта.

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

Первым делом давайте посмотрим на HTML-разметку, которая определяет вывод нашей вспомогательной навигации:

<div class="subnav"> 
<h2>Secondary Navigation</h2> 
<ul> 
<li><a href="#">Open Source Templates</a></li> 
<li><a href="#">Free CSS Templates</a> 
    <ul> 
         <li><a href="#">Free XHTML Templates</a></li> 
         <li><a href="#">Free Website Templates</a></li> 
    </ul> 
</li> 
<li><a href="#">Open Source Layouts</a> 
     <ul> 
	 <li><a href="#">Open Source Software</a></li> 
	 <li><a href="#">Open Source Webdesign</a> 
	     <ul> 
	          <li><a href="#">Open Source Downloads</a></li> 
	          <li><a href="#">Open Source Website</a></li> 
	     </ul> 
	 </li> 
     </ul> 
</li> 
<li><a href="#">Open Source Themes</a></li> 
</ul> 
</div> 

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

Перед тем, как начать настраивать сниппет, давайте создадим в дереве документов несколько дочерних ресурсов для пункта меню «Услуги».

Для примера, предлагаю создать несколько пунктов, чтобы получилась следующая структура:

  • Услуги
    • Создание сайтов
      • Дизайн
      • Верстка
      • Программирование
    • Продвижение сайтов
      • Поисковое продвижение
      • Контекстная реклама
      • Баннерная реклама
      • Вирусный маркетинг
    • Разработка ПО
    • Поддержка

В итоге у вас дерево сайта должно будет выглядеть приблизительно вот так:

Внешний вид дерева документов

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

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

Вид главного меню

Для того, чтобы исправить отображение выпадающего списка в главном меню, мы просто ограничим уровни вложенности в вызове сниппета с помощью параметра &level.

Если вы помните, вызов главного меню мы вынесли в отдельный чанк с именем MAIN-MENU, отправляемся его редактировать. Сейчас вызов осуществляется с помощью конструкции:

[!Wayfinder? &startId=`0`!]

Добавляем еще параметр &level=`2`, это позволит выводить пункты главного меню и их дочерние (т.е. 2 уровня вложенности).

В итоге конструкция вызова главного меню примет следующий вид:

[!Wayfinder? &startId=`0` &level=`2`!]

Внешний вид главного меню с выпадающим списком:

Внешний вид главного меню

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

Боковое меню сейчас у нас находится в чанке RIGHT-COL. Для удобства работы давайте это меню вынесем в отдельный чанк RIGHT-MENU, для этого вырезаем из чанка RIGHT-COL следующий кусок кода:

<div class="subnav"> 
<h2>Secondary Navigation</h2> 
<ul> 
      <li><a href="#">Open Source Templates</a></li> 
      <li><a href="#">Free CSS Templates</a> 
            <ul> 
                  <li><a href="#">Free XHTML Templates</a></li> 
                  <li><a href="#">Free Website Templates</a></li> 
           </ul> 
      </li> 
      <li><a href="#">Open Source Layouts</a> 
            <ul> 
	         <li><a href="#">Open Source Software</a></li> 
	         <li><a href="#">Open Source Webdesign</a> 
	             <ul> 
	                  <li><a href="#">Open Source Downloads</a></li> 
	                  <li><a href="#">Open Source Website</a></li> 
	             </ul> 
	        </li> 
	    </ul> 
       </li> 
       <li><a href="#">Open Source Themes</a></li> 
</ul> 
</div> 

а вместо него помещаем конструкцию вызова чанка:

{{RIGHT-MENU}}

Создаем чанк RIGHT-MENU и в поле с содержимым чанка  вписываем конструкцию вызова сниппета Wayfinder, помещенную в контейнер <div class="subnav">, при этом в качестве источника документов для меню указываем контейнер «Услуги», ID которого в моем случае 4, у вас это число может отличаться, чтобы узнать идентификатор вашей папки, посмотрите на число, расположенное в скобках в дереве ресурсов. Таким образом, в чанке RIGHT-MENU у вас должна оказаться следующая конструкция:

<div class="subnav">
<h2>Наши услуги</h2>
[!Wayfinder? &startId=`4`!]
</div>

Результат работы сниппета при этом вызове вы сможете посмотреть на любой странице вашего сайта, для которой установлен шаблон «2 колонки». Вот как должно выглядеть боковое меню после всех произведенных действий:

Внешний вид меню, выводимого с помощью Wayfinder

Как вы видите, сейчас отображаются все дочерние пункты бокового меню. Бывают случаи, когда необходимо отображать только дочерние пункты активного пункта. Для того, чтобы реализовать эту опцию, вы можете использовать еще один параметр сниппета Wayfinder — &hideSubMenus. Если значение этого параметра установить в «true», то подменю будет отображаться только для активного пункта меню.

Давайте добавим этот параметр в конструкцию вызова сниппета в чанке RIGHT-MENU и посмотрим, что из этого получится.

<div class="subnav">
<h2>Наши услуги</h2>
[!Wayfinder? &startId=`4` &hideSubMenus=`true`!]
</div>

В итоге подменю будет отображаться только для активного пункта меню. Вот скриншот страницы «Продвижение сайтов»:

Подменю отображается только для активного пункта

Если посмотреть в CSS файл, в котором описывается стилевое оформление навигации assets/templates/site/styles/navi.css, то можно заметить строчку  

#column .subnav ul ul ul ul ul a{padding-left:70px; background-position:60px center;}

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

Конструкция, которая в конечном итоге должна находится в чанке RIGHT-MENU:

<div class="subnav">        
<h2>Наши услуги</h2>      
[!Wayfinder? &startId=`4` &hideSubMenus=`true` &level=`5`!]
</div>

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

  • &level — количество отображаемых уровней в меню
  • &hideSubMenus — параметр, который позволяет скрывать подменю и выводить дочерние документы только для активного пункта 

Созданные и измененные во время урока чанки:

  • «MAIN-MENU.txt» — чанк с вызовом главного меню сайта
  • «RIGHT-MENU.txt» — чанк с вызовом вспомогательного меню в правой колонке
  • «RIGHT-COL.txt» — правая колонка сайта

Процесс реализации вспомогательного меню на страницах сайта MODx вы можете посмотреть в видео к данному уроку.

Видео урок: Реализация вспомогательного меню MODx. Сниппет Wayfinder

Автор: Ефимов Виктор

Вы можете также посмотреть другие уроки по созданию сайта на MODx:

28.09.2010
top


blog comments powered by Disqus
Рубрики
3 месяца отличного хостинга бесплатно
Система Orphus