Заходи
Гость

Хостинг

Статистика
Яндекс.Метрика Счетчик PR-CY.Rank
Онлайн всего: 2
Гостей: 2
Пользователей: 0

Ccылки

Свежак

Главная » 2013 » Декабрь » 6 » Круговая навигация с эффектом пузыря на JQUERY
21:17
Круговая навигация с эффектом пузыря на JQUERY

Круговая навигация с эффектом пузыря на JQUERY

 

 

В этом уроке мы будем создавать круговую навигацию с JQuery. Идея состоит в том, чтобы наши  круглые значки навигации, образовывали  пузырь при наведении на них. Мы будем использовать смягчения плагина JQuery  для улучшения этого эффекта.

 

ПОСМОТРЕТЬ ДЕМО                       СКАЧАТЬ ИСХОДНИКИ

 

Итак, давайте начнем.

РАЗМЕТКА

HTML будет состоять из главного DIV, куда  мы добавим класс навигации и идентификатора. Внутри основного DIV у нас будут располагаться  навигационные элементы:

 

<div class="navigation" id="nav">

    <div class="item user">

        <img src="images/bg_user.png" alt="" width="199" height="199" class="circle"/>

        <a href="#" class="icon"></a>

        <h2>User</h2>

        <ul>

            <li><a href="#">Profile</a></li>

            <li><a href="#">Properties</a></li>

            <li><a href="#">Privacy</a></li>

        </ul>

    </div>

    <div class="item home">

        <img src="images/bg_home.png" alt="" width="199" height="199" class="circle"/>

        <a href="#" class="icon"></a>

        <h2>Home</h2>

        <ul>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Contact</a></li>

        </ul>

    </div>

    ...

</div>

 

В качестве примера, мы будем показывать первые два пункта. Как вы можете видеть, мы добавляем внутренние DIV классы:  с элементом и именем адаптированного класса для этого элемента навигации, такие как "пользователь" или "дом". Таким образом, мы можем отобразить соответственно все внутренние элементы. В этом случае, мы хотим отобразить элемент ссылки с "иконкой" класса в соответствии с этими классами, вы это сможете увидеть в CSS.

CSS

Давайте посмотрим на стиль. Во-первых, давайте определим некоторые общие стили:

 

.navigation{

    margin: 0px auto;

    font-family: "Trebuchet MS", sans-serif;

    font-size: 24px;

    font-style: normal;

    font-weight: bold;

    letter-spacing: 1.4px;

}

 

Теперь мы будем использовать абсолютное позиционирование для элемента:

 

.navigation .item{

    position:absolute;

}

 

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

 

.user{

    top:125px;

    left:110px;

}

.home{

   top:50px;

   left:360px;

}

.shop{

   top:90px;

   left:625px;

}

.camera{

   top:230px;

   left:835px;

}

.fav{

   top:420px;

   left:950px;

}

 

Элементы ссылка иконок  будут иметь следующий общий стиль:

 

a.icon{

    width:52px;

    height:52px;

    position:absolute;

    top:0px;

    left:0px;

    cursor:pointer;

}

 

Мы можем определить каждому  значку соответствующего элемента:

 

.user a.icon{

    background:transparent url(../images/user.png) no-repeat 0px 0px;

}

.home a.icon{

    background:transparent url(../images/home.png) no-repeat 0px 0px;

}

.shop a.icon{

    background:transparent url(../images/shop.png) no-repeat 0px 0px;

}

.camera a.icon{

    background:transparent url(../images/camera.png) no-repeat 0px 0px;

}

.fav a.icon{

    background:transparent url(../images/fav.png) no-repeat 0px 0px;

}

 

Так как мы используем  изображение для каждого значка, мы можем просто определить класс "наведения" следующим образом:

 

.navigation .item a.active{

    background-position:0px -52px;

}

 

Образ круга  будет иметь следующий стиль:

 

.item img.circle{

    position:absolute;

    top:0px;

    left:0px;

    width:52px;

    height:52px;

    opacity:0.1;

}

 

Элемент содержания, как и заголовок, и список ссылок будет определен в стиле следующим образом:

 

