Круговая навигация с
эффектом пузыря на 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>
|
Надеюсь, вам понравилось!
ПОСМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСХОДНИКИ
Источник
|
