Создание выпадающего меню

Что такое выпадающее меню - это список ссылок, который появляется на экране при наведении мышкой на один из пунктов меню. В рамках конструктора e-Gloryon сам список ссылок представляет собой подменю, созданное с помощью карты сайта.

Скрипт выпадающего меню для конструктора сайтов e-Gloryon реализован на языке JavaScript с использованием библиотеки Jquery. Для его установки понадобится выполнить несколько последовательных шагов.

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

Скачать библиотеку jquery.js и скрипт меню submenu.egloryon.js себе на компьютер.

Загрузить файлы jquery.js и submenu.egloryon.js в библиотеку файлов на вашем сайте. Можно использовать FTP-доступ или загружать через административную панель.

Нужно, чтобы на всех страницах сайта были подключены эти файлы. Для этого в верхнем меню конструктора нажмем "Атрибуты" и откроем в появившемся окошке вкладку "Flash-анимация". В текстовое поле вставим код:

<script type="text/javascript" src="/content/files/jquery.js"></script>
<script type="text/javascript" src="/content/files/submenu.egloryon.js"></script>

Механизм выпадающего меню установлен. Все, что осталось - это настроить по желанию внешний вид выпадающего меню через "Изменение дизайна" - пункт "главное меню" и в нем - "вложенное меню".

Q1: Совет:

Если в вашем дизайне главное меню находится справа, то в шаге 2 вам следует вместо файла submenu.egloryon.js скачать файл submenu-r.egloryon.js. Затем загрузить его в библиотеку файлов и подключить аналогичным образом:

<script type="text/javascript" src="/content/files/submenu-r.egloryon.js"></script>
Q2: Совет:

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

Q3: Совет:

Скрипт выпадающего меню добавляет определенным пунктам меню специальные css-классы, с помощью которых можно изменить их вид. Например:

  • пункты, при наведении на которые, будет выпадать подменю, имеют класс "expandible";
  • пункты, чье подменю раскрыто в данный момент, имеют класс "expanded";
  • пункты, чье подменю закрыто в данный момент, имеют класс "collapsed".

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

#pageMenu .menu.expandible {
    color: red;
}
#pageMenu .menu.expandible.expanded {
    font-weight: bold;
}

Если этот код добавить в css сайта, меню приобретет следующие свойства:

  • Те пункты меню, при наведении на которые, будет выпадать подменю, отобразятся красным цветом;
  • Ссылки, чье подменю раскрыто, отобразятся жирным шрифтом.