.item h2{

    position:absolute;

    width:147px;

    height:52px;

    color:#222;

    font-size:18px;

    top:0px;

    left:52px;

    text-indent:10px;

    line-height:52px;

    text-shadow:1px 1px 1px #fff;

    text-transform:uppercase;

}

.item h2.active{

    color:#fff;

    text-shadow:1px 0px 1px #555;

}

.item ul{

    list-style:none;

    position:absolute;

    top:60px;

    left:25px;

    display:none;

}

.item ul li a{

    font-size:15px;

    text-decoration:none;

    letter-spacing:1.5px;

    text-transform:uppercase;

    color:#222;

    padding:3px;

    float:left;

    clear:both;

    width:100px;

    text-shadow:1px 1px 1px #fff;

}

.item ul li a:hover{

    background-color:#fff;

    color:#444;

    -moz-border-radius:5px;

    -webkit-border-radius:5px;

    border-radius:5px;

    -moz-box-shadow:1px 1px 4px #666;

    -webkit-box-shadow:1px 1px 4px #666;

    box-shadow:1px 1px 4px #666;

}

 


Давайте добавим немного JavaScript.

JAVASCRIPT

JavaScript очень прост. Во-первых, добавьте это к вашему HTML коду  до закрывающего тега "body”:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script type="text/javascript" src="jquery.easing.1.3.js"></script>

 

Идея состоит в том, чтобы изображение пузыря  появлялось при наведении мыши на элемент навигации. Мы делаем это, при помощи анимации ширины, высоты. Для того что бы эффект появляться чуть выше значка, мы должны позиционировать его левее.  Мы  должны сместить его вверх и влево с помощью отрицательного позиционирования. Также необходимо, что бы он исчезал, изменим его прозрачность до 1. 

 

<script type="text/javascript">

    $(function() {

        $('#nav > div').hover(

        function () {

            var $this = $(this);

            $this.find('img').stop().animate({

                'width'     :'199px',

                'height'    :'199px',

                'top'       :'-25px',

                'left'      :'-25px',

                'opacity'   :'1.0'

            },500,'easeOutBack',function(){

                $(this).parent().find('ul').fadeIn(700);

            });

 

            $this.find('a:first,h2').addClass('active');

        },

        function () {

            var $this = $(this);

            $this.find('ul').fadeOut(500);

            $this.find('img').stop().animate({

                'width'     :'52px',

                'height'    :'52px',

                'top'       :'0px',

                'left'      :'0px',

                'opacity'   :'0.1'

            },5000,'easeOutBack');

 

            $this.find('a:first,h2').removeClass('active');

        }

    );

    });

</script>

 

Надеюсь, вам понравилось!

 

ПОСМОТРЕТЬ ДЕМО                             СКАЧАТЬ ИСХОДНИКИ

 

Источник

Категория: jQuery/JS | Просмотров: 301 | Добавил: Iron | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск

Статьи
[Менеджмент]
Факторы микросреды организации
[Безопасность систем]
Защита исходных текстов и двоичного кода
[Устронение ошибок систем]
Возможные нежелательные последствия разгона
[Устронение ошибок систем]
Сообщения об ошибках AMI BIOS (часть 2)
[Информатика]
. АНАЛИЗ ТЕОРИИ ЭКСПЕРТНЫХ СИСТЕМ И ВЫВОДЫ
[Прогараммирование]
ЛЕКЦИЯ. Язык Pascal
[Прогараммирование]
Совместимость типов объектов
[Прогараммирование]
ЛЕКЦИЯ Процедуры и функции
[Операционные системы]
MAC OS
[Прогараммирование]
ДОКУМЕНТИРОВАНИЕ ПРОГРАММ

Категории
HTML/CSS [21]
jQuery/JS [36]
PHP [4]
Для Ucoz [38]

Популярный софт
Iron Kaspersky Internet Security 2015
Kaspersky Internet Security 2015
Iron Virtual DJ
Virtual DJ
Iron SoundForge 11
SoundForge 11
Iron Alcohol 120
Alcohol 120
Iron Norton Internet Security 2014
Norton Internet Security 2014
Iron Loaris Trojan Remover
Loaris Trojan Remover

Жми

Copyright MyCorp © 2017Конструктор сайтов - uCoz