В будущем я хочу модифицировать его до более универсальной версии, с возможностью отображения многоуровневой навигации как вертикальной так и горизонтальной. Но пока продемонстрирую те возможности которые можно наблюдать сейчас.

Пример №1 выпадающего меню (slide эффект):

Вы можете открыть пример в новом окне.

Рассмотрим детальнее структуру HTML и CSS кода для примера. Я опущу элементы которые не важны для выпадающего меню и отвечают за вид навигации и выделю лишь те которые нужны для плагина.

HTML код:

Для выпадающего списка нам нужен родитель для манипулирования высотой объекта, это нужно для slide эффекта, с fade эффектом его можно не вставлять.

CSS код:

Для родительского элемента лучше не задавать никаких стилей кроме позиционирования относительно родителя. И самое главное на что хочу обратить Ваше внимание, для скрытия вложенного списка я использую left:-9999px; а не display:none, т.к. при display:none JavaScript не может адекватно определить текущие параметры элемента – высоту и т.п. В общем в примере стили очень просты, задается лишь положение вложенного элемента, конечно же вы можете определять дополнительные свойства соответствующие вашему дизайну.

Теперь детальнее по плагину:

Детальнее по параметрам:

Показанные параметры являются параметрами по умолчанию.

• duration – время анимации в миллисекундах (300 = 0.3сек)
• hoverElement – элемент на который будет ставится класс “hover”.
• hoverClass – название класса для элемента при ховере
• dropHolder – селектор элемента родителя для вложенного списка
• showEffect – эффект выпадения вложенного списка (slide, fade, slide&fade)

Рассмотрим еще несколько примеров:

slide&fade эффект

Вы можете открыть пример в новом окне.

fade эффект

Вы можете открыть пример в новом окне.

Скачать плагин

Часто на страницах встречаются картинки на которые применены множество различных эффектов – закругленные уголки, тени, рамки, отражения и т.п. Большинство из этого можно реализовать и с помощью html/css, но т.к. на странице, обычно в большинстве случаев, изображения разных размеров, то верстка крайне затрудняется, нужно применять множество html/css элементов, что приводит к громоздкости кода.

Поэтому сегодня хочу Вас познакомить с прекрасной библиотекой Кристиана Эффенбергера CVI, которая помогает решит ряд проблем с версткой эффектов для изображений.

Библиотека имеет около десятка js плагинов для различных эффектов, наиболее интересные я покажу в примерах.

1. 
   shiftzoom – плагин добавляющий к изображению функционал зумирования.
2. 
   busy – плагин добавления и удаление индикатора загрузки.
3. 
   sphere – плагин для отображения эффекта сферы.
4. 
   corner – плагин позволяет добавить эффекты закругленных углов, внутреннею и внешнею тень.
5. 
   glossy – плагин позволяет добиться эффекта стекла с отражением света, а также тень и закругление углов.
6. 
   instant – плагин добавляет рамку, позволяет делать наклоны изображения и подписи.
7. 
   bevel – этот плагин очень похож на glossy, но в нем можно менять цвета теней и вид внутренней рамки.
8. 
   slided – название плагина говорит само за себя, он добавляет рамку в виде слайда, ее можно настраивать изменяя цвет, тень и положение слайда.
9. 
   filmed – плагин добавляет рамку стилизованную под кадр фильма, цвет и положения рамки настраиваются.
10. 
    mapper – плагин используя поле ссылок изображения (image map), добавляет эффект подсветки поля.
11. 
    curl – если вы хотите добавить эффект завернутого уголка, этот плагин для Вас.
12. 
    edge – текстурная рамка.
13. 
    reflex – плагин добавляет эффект отражения, размеры и прозрачность настраиваются.
14. 
    loupe – Лупа для изображения.

По плагину можно отметить:

Начну сразу с минуса, т.к. он существенен – библиотека является платной для сайтов приносящих какую либо прибыль. Стоимость использования одного из плагинов для одного доменного имени начинается от 20 евро.

Сайты не имеющие прибыли библиотекой могут пользоваться бесплатно. Детальнее по этому поводу можно почитать в лицензии продукта.

Теперь по плюсам:

• Хорошая кроссбраузерность (Mozilla Firefox 1.5+, Opera 9+, Safari and IE6+)
• Минимум для инициализации (подключить плагин, указать нужный класс в изображении)
• Отличная документация (англ.)

Примеры:

Отражение (reflex):

Открыть пример в новом окне

Glossy:

Открыть пример в новом окне