Меню на сайте

Последнее обновление – 03.01.2006

Ссылка на документ – http://www. *****/res/site/doc/MenuModule. doc

Меню на сайте

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

Меню могут быть:

выдвигающимися; плавающими при прокрутке странице как вверх так и вниз; сделанными с помощью картинок или CSS; полупрозрачными, раскрывающиеся звёздочкой, раскрывающиеся множеством точек – более 20 спецэффектов появления; меню могут быть нужной степени вложенности и др;

Создадим меню на сайте http://demo. *****/ (вход в A2C CMS – http://demo. *****/cool/ логин/пароль demo/demo )

Назовём меню - «Главное меню»

Нажмём кнопку «Создать».

Щёлкнем по надписи «нет заголовка». Добавим новый пункт в начало меню – нажмём «новый пункт в начало меню»…

Впишем в качестве названия пункта «BMW M6», на всё остальное пока не будем обращать внимания и нажмём клавишу F8. Нажмём «новый пункт после этого» и создадим следующую структуру, пошагово повторяя предыдущее…

Теперь, находясь в Mazda M6, нажмём «Добавить к этому пункту подменю».

Уберём галочку с «Заголовок меню виден», нажмём F8. Нажмём на «Пункт 7», впишем «Производитель». Нажмём F8, затем «новый пункт после этого»; повторяя шаги, создадим подменю следующего содержания для элементов самого верхнего уровня меню, чтобы получилось что-то вроде этого…

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

Щёлкнем по «BMW M6». Сейчас всё внимание на окно под заголовком «Настройки выбранного элемента меню». Спускаемся вниз, чтобы в фокусе внимания оказался «Стиль 1». Стиль1 – это CSS описание элемента меню, при обычном отображении. Сделаем настройки Стиля 1 в соответствии с теми, что показаны на рисунке:

Нажмём F8 и спустимся ниже до «Стиль 2 пункта при наведении». Нажмём «скопировать из Стиля 1»

Потом снова спустимся до Стиля 2 и выберем «Курсор мыши в виде» - «рука». Цвет же фона выберем #0000cc (вместо #0000aa). Нажмём F8. Спустимся до Стиля 3 – выберем «скопировать из Стиля 2».

Теперь, внимание! Нажмём F6 – мы попадём в окно группового копирования свойств. Отметим галочками так, как показано на рисунке и нажмём кнопку «Копировать»:

Тем самым мы «разукрасили» все пункты меню верхнего уровня.

Возьмёмся за второй уровень: щёлкнем по пункту BMW M6 > Производитель. Настроим Стиль 1 в соответствии с рисунком:

Нажмём F8; перейдём к Стилю 2; сделаем копирование из Стиля 1; снова перейдём к стилю 2 сделаем курсор в виде «рука» и цвет фона вместо «#00aaaa» сделаем «#00cccc». Нажмём F8; перейдём к Стилю 3; сделаем копирование из Стиля 2.

Нажмём F6. Отметим галочки в соответствии с рисунком – будем копировать только стили из текущего во все пункты 2 уровня…

Нажмём «Копировать».

Теперь сделаем всё меню горизонтально ориентированным, для этого нажмём по заголовку 0:

И сделаем такие настройки справа:

- мы убрали галочку с «Заголовок меню виден»;

- мы сделали ориентацию меню – горизонтальной;

- мы определили расстояние между пунктами в 1 пиксель.

Нажмём F8; щёлкнем по любому из заголовков меню второго уровня. Сделаем аналогичные настройки, только не будет трогать ориентацию меню:

- мы определили прозрачность - 20%;

- мы сделали расстояние между пунктами – 1 пиксель.

Нажмём F8 и после этого нажмём F6 для того, чтобы скопировать стили данного заголовка на все заголовки:

Нажмём F9 и посмотрим на результат:

Размещение меню в дизайн шаблоне

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

Запомните номер Вашего меню. В нашем случае это номер 16:

Перейдём к редактированию нужного дизайн-шаблона: переместимся в модуль
Контент сайта > Дизайн-шаблоны; через жёлтое всплывающее меню в таблице выберем «Перейти к шаблонам темы», наведём на нужный дизайн-шаблон курсор и выберем «Редактирование файла». Теперь непосредственно в тексте дизайн-шаблона вставим макрос меню {insert menu 16} (в Вашем случае число будет скорее всего другим); внимание, во избежание недоразумений связанных с вёрсткой рекомендуем размещать макрос сразу после закрывающего тега </body>.. Нажмём «Сохранить».

Всё. Можете смотреть на сайте.

У нас вышло так…

Резюме

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

На первый взгляд может показаться информационно перегруженным процесс настройки вида меню – однако, мы оптимизировали его и видимая сложность есть «плата» за большие возможности визуальных настроек. Тем не менее, обещаем, что уже в ближайшее время процесс редактирования визуальных настроек будет облегчён не в ущерб возможностям.

A2C CMS постоянно дополняется и изменяется в лучшую сторону. Следите за обновлениями!

Спасибо.

Документ подготовил Юрий Роскошинский, компания Rosinfotech .