Настройка навигации

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

Вариантов у нас несколько:

1. Построение меню на основе модуля "Управление страницами"
   Можно построить меню на основе тех разделов, которые мы завели в предыдущем разделе. Это самый простой и эффективный способ построения меню сайта. В этом случае, человеку, который потом будет администрировать сайт, достаточно будет добавить новый раздел у страниц и поставить у него зеленую галочку, чтобы этот раздел появился в меню.
   В одном разделе может быть несколько страниц, поэтому еще нужно будет указать какую из этих страниц выводить при выборе данного пункта меню. Для этого у нужной страницы требуется установить галочку "Главная страница раздела".
   Все просто, логично и понятно.
   
   Это новая возможность в нашей системе и мы очень гордимся ею! ;)
   
   На этой технологии я и собирался сделать сайт S.Builder'a, но сейчас передумал.
   Передумал потому, что она имеет одно ограничение, которое в данном случае довольно важно. Мы не сможем подключать к созданному таким образом меню разделы других модулей. Что это такое и как это делается, я расскажу чуть позже.
   
   Таким образом, данный вид меню оптимален для сайтов, у которых не очень большая и разветвленная структура меню.
   Ну и для обучения клиентов работе с этим видом навигации потребуется минимум времени и усилий. Добавил раздел - он появился в меню.
   Все рады!
   
    
2. Построение меню на основе модуля "Навигация по сайту"
   Этот способ построения навигации можно назвать классическим для нашей CMS. В предыдущих версиях CMS был только он, так что тот,  кто работал с системой версии 3.xxx, отлично его знает. Хотя все возможности данного модуля, к сожалению, знают только единицы.
   
   Так в чем же он заключается? Меню сайта собирается на основе специального модуля "Навигация по сайту", с помощью которого можно построить практически любое меню, с любой структурой, вложенностью и любым набором страниц и данных. Это очень мощный инструмент и, я надеюсь, дальше Вы поймете почему!

Кстати, эти два варианта могут пересекаться. Вам никто не мешает подключить меню, созданное в модуле "Управление страницами", в меню, созданное на модуле "Навигация по сайту". Но я думаю, подробному рассмотрению этих вариантов я еще посвящу отдельную статью с примерами. Вот тогда Вы и а... эээ.... удивитесь по-настоящему! ;)

Итак, остановив свой выбор на втором варианте, мы переходим в модуль "Навигация по сайту" ("Меню пользователя" -> "Навигация по сайту"):

С помощью контекстного меню создаем там нужную нам структуру меню (пунктов и подпунктов)

В открывшемся окне вводим  название страницы и ее адрес:

В полях:

• Название пункта (в системе) - вбиваем название пукта, как он должен выглядеть внутри системы (модуля "Навигация по сайту").
• Текст пункта (на сайте) - вбиваем текст, как он должен выглядеть в меню на сайте;
• Ссылка (href) - ссылка непосредственно на страницу, на которую будет указывать данный пункт меню. Ссылку можно ввести вручную или выбрать из уже созданных страниц с помощью иконки справа. Рекомендую последний вариант, т.к. в этом случае все остальные поля у Вас заполнятся автоматически. Более того, в открывшемся окне Вы сможете создать или отредактировать любую страницу, так сказать не отходя от кассы;
• Подсказка (alt) - обычно используется для вывода у ссылки всплывающей подсказки. Но может использоваться и по-другому. Все зависит от того, как будет настроен макет дизайна данного модуля.

Таким вот образом воссоздаем всю структуру меню будущего сайта.

Зеленые галочки перед каждым пунктом меню используются для того, чтобы временно убрать какой-нибудь пункт из меню. Т.е. скрыть его.

Меню мы создали. Теперь нужно вывести его на страницах.

Но прежде нужно настроить дизайн его вывода. Ту одежку, в которую будет одеваться данное меню в момент его вывода на страницах.

Настройка дизайна меню

Для того, чтобы настроить дизайн меню, переходим в "Меню разработчика" -> "Макеты дизайна компонентов" -> "Навигация по сайту" -> "Вывод меню":

Зайдя в модуль, создаем новый макет дизайна (как всегда, правой кнопкой мыши, с помощью контекстного меню):

В открывшемся окне вбиваем название макета дизайна меню:

И приступаем непосредственно к настройке самого дизайна меню.
Для этого переходим на следующую вкладку "Уровень 1".

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

Тот код, что выводится до вывода меню, вставляем в поле "Верх". В данном случае это:

<ul id="left_menu">

Теперь берем код одного пункта меню:

<li onMouseOver="this.className='li_hover'" onMouseOut="this.className=''"><a href="#">О CMS S.Builder</a></li>

С помощью выпадающего селекта над этим полем заменяем ссылку и текст пункта на специальные псевдотеги:

и получаем:

Текстовые поля в макете дизайна задают дизайн каждого конкретного пункта меню. Т.е. CMS перед выводом очередного пункта меню одевает его в этот дизайн, причем поле:

• Пункт с подпунктами - выбирается системой, если пользователь не находится в данный момент на странице, на которую ссылается данный пункт или один из его подпунктов и при этом у данного пункта есть подпункты (пункты меню второго уровня).
• Пункт с подпунктами (выбранный) - выбирается системой, если пользователь находится в данный момент на странице, на которую ссылается данный пункт или один из его подпунктов и при этом у данного пункта есть подпункты (пункты меню второго уровня).
• Пункт без подпунктов - выбирается системой, если пользователь не находится в данный момент на странице, на которую ссылается данный пункт и при этом у данного пункта нет подпунктов (пункты меню второго уровня).
• Пункт без подпунктов (выбранный) - выбирается системой, если пользователь находится в данный момент на странице, на которую ссылается данный пункт и при этом у данного пункта нет подпунктов (пункты меню второго уровня).

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

