Блог ⁄ Вёрстка ⁄ Закладки с fade

Впервые я такой приём (плавной смены цветов) использовал при вёрстке аукциона своему партнёру из Химок. Скрипт fade впервые засветился в моём блоге в статье Вертикальное меню с fade-эффектом, там же он и разобран детально. Посмотреть как работает fadetabs.

Особенности реализации закладок: закладки свёрстаны списком, границы border заданы в стилях ссылок, правая граница последней вкладки реализована несемантическим блоком с id'ом wrap. Ниже приведён листинг html-кода закладок.

<ul id="nav">
    <li id="current"><span class="current">Главная</span></li>
    <li><a id="item0" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">Добавить</a></li>
    <li><a id="item1" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">Правила</a></li>
    <li><a id="item2" onmouseover="fade(this.id, 'orfade,fontfade')" onmouseout="fade.back(this.id, 'orfade,fontfade')" href="#">Контакты</a></li>
    <li><div id="wrap"></div></li>
</ul>

Пример закладок с fade можно скачать и посмотреть у себя. Скоро выложу бесплатный шаблон для доски объявлений, менюха будет реализована закладками с fade.

UPD. А вот и шаблон доски объявлений. Год назад я его использовал, но теперь той доски уже нет. Можете скачивать и использовать.