Web-программирование: «Java Script(JS): Библиотека визуальных компонентов. Очень мощное меню. |
Автор megabax | |||||
02.06.2013 г. | |||||
Web-программирование: «Java Script(JS): Библиотека визуальных компонентов. Очень мощное меню.
Скачать файлы с описанными классами можно здесь(версия 1.6). Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы разделов "Пишем Easy CMS" и Разработка сервиса сайта на PHP на примере партнерской программы).
Сегодня мы продолжим изучать библиотеку визуальных компонентов. Сначала скачайте новую версию библиотеки (версия 1.6). Затем, давайте рассмотрим пример, как при помощи этой библиотеки можно организовать меню. Как делать меню, мы, конечно, уже изучали (см. урок с примером меню), но на этот раз мы создадим меню при помощи библиотеки визуальных компонентов, там гораздо больше возможностей для настройки, плюс меню многоуровневое. К тому же данная библиотека имеет понятный интерфейс. И так, вот пример кодам меню HTML+JS:
А вот настройки меню в виде файла CSS (menu.css):
А вот результат работы данной программы:
Что бы изменить внешний вид меню, нужно настроить его css файл. Сегодня я опишу некоторые css классы, используемые в библиотеке, а описание остальных возможностей класса cXBrMenu будет рассмотрено в будущих уроках. И так, menu_top_node отвечает за самый верхний уровень меню, при чем только за те пункты, которые имеют подменю. А вот класс CSS active_menu_top_node отвечает за пункты меню верхнего уровня, которые не имеют подменю. Посмотрите внимательно на эти настройки:
Что мы видим? Фон тех пунктов меню, которые не имеют подменю, более светлый, чем тех, что имеют. Тоже самое мы видим и на скриншое (см. рисунов выше). А если мы сделаем вот так?
то фон пунктов без подменю будет зеленый:
На сегодня все, но к теме меню мы еще вернемся.
|
« След. | Пред. » |
---|