Размещение меню на страницах

Для этого возвращаемся к макетам дизайна сайта "Меню разработчика" -> "Макеты дизайна сайта":

Открываем на редактирование макет главной страницы, щелкнув по нему правой кнопкой мыши и выбрав "Редактировать макет дизайна" из появившегося контекстного меню (можно было просто щелкнуть по названию шаблона в принципе ;):

В открывшемся окне выбираем закладку "Связанные компоненты":

В открывшемся списке находим редактируемый блок "ОСНОВНОЕ МЕНЮ", ведь именно этот блок нам сейчас нужен!
И в столбце "Тип компонента" выбираем компонент нужного нам модуля "Навигация по сайту -> Вывод меню":

Теперь нажимаем иконку настройки:

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

И переходим на закладку "Свойства":

Выбираем макет дизайна (он у меня в любом случае один сейчас). Галочку "Сохранять выделение у пунктов верхнего уровня" проставляем. Она еще пригодится. И нажимаем кнопку "Выбрать".

Все! Меню на странице размещено!

Абсолютно те же операции выполняем со следующим макетом.

Реально на все про все уходит около 5-10 секунд.

Идем на сайт и смотрим, что получилось:

Ура! Меню у нас работает!

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

Возвращаемся в "Макеты дизайна компонентов":

Открываем макет дизайна меню на редактирование и у полей:

• Пункт с подпунктами (выбранный)
• Пункт без подпунктов (выбранный)

вставляем:

<li class="li_hover"><a href="" title=""></a></li>

взамен:

<li onMouseOver="this.className='li_hover'" onMouseOut="this.className=''"><a href="" title=""></a></li>

Теперь, перейдя на любую страницу на сайте, она выделится в меню.
Показывать уже не буду, поверьте мне на слово. ;)

Следующий шаг, это настройка вывода второго уровня у меню.
Делается это следующим образом.

Настройка вывода второго уровня меню

Для этого остаемся в модуле макетов дизайна компонентов. Продолжаем редактировать макет дизайна меню.

Рядом с закладкой "Уровень 1" есть закладка "+" нажимаем ее, чтобы добавить еще одну закладку "Уровень 2":

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

    <ul id="menu_2">
        <li onMouseOver="this.className='li_2_hover'" onMouseOut="this.className=''"><a href="#">Подпункт 1</a></li>
        <li class="li_2_hover"><a href="#">Подпункт выбранный</a>
        <li onMouseOver="this.className='li_2_hover'" onMouseOut="this.className=''"><a href="#">Подпункт 2</a></li>
     </ul>

Значит:

В поле "Верх" ставим:
<ul id="menu_2">

В поля "Пункт с подпунктами" и "Пункт без подпунктов" ставим:
<li onMouseOver="this.className='li_2_hover'" onMouseOut="this.className=''">
<a href=""></a>
</li>

В поля "Пункт с подпунктами (выбранный)" и "Пункт без подпунктов (выбранный)" ставим:
<li class="li_2_hover">
<a href=""></a>
</li>

И в поле "Низ" вставляем:
</ul>

Получаем:

Но это еще не все! ;)
Хотя мы уже близко!

Переходим на вкладку "Уровень 1" и в поля "Пункт с подпунктами (выбранный)", ставим редактируемый блок "Вывод подпунктов" (), как показано на след. скриншоте, выбрав его из выпадающего списка над полем и нажав кнопку "Вставить":

Почему именно это поле? Потому, что мы хотим, чтобы подпункты появлялись ТОЛЬКО у выбранного раздела.
Т.е. если мы заходим на страницу, у которой есть подпункты, то они в меню появятся:

Теперь меню работает! Третий уровень будем делать? ;)

Давайте сделаем.

Точно также добавляем третий уровень:

 И добавляем в него код из верстки:

Переходим на "Уровень 2".

В поле "Верх" заменяем код на:
<ul id="menu_">

чтобы id у каждого раздела второго уровня был уникальным.

У пунктов с подпунктами (обоих) вставляем редактируемый блок :

<li onMouseOver="this.className='li_2_hover'" onMouseOut="this.className=''">
<a href=""></a>

</li>

И в поле "Низ" вставляем JavaScript-код для вызова всплывающего меню:

<script type="text/javascript">
var listMenu = new FSMenu('listMenu', true, 'display', 'block', 'none');
listMenu.animInSpeed = 0.1;
listMenu.animOutSpeed = 0.1;
listMenu.animations[listMenu.animations.length] = FSMenu.animFade;
listMenu.animations[listMenu.animations.length] = FSMenu.animSwipeDown;
var arrow = null;
if (document.createElement && document.documentElement)
{
 arrow = document.createElement('span');
 arrow.appendChild(document.createTextNode(' '));
 arrow.className = 'subind';
}
listMenu.activateMenu("menu_", arrow);
</script> 

Получаем:

Замечу, что количество уровней (вложенность пунктов) у меню не ограничено и если Вы не укажете дизайн, например второго уровня, то он автоматически унаследует дизайн первого уровня.

Теперь смотрим, что получилось на сайте:

Все работает! Настройку этого меню мы закончили. Но по дизайну есть еще второе меню справа.

Его настраиваем точно таким же образом. Подробно рассказывать, как это делается, не буду, хотя и говорят, что повторение - мать учения.

Но, если кратко...

Настройка второго меню

Создаем и наполняем еще одно меню в модуле:

Создаем и настраиваем его макет дизайна:

И размещаем в обоих макетах дизайна сайта новое меню:

В новом дизайне:

Получаем второе меню на страницах сайта:

Дальше мы сделаем так, чтобы у нас автоматически формировался путь по сайту и заголовки у страниц.