Настройка навигации
Данный текст находится в процессе написания, поэтому:
|
Теперь нам нужно настроить вывод навигации на сайте. Прошу читать этот раздел крайне внимательно, т.к. возможности CMS по созданию различного вида меню, путей по сайту и т.д. очень большие. Вариантов у нас несколько:
Кстати, эти два варианта могут пересекаться. Вам никто не мешает подключить меню, созданное в модуле "Управление страницами", в меню, созданное на модуле "Навигация по сайту". Но я думаю, подробному рассмотрению этих вариантов я еще посвящу отдельную статью с примерами. Вот тогда Вы и а... эээ.... удивитесь по-настоящему! ;) Итак, остановив свой выбор на втором варианте, мы переходим в модуль "Навигация по сайту" ("Меню пользователя" -> "Навигация по сайту"): С помощью контекстного меню создаем там нужную нам структуру меню (пунктов и подпунктов) В открывшемся окне вводим название страницы и ее адрес: В полях:
Таким вот образом воссоздаем всю структуру меню будущего сайта. Зеленые галочки перед каждым пунктом меню используются для того, чтобы временно убрать какой-нибудь пункт из меню. Т.е. скрыть его. Меню мы создали. Теперь нужно вывести его на страницах. Но прежде нужно настроить дизайн его вывода. Ту одежку, в которую будет одеваться данное меню в момент его вывода на страницах. Настройка дизайна менюДля того, чтобы настроить дизайн меню, переходим в "Меню разработчика" -> "Макеты дизайна компонентов" -> "Навигация по сайту" -> "Вывод меню": Зайдя в модуль, создаем новый макет дизайна (как всегда, правой кнопкой мыши, с помощью контекстного меню): В открывшемся окне вбиваем название макета дизайна меню: И приступаем непосредственно к настройке самого дизайна меню. Из верстки вырезаем код меню и вставляем его в соответствующие поля макета дизайна. Тот код, что выводится до вывода меню, вставляем в поле "Верх". В данном случае это: <ul id="left_menu"> Теперь берем код одного пункта меню: <li onMouseOver="this.className='li_hover'" onMouseOut="this.className=''"><a href="#">О CMS S.Builder</a></li> И вставляем его в текстовое поле "Пункт с подпунктами":
С помощью выпадающего селекта над этим полем заменяем ссылку и текст пункта на специальные псевдотеги: и получаем: Текстовые поля в макете дизайна задают дизайн каждого конкретного пункта меню. Т.е. CMS перед выводом очередного пункта меню одевает его в этот дизайн, причем поле:
Немного сложно сейчас для понимания, но, поверьте, реально все очень просто и крайне удобно! Стоит лишь попробовать.
В поле "Низ" вставляем:
</ul>
Чтобы этот момент стал более понятен Вам, я не стану сейчас до конца правильно настраивать данный макет дизайна, а пока скопирую код из первого поля в остальные три и сохраню все. А потом, по шагам доведу макет дизайна меню до нужного состояния, объясняя зачем и почему я это делаю.
Простейший макет дизайна мы сейчас создали. Теперь нужно сделать так, чтобы меню выводилось в этом дизайне на всех страницах сайта. Размещение меню на страницахДля этого возвращаемся к макетам дизайна сайта "Меню разработчика" -> "Макеты дизайна сайта": Открываем на редактирование макет главной страницы, щелкнув по нему правой кнопкой мыши и выбрав "Редактировать макет дизайна" из появившегося контекстного меню (можно было просто щелкнуть по названию шаблона в принципе ;): В открывшемся окне выбираем закладку "Связанные компоненты": В открывшемся списке находим редактируемый блок "ОСНОВНОЕ МЕНЮ", ведь именно этот блок нам сейчас нужен! Галочку "Редактируемый компонент" снимаем. Делаем это для того, чтобы в дальнейшем контент-менеджер сайта не мог поменять это меню на что-нибудь другое, например, на новостную ленту или текстовый блок. А испортят нечаянно...
Теперь нажимаем иконку настройки: В открывшемся окне выбираем раздел (оно же меню) сайта. Дело в том, что в системе может быть неограниченное количество различных меню (у нас их тоже будет несколько). Каждое меню - это отдельный раздел. Сейчас у нас меню всего одно, так что выбираем его: И переходим на закладку "Свойства": Выбираем макет дизайна (он у меня в любом случае один сейчас). Галочку "Сохранять выделение у пунктов верхнего уровня" проставляем. Она еще пригодится. И нажимаем кнопку "Выбрать". Все! Меню на странице размещено! Абсолютно те же операции выполняем со следующим макетом. Реально на все про все уходит около 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": Кстати, таким образом Вы можете добавлять сколько угодно уровней.
Переходим на вкладку "Уровень 2" и точно таким же образом настраиваем вывод второго уровня меню.
Второй уровень меню в сверстанном коде выглядит следующим образом: <ul id="menu_2"> Значит: В поле "Верх" ставим: В поля "Пункт с подпунктами" и "Пункт без подпунктов" ставим: В поля "Пункт с подпунктами (выбранный)" и "Пункт без подпунктов (выбранный)" ставим: И в поле "Низ" вставляем: Получаем: Но это еще не все! ;) Теперь нам нужно вернуться к первому уровню и указать системе места, где именно должны выводиться подпункты.
Переходим на вкладку "Уровень 1" и в поля "Пункт с подпунктами (выбранный)", ставим редактируемый блок "Вывод подпунктов" (), как показано на след. скриншоте, выбрав его из выпадающего списка над полем и нажав кнопку "Вставить": Почему именно это поле? Потому, что мы хотим, чтобы подпункты появлялись ТОЛЬКО у выбранного раздела. Теперь меню работает! Третий уровень будем делать? ;) Давайте сделаем. Точно также добавляем третий уровень: И добавляем в него код из верстки: Переходим на "Уровень 2". В поле "Верх" заменяем код на: У пунктов с подпунктами (обоих) вставляем редактируемый блок : <li onMouseOver="this.className='li_2_hover'" onMouseOut="this.className=''"> И в поле "Низ" вставляем JavaScript-код для вызова всплывающего меню: <script type="text/javascript"> Получаем: Замечу, что количество уровней (вложенность пунктов) у меню не ограничено и если Вы не укажете дизайн, например второго уровня, то он автоматически унаследует дизайн первого уровня. Теперь смотрим, что получилось на сайте: Все работает! Настройку этого меню мы закончили. Но по дизайну есть еще второе меню справа. Его настраиваем точно таким же образом. Подробно рассказывать, как это делается, не буду, хотя и говорят, что повторение - мать учения. Но, если кратко... Настройка второго менюСоздаем и наполняем еще одно меню в модуле: Создаем и настраиваем его макет дизайна: И размещаем в обоих макетах дизайна сайта новое меню: В новом дизайне: Получаем второе меню на страницах сайта: Причем, обратите внимание: при выборе раздела "Демо-версия on-line" автоматически открывается также основное меню слева и выделяется нужная страница. Т.е. вся навигация на сайте работает уже правильно и логично.
Дальше мы сделаем так, чтобы у нас автоматически формировался путь по сайту и заголовки у страниц. 31.10.2008 г.
|