Мир изумительно хорош, пока работаешь, чтобы ЖИТЬ!
А не живешь, чтобы РАБОТАТЬ!


Меню. Виды и настройка


Меню сайта играет важную роль для поисковых серверов. При этом меню сайта является имиджевой составляющей дизайна сайта. Система генерирует меню "на лету", чтобы при добавлении страниц или их удалении, при переименовании страницы и т.п. действиях, не пришлось где-то править меню руками. Т.е. меню генерируется программно, а его оформление задается в файле стиля menu.css. Какие виды меню можно использовать на странице?

Горизонтальное меню под шапкой сайта. Обозначается в шаблоне переменной {TopMenu}. ТопМеню применяется на страницах этого сайта. Вертикальное меню слева страницы. Обозначается переменной {LeftMenu}. Следует отметить, что горизонтальное и вертикальное меню не могут одновременно находиться на одной странице, так как оба меню используют один и тот-же механизм всплытия подменю. Разница лишь в том, что для топ меню подменю появляются снизу, а для левого меню справа.

Древовидное меню. Пример показан на рисунке слева. Поскольку страницы сайта могут иметь родительские, то древовидная структура показывает что и куда входит. Как видите, если в горизонтальном и вертикальном меню вложенные страницы показываются в виде выпадающих списков, то в древовидном меню все страницы показаны сразу, но с некоторым отступом, задаваемым в файле стиля menu.css. Из меню вытекает, что странице "Каталог продукции" принадлежит страница "Запчасти для оборудования убойного цеха". А в "Запчасти..." входят страницы самих запчастей. Древовидное меню вставляется в шаблон переменной {MENU}.

Путь от начала до страницы можно вывести переменной { PATH}.

Меню из страниц корневого уровня сайта (уровневое меню - уровень старта) . Другими словами, меню из страниц нулевого уровня. Т.е. меню содержит только страницы не подчиненные родителям. Для вставки такого меню следует воспользоваться переменной { MENU_START_LEVEL}

Меню сайта для шаблона/подшаблона
 как перечисление страниц подчиненных странице, указанной в настройках пункта "Шаблон и подшаблоны". (см. поле "Начало MENU_SITE_LEVEL от") Обозначается {MENU_SITE_LEVEL }. Для этой переменной система построит уровневое меню - уровень прикрепленных к указанной странице.

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

. Список страниц, прикрепленных к текущей странице - (уровневое меню - уровень прикрепленных) добавить переменную {MENUPAGE}. Для стартовой страницы прикрепленных к ней не может быть. Поэтому в ее настройках имеется возможность указать страницу сайта для которой будут показаны прикрепленные при входе в стартовую (см. "Для меню подчиненных взять из").

Мегаменю в последнее время стало модным. Для организации такой навигации следует воспользоваться меню корневого уровня сайта. Но допустимы любые  уровневые меню. Каждая страница сайта имеет свой номер - это хорошо видно на стартовой странице админ.части сайта. И когда пользователь сайта проводит мышью над пунктом уровневого меню, система пытается показать блок информации (div) с наименованием (ID), состоящем из слова "mega" и номера страницы. Например,  добавьте на страницу блок с ID "mega1" и разместите на нем некую информацию. Для этого блока также укажите класс mega. При проведении указателя мыши над пунктом уровневого меню от страницы 1 блок с ID равным "mega1" будет показан под этим пунктом меню. Ниже показан как аналог пример при наведении на блок в теле страницы. Для него указано действие "при наведении мыши" - вызов функции MenuIn(this,"primer") из механизма вывода мегаменю. 

наведите указатель сюда, чтобы посмотреть пример

Важно отметить, что содержимое блока может быть заполнено динамически системой всплывающих подсказок. Это позволяет, в частности, заполнить блок перечнем изображений, сопроводив их описаниями этих изображений. Изображения и описания берутся из какой-либо папки с изображениями. Можно также прикрепить ссылки на индивидуальные страницы, если они есть для этих изображений. Подробнее см. в конце описания системы всплывающих подсказок. Анимация появления блока выполнена также настройкой - подробнее об этом вы можете прочитать в документации. Кроме того, в мегаменю можно вставить переменную MEGATREEMENU, которая сформирует древовидное меню, построенное от потомков страницы, указанной в настройках шаблона "Меню StartLevel,MegaTree строить от".

Надо отметить, что вид меню совсем не обязательно будет таким как показано на рисунках. В файле стилей (menu.css) вы можете настроить вид меню под необходимый дизайн. Стилями можно даже превратить древовидное меню в меню верхнего уровня с выпадающими списками из подменю.

Поскольку вставить меню просто - достаточно в нужное место шаблона вставить соответствующую переменную - то самое время разобраться что и как настраивается, чтобы меню выглядело так, как необходимо. Небольшой экскурс в настройку новой страницы. Любая страница сайта прикреплена либо к корню меню, либо к какой либо странице. Например, данная страница прикреплена к странице "Документация", а та, в свою очередь, к главному меню. Это как раз и обеспечивает иерархию меню. Принадлежность страницы указывается в настройках. Вот как сделана настройка для этой страницы:

