Меню
В этой статье я рассмотрю пример объекта на сайте представляющего собой меню. Меню -- это многоуровневая система кнопок, в которой новый уровень кнопок открывается при клике на предыдущий уровень или при наведении курсора мыши. В каком-то смысле это вариант скрытого текста, открывающегося по условию. Меню очень часто используют в компьютерных программах, которые делают ту или другую операцию по выбору. Пользователь ходит по меню и выбирает операцию. Я рассмотрю такое меню, в котором операцией является ссылка (тег якоря <a>), то есть клик на кнопке выполняет гиперссылку. Но реально вместо гиперссылки можно вызывать javascript функцию и тогда меню точно соответствует тому назначению, в каком он используется в программе. Конкретные применения я здесь рассматривать не буду. Скажу только, что идея такого меню принадлежит Stu Nicholls и изложена на его сайте
Меню можно делать самыми разными способами, в том числе и c помощью javascript. Данное меню сделано с использованием только CSS, то есть псевдокласса :hover. При этом данное меню не работает в старых версиях браузера Интернет Экплорер, для этого надо применять другой код, но я не стал этого делать. Можно просто попросить сменить браузер. В качестве основы для меню тоже можно использовать разные теги HTML. Мы будем использовать вложенные неупорядоченные списки, то есть теги ul, li. Как обычно, я сначала покажу полный код сайта, содержащего меню, а потом расскажу что этот код означает. Код можно скопировать в отдельный файл и посмотреть. Для этого кликаете мышкой в окне редактора, потом нажимаете клавиши Ctrl+A и сразу после того, как текст посинеет, клавиши Ctrl+С. Текст скопировался в буфер обмена. Открываете редактор Notepad в меню Accessories и нажимаете там клавиши Ctrl+V. При этом разумно курсор поставить в начале окна, он там должен быть автоматически. После того как текст появился в окне, спасаете его через меню редактора или клавишами Ctrl+S.
Теперь я объясню пример. Первые теги достаточно очевидны. В теге <style> записаны параметры класса menu, а также всех внутренних элементов, содержащихся внутри класса. Более подробно об этом позже. А сейчас идем дальше. В теге body заказывается внешняя область сайта, которая выставляется по центру окна браузера, она имеет цвет, чтобы ее было видно, размеры и позицию. Внутри нее будет находиться весь сайт. Но у нас есть только заголовок, остальное не прописано. А затем идет область div с классом menu, то есть то, что надо. В меню стоит главный список, в нем строка, внутри которой еще один список, а внутри второй строки этого списка еще один список. Наше CSS форматирование рассчитано на три вложенных списка, хотя при желании процесс можно усложнить и на четвертое вложение, но это уже перебор. Даже за три вложения можно очень компактно записать до 200 кнопок. В каждой строке списка есть тег якоря, у которого можно указать адрес и подсказку. Теги якоря, которым соответствует вложенный список имеют свой класс, для того, чтобы выделить их цветом. Так задумал автор, но я это выделение снял, хотя возможность оставил. Для выделения кнопки второго уровня имеющего свой список я использую справа от названия кнопки юникод с номером 9658, который показывает треугольник, указывающий направо.
Легко заметить, что структура вложенных списков достаточно простая и эти списки прекрасно бы работали даже без CSS форматирования. Но весь фокус в том, что форматирование способно кардинальным образом изменить вид списков. Итак, начнем смотреть что делают CSS параметры. Прежде всего сам класс menu в чистом виде, который задает область div. Чтобы иметь полную свободу поставить меню куда угодно, хоть на картинку, разумно использовать абсолютное позиционирование относительно области сайта. Далее заказываем высоту области, тип шрифта, координаты размещения, а z-index:100 означает, что меню будет показываться поверх всех других материалов на сайте. Теперь форматируем главный список. Тут важна инструкция list-style:none которая отменяет стандартное форматирование. Также делаются нулевые поля вне и внутри кнопок. Далее форматируются строки главного списка таким образом, чтобы они следовали друг за другом слева направо. А вот для списков второго уровня инструкция display:none; отменяет их показ, они будут изначально не видны. Далее форматируются ссылки внутри строк списка первого уровня. Им придается вид кнопки и можно сделать такой вид, какой душе угодно. Я сделал так как мне нравится. Следующая инструкция показывает как менять цвет если курсов мыши находится над ссылкой, это событие описывается псевдоклассом :hover. Собственно в этом и главный фокус данного меню. Обычно события обрабатываются с помощью функций javascript. Но данное событие уже можно описать с помощью CSS. Надеюсь дальше можно не продолжать. Идут инструкции как надо показывать скрытые кнопки второго и третьего уровня при возникновении события hover. Я отмечу только, что при показе кнопок третьего уровня есть два варианта: стандартный, когда кнопки списка ul третьего уровня показываются справа и ul с классом left, в этом случае кнопки показываются слева. В моем примере это не использовано, но это тоже можно делать.
Итак, теперь ясно, что сделать многоуровневое меню не просто, а очень просто. Правда данное меню не совсем стандартное, потому что внутренние кнопки открываются не по клику на внешней кнопке, а при наведении курсорва мыши. Кроме того, в нем все кнопки можно сделать кликабельными. Но в каком-то смысле это даже хорошо, что не надо лишний раз кликать, и нет пустых кнопок, все работают. Лично мне такое меню очень нравится. В заключение я расскажу как эти кнопки используются на данном сайте. На сайте справа стоит общая область и по клику на каждой кнопке вызывается функция javascript, которая заполняет эту область своим содержанием. Это немного похоже на фреймы, но пафос в том, что никаких фреймов нет, содержание заменяется мгновенно по команде javascript: innerHTML. Правда за такую быстроту приходится платить тем, что все содержание записывается в строки текстового массива внутри js файла и все содержание грузится сразу. Но это тоже неплохо. Дело в том, что сейчас браузеры кешируют большие сайты и реально загрузка происходит только первый раз, а потом используется спасенная копия. И значит сайт все равно будет быстро работать, если его контент не меняется каждый день. Но это только одно из применений меню. Могут быть и другие, причем много.
Автор: Виктор Кон, 9.09.2013
