Сегодня, дорогие дети, я расскажу вам сказку о том, как сделать вертикальное многоуровневое меню с fade-эффектом. Для справки, fade-эффект — это плавное изменение цвета. Получается красиво. Скрипты и стили весят мало, дополнительные библиотеки, вроде JQuery или Prototype не требуются.
Собственно идея и скрипт fade-эффекта заимствованы с сайта Игоря Цыгырлаша, а коды самой менюхи настолько распространены в интернетах, что мимо просто невозможно пройти. Готовый скрипт меню с fade-эффектом в архиве. UPD. Вот простое вертикальное меню без fade. Ниже поясню основные моменты внедрения.
Во-первых, то что в шапке:
<link rel="stylesheet" type="text/css" href="styles/fademenu.css" />
<script type="text/javascript" src="jscripts/fade.js"></script>
<script type="text/javascript">
fade.addRule('fontfade',"#cc945e","#fff","color", 40, 1);
fade.addRule('bgrdfade',"#fff","#cc945e","background-color", 40, 1);
</script>
<!--[if gte IE 5.5000]>
<script src="jscripts/nav.js" type="text/JavaScript"></script>
<![endif]-->
Пояснение аргуметов функции addRule из строки fade.addRule('fontfade',"#cc945e","#fff","color", 40, 1);:
- fontfade - название конкретного правила изменения цвета, задаётся верстальщиком;
- #cc945e - начальный цвет;
- #fff - конечный цвет цвет;
- color - CSS-свойство, для которого применяется правило изменения цвета;
- 40 - за сколько «кадров» начальный цвет перейдёт в конечный;
- 1 - сколько милисекунд будет отображаться каждый «кадр»;
Честно говоря, в разных браузерах скрипт работает с разной скоростью, в независимости от того, сколько милисекунд задано в последнем аргументе. Медленнее всех получается в IE, ну, кто бы сомневался, шустрее всех рендеринг выдаёт Google Chrome.
Непосредственно код менюхи, приведу только первый пункт и на нём разъясню основные моменты:
<ul id="nav">
<li><a href="#" id="item1" onmouseover="fade(this.id, 'fontfade,bgrdfade')" onmouseout="fade.back(this.id, 'fontfade,bgrdfade')">Главная</a></li>
</ul>
Идентификатор nav у элемента <ul> назван так не случайно - на него заточен скрипт nav.js - это «костыли» для 6-го эксплорера. В принципе, можно поменять название в любое время, одновременно сменив его в скрипте. Скрипт присваивает элементам списка класс iehover. За счёт чего ИЕ раскрывает следующий уровень меню. Каждому элементу, к которому будут применяться правила перетекания цвета, присваивается уникальный id с порядковым номером, item1, item2 и т.д. Можно по-другому, главное — уникальность. Первый аргумент функции fade — идентификатор, к элементу которого применятся правила, указанные во втором аргументе. Решение на редкость изящное. Более понятное и простое объяснение в статье автора «Javascript fading — плавное изменение цветов».
