markup-javascript.com » CSS https://markup-javascript.com Блог web-технолога Tue, 16 Nov 2010 09:15:11 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Дропдаун, выпадающее меню с эффектами на jQuery https://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/ https://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/#comments Sun, 26 Apr 2009 11:03:39 +0000 Алексей https://markup-javascript.com/?p=371 Хочу познакомить Вас с первой версией моего плагина для выпадающего меню. На данный момент эта версия позволяет добавить эффекты slide и fade, как по отдельности так и вместе, для выпадающего списка горизонтальной навигации. Плагин предназначен для двухуровневой навигации – видимый и вложенный список.

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

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


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

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

HTML код:

<ul id="nav">
    <li>
        <a href="#">Навигация</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
                <li><a href="#">HTML</a></li>
                <li><a href="#">JavaScript</a></li>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">JavaScript</a></li>
            </ul>
        </div>
    </li>
       ...
    <li>
        <a href="#">Ссылки</a>
        <div>
            <ul>
                <li><a href="#">jQuery</a></li>
                <li><a href="#">MooTools</a></li>
                <li><a href="#">JS Plugins</a></li>
            </ul>
        </div>
    </li>
</ul>

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

CSS код:

#nav li {
    position:relative;
}
#nav li div {
    position:absolute;
    top:15px;
    left:-9999px;
}
#nav li.hover div {left:0;}

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

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

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.dropDown.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('ul#nav').NavDropDown({
            duration:300,
            hoverElement:'li',
            hoverClass:'hover',
            dropHolder:'div',
            showEffect:'slide' // slide, fade, slide&fade
        });                
    });
</script>

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

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

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

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

slide&fade эффект

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:500,
        showEffect:'slide&fade'
    });                
});

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

fade эффект

$(document).ready(function(){
    $('ul#nav').NavDropDown({
        duration:800,
        showEffect:'fade'
    });                
});

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

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

]]>
https://markup-javascript.com/2009/04/26/dropdaun-vypadayushhee-menyu-s-effektami-na-jquery/feed/ 48
JavaScript библиотека для работы с изображениями https://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/ https://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/#comments Sun, 22 Mar 2009 10:16:35 +0000 Алексей https://markup-javascript.com/?p=188 Последнее время очень модна тенденция web 2.0, и поэтому очень часто слышу пожелания заказчиков максимально приблизить к этому стандарту дизайн и функционал web-сайта.

web 2.0 привнес в жизнь верстальщиков как много интересных решений, так и много каверзных нюансов.

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

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

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

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

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

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

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

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

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

Примеры:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>reflex</title>
    <link rel="stylesheet" type="text/css" href="css/all.css" />
    <script type="text/javascript" src="js/reflex.js"></script>
</head>
<body>
    <ul class="items">
        <li><a href="#"><img src="images/left.jpg" class="reflex iopacity75" alt="" /></a></li>
        <li><a href="#"><img src="images/none.jpg" class="reflex iopacity75 iborder2 icoloreeeeee idistance4" alt="" /></a></li>
        <li><a href="#"><img src="images/right.jpg" class="reflex iopacity20 itiltnone iheight20" alt="" /></a></li>
    </ul>
</body>
</html>

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

Glossy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>glossy</title>
    <link rel="stylesheet" type="text/css" href="css/all.css" />
    <script type="text/javascript" src="js/glossy.js"></script>
</head>
<body>
    <ul class="items">
        <li><a href="#"><img src="images/left.jpg" class="glossy" alt="" /></a></li>
        <li><a href="#"><img src="images/none.jpg" class="glossy iradius40" alt="" /></a></li>
        <li><a href="#"><img src="images/right.jpg" class="glossy noshadow" alt="" /></a></li>
    </ul>
</body>
</html>

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

]]>
https://markup-javascript.com/2009/03/22/javascript-biblioteka-dlya-raboty-s-izobrazheniyami/feed/ 6