Поиск сообщества

Выпадающие меню позволяют пользователям выбрать один из нескольких пунктов меню. Разметка такого меню предназначена для работы совместно с Яваскрипт модулем ips.ui.menu. Использование Меню состоит из инициирующего элемента, и самого элемента меню: <!-- Инициализатор --> <a href='#elMyMenu_menu' id='elMyMenu'>Открыть меню</a> <!-- Меню --> <ul id='elMyMenu_menu' class='ipsMenu'> ... </ul> ID меню должен быть таким же, как ID элемента инициализатора, с суффиксом _menu. Если элемент инициализатора является ссылкой, её href должен быть якорем на ID элемента меню. Это делает меню доступным, даже если Javascript отключён в вашем браузере. Основное меню Основное меню может иметь следующую разметку: <ul class='ipsMenu ipsHide'> <li class='ipsMenu_item'><a href='#'>Пункт 1</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 3</a></li> <li class='ipsMenu_sep'><hr></li> <li class='ipsMenu_item'><a href='#'>Пункт 4</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 5</a></li> </ul> Это будет отображаться следующим образом: пример. Пункт 1 Пункт 2 Пункт 3 Пункт 4 Пункт 5 ipsMenu это основной класс для элемента меню. Пункты в меню должны иметь класс ipsMenu_item, с элементом ссылки в нём. Разделитель пункта может быть добавлен путём указания пункта с классом ipsMenu_sep, содержащий элемент <hr>. Обратите внимание, что позиционирование и стрелка добавляются автоматически, с помощью Яваскрипт модуля меню; они не должны быть указаны вручную. Стрелка может быть удалена, если это необходимо, путём добавления класса ipsMenu_noStem к элементу меню. Отключение пунктов меню Отдельные пункты меню могут быть отключены путём добавления класса ipsMenu_itemDisabled к элементу списка: например. Пункт 1 Отключённый пункт 2 Пункт 3 Обратите внимание: отключение пункта меню не полностью работоспособно; в браузерах, не поддерживающих CSS стили поведения курсора, клик по отключённом пункту в меню будет по-прежнему действителен. Убедитесь, что ваш Яваскрипт правильно взаимодействует с кликами по отключённым пунктам меню. Размер меню По умолчанию, меню будет иметь стандартную ширину. Дополнительный класс может быть указан в элементе меню для определения ширины меню. ipsMenu_auto - меню будет отображено с такой шириной, какая необходима, при этом выдерживая минимальную ширину в 200px и максимальную ширину в 500px; ipsMenu_narrow - 200 пикселей в ширину; ipsMenu_normal - 300 пикселей в ширину; ipsMenu_wide - 450 пикселей в ширину; Селективные меню Селективное меню позволяет пользователю переключаться между пунктами меню, полезно для включения/отключения настроек. Для функционирования этой возможности, должен быть использован Яваскрипт модуль. Меню может быть селективным путём добавления класса ipsMenu_selectable. Пункт меню может быть отображён как выбранный, с помощью добавления класса ipsMenu_itemChecked к элементу списка. Разметка для селективного меню может выглядеть следующим образом: <ul id='elMenu2_menu' class='ipsMenu ipsMenu_normal ipsMenu_selectable ipsHide'> <li class='ipsMenu_item'><a href='#'>Пункт 1</a></li> <li class='ipsMenu_item ipsMenu_itemChecked'><a href='#'>Пункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Пункт 3</a></li> </ul> Это будет отображаться следующим образом: пример. Пункт 1 Пункт 2 Пункт 3 Подменю Подменю создаются путём встраивания меню друг в друга. Для этого пропишите класс ipsMenu_subItems к пункту, который должен содержать подменю, и само подменю внутри элемента. Например: <ul id='elMenu3_menu' class='ipsMenu ipsMenu_normal ipsHide'> <li class='ipsMenu_item'> <a href='#'>Пункт 1</a> </li> <li class='ipsMenu_item ipsMenu_subItems'> <a href='#'>Пункт 2 (с подменю)</a> <ul class='ipsMenu ipsMenu_wide ipsHide'> <li class='ipsMenu_item'><a href='#'>Подпункт 1</a></li> <li class='ipsMenu_item'><a href='#'>Подпункт 2</a></li> <li class='ipsMenu_item'><a href='#'>Подпунктm 3</a></li> </ul> </li> </ul> Это будет отображаться следующим образом: пример. Пункт 1 Пункт 2 (с подменю) Подпункт 1 Подпункт 2 Подпункт 3