Красиве меню для Вашого сайту

47

Красивое меню для Вашего сайта

Сьогодні розглянемо досить цікаву і красиву концепцію навігаційного меню для Вашого сайту з допомогою невеликого плагін jQuery, CSS і HTML. Впевнений, такий варіант меню здатне пожвавити і виділити із загальної маси будь-який проект.

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

Дивитися Демо

Приступимо…

HTML

Єдине що нам знадобиться для цього меню — це ненумерованний список з посиланнями та текстом всередині елементів списку:

<ul id="navigation">
<li class="home"><a><span>Home</span></a></li>
<li class="about"><a><span>About</span></a></li>
<li class="search"><a><span>Search</span></a></li>
<li class="photos"><a><span>Photos</span></a></li>
<li class="rssfeed"><a><span>Rss Feed</span></a></li>
<li class="podcasts"><a><span>Podcasts</span></a></li>
<li class="contact"><a><span>Contact</span></a></li>
</ul>

CSS

Для початку ми визначаємо властивості списку:

ul#navigation {
 position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}

ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}

Ми позиціонуємо списку в правому верхньому кутку сторінки. Навігація повинна бути завжди доступною користувачеві, навіть якщо він прокручує сторінку вниз. Тому ми фіксуємо позиціонування. Всі відступи і межі ми виставляємо на 0. Навігація повинна бути поверх всіх елементів на сторінці. Саме тому ми виставляємо високою значення z-index. Також нам необхідно прописати ширину меню, щоб елементи списку не наїжджали один на одного при зміні розміру вікна браузера.

Тепер давайте поглянемо на властивості елементів списку:

ul#navigation li {
 width: 103px;
display:inline;
float:left;
}

ul#navigation li {
width: 103px;
display:inline;
float:left;
}

Якщо Ви хочете, щоб список показувався горизонтально, необхідно встановити значення display на inline. Після цього елементи списку будуть відображатися поруч один з одним, а не під.

Тепер подивимося на властивості посилань в елементах списку:

ul#navigation li a {
 display: block;
float: left;
margin-top: -2px;
width: 100px;
висота: 25px;
background-color: #E7F2F9;
 background-repeat: no-repeat;
background-position: 50% 10px;
border: 1px solid #BDDCEF;
 text-decoration: none;
text-align: center;
padding-top: 80px;
}

ul#navigation li a {
display: block;
float: left;
margin-top: -2px;
width: 100px;
висота: 25px;
background-color: #E7F2F9;
background-repeat: no-repeat;
background-position: 50% 10px;
border: 1px solid #BDDCEF;
text-decoration: none;
text-align: center;
padding-top: 80px;
}

Тут варто згадати тільки властивість padding, яке допомагає перемістити текст посилання в самий низ блоку.

Давайте тепер додамо круглих кутів (не будуть працювати в Internet Explorer) і прозорості:

ul#navigation li a {
 display: block;
float:left;
margin-top: -2px;
width: 100px;
висота: 25px;
background-color:#E7F2F9;
 background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
 text-decoration:none;
text-align:center;
padding-top:80px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
opacity: 0.7;
filter:програми:DXImageTransform.Microsoft.Alpha(opacity=70);
}

ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
висота: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
text-decoration:none;
text-align:center;
padding-top:80px;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
opacity: 0.7;
filter:програми:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Останнє значення filter меню зробить прозорим і в IE.

Тепер давайте подбаємо про красивих іконках:

ul#navigation .home a{
 background-image: url(../images/home.png);
}
ul#navigation .about a {
 background-image: url(../images/id_card.png);
}
ul#navigation .search a {
 background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
 background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
 background-image: url(../images/rss.png);
}
ul#navigation .photos a {
 background-image: url(../images/camera.png);
}
ul#navigation .contact a {
 background-image: url(../images/mail.png);
}

ul#navigation .home a{
background-image: url(../images/home.png);
}
ul#navigation .about a {
background-image: url(../images/id_card.png);
}
ul#navigation .search a {
background-image: url(../images/search.png);
}
ul#navigation .podcasts a {
background-image: url(../images/ipod.png);
}
ul#navigation .rssfeed a {
background-image: url(../images/rss.png);
}
ul#navigation .photos a {
background-image: url(../images/camera.png);
}
ul#navigation .contact a {
background-image: url(../images/mail.png);
}

При наведенні мишки ми хочемо, щоб фоновий колір змінювався:

ul#navigation li a:hover{
 background-color:#CAE3F2;
}

ul#navigation li a:hover{
background-color:#CAE3F2;
}

Ще додамо трохи стилю нашим текстових блоків:

ul#navigation li a span{
 letter-spacing:2px;
font-size:11px;
color:#60ACD8;
 text-shadow: 0 -1px 1px #fff;
}

ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}

jQuery

Насамперед нам необхідно зробити, щоб елементи списку були заховані (схоже на клавіші рояля). Ми можемо бачити тільки текст посилання. При наведенні на елемент, ми запускаємо анімацію і показуємо повністю блок з іконкою.

$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});

$(function() {
var d=300;
$(‘#navigation a’).each(function(){
$(this).stop().animate({
‘marginTop’:’-80px’
},d+=150);
});$(‘#navigation > li’).hover(
function () {
$(‘a’,$(this)).stop().animate({
‘marginTop’:’-2px’
},200);
},
function () {
$(‘a’,$(this)).stop().animate({
‘marginTop’:’-80px’
},200);
}
);
});

Скрипт встановлює marginTop на -80 пікселів. Ефект для першого елемента повинен тривати 300+150 мілісекунд і кожен наступний елемент повинен зникати з затримкою 150 мілісекунд.

Після того, як мишку користувач прибирає — все повертається на свої місця.

Завантажити Вихідні Коди

Урок закінчено! До наступних зустрічей!

Цей урок підготовлено для Вас командою сайту http://ruseller.com

Джерело урока:www.tympanus.net