Примечание! Если меню сайта имеет древовидную структуру, необходимы родительские страницы, к которым прикрепляются "потомки" родительской. Не всегда требуется выводить родительские страницы, чаще требуется, чтобы наименование родительской страницы было показано в меню для наглядности, но при выборе ее в меню следует попадать в "потомок". Чтобы система выполняла это, следует в такой родительской странице указать псевдоним (см. изображение выше - поле Псевдоним) в виде символа звездочка за которым следует номер страницы (id) на которую следует попадать в случае выбора в меню такой родительской страницы. Например, вот так: *4 

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

Именно стили задают нужный вид меню. В настройках страницы можно также указать изображение для пункта меню, представляющего страницу. Это изображение добавляется на фон, где представлено наименование пункта меню. Если наименование пункта меню для страницы просто указать символ * (звездочка), то в меню будет представлено только изображение. Если наименование пункта меню для страницы оставить пустым, то страница в меню будет отсутствовать (а значит и все к ней прикрепленные).

Это пример всплывающего блока, например для организации так называемого "мегаменю".
Для этого блока должен быть указан класс стиля "mega".

В файле стилей должно быть прописано:
.mega { position:absolute;
left:-999em;  }

 Далее следует информация для тех, кто знаком с HTML. Не смотря на то, что в предоставляемый шаблон сайта поставляется файл menu.css, который содержит настроенные классы для всех меню с описаниями, система постоянно развивается и в файле может содержаться устаревшая информация. Наиболее свежую информацию вы можете найти ниже.

Древовидное меню организовано через списки UL, при этом элементы списка LI содержат либо ссылку A либо вложенный UL. При этом каждый UL имеет класс "tree_LN", где N - номер уровня списка, от 0 до 3. Это позволяет задавать разные стили для разных уровней меню. UL нулевого уровня также обозначен id=Menu. Каждый LI древовидного меню имеет класс "Menu". Если для пункта меню в настройках страницы указано фоновое изображение, то к классу Menu добавляется класс imgForTreeMenu. Пункт меню представляющий текущую страницу имеет дополнительно  класс TekMenu.

Уровневое меню (стартового уровня, братских страниц или входящих в текущую) также организовано через списки UL. Каждый UL имеет свой ID. Для стартового уровня ID=StartMenu, для братского ID=LevelMenu, а для входящих ID=Menu. Каждый LI уровневого меню имеет класс. Для стартового это "UpLevelMenu", для братского это "ParentLevelMenu", а для входящих "PageLevelMenu". В каждое LI вложена ссылка A. Ссылки A, имеющие изображения имеют один из перечисленных классов: "imgForUpLevelMenu", "imgForParentLevelMenu", "imgForSiteLevelMenu" или "imgForPageLevelMenu". Ссылка A текущей страницы имеет дополнительно класс "tek".

Меню для шаблона сайта  является списком страниц подчиненных странице указанной в настройках сайта в пункте "Шаблон и подшаблоны". Также организовано через списки UL. Имеет ID="SiteLevelMenu". Каждый LI меню имеет класс SiteLevelMenu. Ссылка A текущей страницы имеет дополнительно класс "tek". 

Верхнее горизонтальное и левое меню организованы иначе. Здесь ссылки А на страницы помещены в блоки DIV. Блок для верхнего меню имеет ID="topMenu" и все ссылки A имеют класс "topMenu". Блок для левого меню имеет ID="LeftMenu" и все ссылки A имеют класс "LeftMenu". Ссылки на пункты меню, имеющие в настройках изображения имеют дополнительно класс "imgForTopMenu". Ссылки на текущую страницу также имеют дополнительно класс "tektop" - для верхнего и левого одинаково. Нельзя размещать верхнее и левое меню одновременно на одной странице. Кроме того, каждая ссылка имеет ID="punktN", где N- это номер страницы этого пункта меню. Каждый уровень меню, кроме самого верхнего, имеет также класс MenuLevelN, где N-номер уровня. Это полезно для задания разных стилей меню разного уровня. Кроме того, для каждого уровня можно задать в javascript переменные dopPosMenuLevelNx и dopPosMenuLevelNy, где N-номер уровня, которые могут корректировать позицию левого верхнего угла открываемого меню. Это может пригодиться, если применены стили трансформаций для данного уровня и самом меню следует несколько сместить относительно родительского меню.

Путь до текущей страницы организован в виде подряд идущих A с классом "path_a".
Мегаменю. Это блоки с классом mega. Требуется указать для этого класса position:absolute !important. А также left:-999em, чтобы после загрузки блоки с этим классом не были видны на странице. Для мегаменю также применимы dopPosMenuLevel1x и dopPosMenuLevel1y, описанные выше. Если мегаменю содержит анимированные элементы, следует добавить для класса "mega" также стиль display:none - иначе анимация не будет срабатывать при появлении мегаменю. Если мегаменю содержится в блоке DIV, созданном в визуальном редакторе, следует указать тип блока 'cssdisplay', так как видимость блока определяется стилями.


WEB-платформа для владеющих PHP
» новации,ускоряющие разработку <IMG>-вых сайтов!