Урок 7, Раздел навигации

Ну вот мы приступили к разделу “Навигация“, в данном разделе отредактируем имеющийся блок навигации, и вставим тег меню в наш шаблон )

Для начала, зайдем в раздел “Документы” и создадим страницы:

• О Компании
• Новости
• Услуги
• Фото галерея
• Контакты

При создание этих страниц, на основе рубрики “Основные страницы“. Должно получиться вот так:

Открываем раздел “Навигация” и выберем “Вертикальное меню“.

Мы видим что один пункт меню уже существует. Далее в поле “Название пункта меню” вводим пункт в меню “О Компании“, и кликаем по кнопке “…”

Откроется окно с выбором существующих у нас страниц. Выберем страницу “О Компании“, окно после этого закроется, далее нажимаем на кнопку “Добавить пункт“.

Вот мы добавили пункт меню, ссылкой на на страницу “О Компании“. В такой же последовательности создаем остальные пункты меню на оставшийся страницы.

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

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

Далее нажимаем ниже кнопку “Сохранить изменения“.

Все пункты меню у нас установлены. Осталось подправить шаблон оформления меню.

Нажимаем на раздел “Навигация” и напротив “Вертикальное меню” в ячейке “Действия“, кликаем по иконке “Редактировать шаблон“.

Нам нужно только эта часть страницы.

Делаем все как на картинке.

к тегу UL мы добавили class=”menu”, а при оформление активной ссылки, тегу А добавили class=”active”. Ниже нажимаем на кнопку “Сохранить изменения“. И автоматически переходим в раздел “Навигация“.

Копируем “Системный тег” [cp_navi:1].

Переходим в раздел “Шаблоны“, выберем наш шаблон “ave_base“.

В шаблоне приведенном примере ниже  вот этот код :

<ul class="menu">
	<li><a href="" class="active">Главная</a></li>
	<li><a href="">О Компании</a></li>
	<li><a href="">Новости</a></li>
	<li><a href="">Услуги</a></li>
	<li><a href="">Фото галерея</a></li>
	<li><a href="">Контакты</a></li>
</ul>

заменяем на этот тег [cp_navi:1].

Нажимаем “Сохранить изменения” и и обновляем нашу страницу сайта, и у нас появилась действующее меню на сайте ).

В следующим посте разберем контактную форму для сайта.