Анимирано меню с CSS
12-07-2011
Здравейте, ще ви покажа вариант за анимирано меню на css 3

Първо си подготвяме структурата на самото меню

<ul class="navigation">
<li id="home"><a href="#home">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="gallery"><a href="#gallery">Gallery</a></li>
<li id="blog"><a href="#blog">Blog</a></li>
<li id="about"><a href="#about">About</a></li>
</ul>


на всеки елемент сложете id отговарящо на котвичката на линка (за пример #home) за това ще напиша по на долу.
Също така слагаме и клас на самия ul за да може след това да го използваме в алтернативния javascript както и за стилване.

Нулираме маргините и паддинга (винаги така започвам)
* {
margin: 0;
padding: 0;
}


След това започваме със стилването
.navigation li {
width: 25px;
height: 50px;
background: #ccc;
margin: 3px;
overflow: hidden;
white-space: nowrap;
font-size: 32px;
line-height: 50px;
padding: 0 5px;
opacity: .5;
text-shadow: 1px 1px 0 #fff;
font-family: Helvetica,arial,freesans,clean,sans-serif;
}

.navigation li a {
color: #333;
display: block;
text-decoration: none;
}

.navigation li a:first-letter {
font-weight: bold;
padding-right: 7px;
color: #fff;
text-shadow: 1px 1px 0 #000;
}


лека заигравка с псевдо селектора :first-letter както се досещате или знаете това ни дата възможност на приложил стил само на първата буква от текста в a-то.



Да добавим и hover стил за менютата.
.navigation li:hover {
width: 130px;
opacity: 1;
}




Дойде време да изясня защо трябваше да добавяме id-така.
id-тата са ни нужни за css 3 псевдо селектора :target (ако не знаете за какво се използва сега ще разясня). Селектора :target се използва за да селектираме елемент по id спрямо котвичката в url-a или така наречения "hash". Ако не е станало ясно ще дам пример: имате такъв url "http://localhost/navigation.html#home" ,ако в css-a сте написали нещо от рода на
li:target { /* нещо си */ }
това ще селектира li с id "home" (което взима от hash-a).

И да продължим зада стой отворено нашето избрано меню ще използваме точно този селектор като го добавим към :hover рула
.navigation li:target,
.navigation li:hover {
width: 130px;
opacity: 1;
}


До тук добре може да прегледате както направихме (ако вече не сте :D ).
Сега да преминем към анимирането.
Първо ще направим нашето меню да работи под chrom така че не се учудвайте ако под firefox, опера или ie това не става.
Добавяме към селектора .navigation li
.navigation li {
/* написаноя по горе код */
-webkit-transition-property: width, opacity;
-webkit-transition-duration: .300s, .300s;
}


със -webkit-transition-property: width, opacity; показваме кой пропартита ще анимираме а с -webkit-transition-duration: съответно кое за колко време да бъде анимирано.

След това добавяме същото за hover и target стила

.navigation li:target,
.navigation li:hover {
/* написаноя по горе код */
-webkit-transition-property: width, opacity;
-webkit-transition-duration: .300s, .300s;
}


И готово нашето анимирано меню работи на chrom вече.
За опера е почти същото само трябва да използваме тези две пропартита.
-o-transition-property: width, opacity;
-o-transition-duration: .300s, .300s;


Сега да го подкатаме и на firefox. При firefox трябва предварително да дефинираме анимацията която искаме да проложим
@-moz-keyframes slideout {
from {
width: 25px;
opacity: .5;
}
to {
width: 130px;
opacity: 1;
}
}
@-moz-keyframes slidein {
from {
width: 130px;
opacity: 1;
}
to {
width: 25px;
opacity: .5;
}
}


оказваме от къкво към какво да премине анимацията.
След това самото и използване използване става по този начин.


.navigation li {
/* написаноя по горе код */
-moz-animation-duration: .300s;
-moz-animation-name: slidein;
}

.navigation li:target,
.navigation li:hover {
/* написаноя по горе код */
-moz-animation-duration: .300s;
-moz-animation-name: slideout;
}


оказваме времето и името с което сме дефинирали самата анимация.
Готово вече имате работещо меню и под firefox.

За ие обаче ще използваме алтернативен вариянт с javascript кода преставлява това:

$(function (){
$(window.location.hash).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');

$('.navigation li').hover(
function () {
$(this).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');

},
function () {
if($(window.location.hash)[0] != this){
$(this).stop().animate({"opacity" : "0.5", "width" : "25px"}, 100, 'linear');
}
}
);

$('.navigation li').click(function(){
$('.navigation li').stop().animate({"opacity" : "0.5", "width" : "25px"}, 100, 'linear');
$($('a',this).attr('href')).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');
});
});

няма да го обяснявам тъй като урока е за css анимация.

Крайния резултат от урока е :

index.html

<!DOCTYPE html >
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="navigation.css" type="text/css" rel="stylesheet" />
<!--[if IE]>
<script src="http://code.jquery.com/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="navigation.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
<ul class="navigation">
<li id="home"><a href="#home">Home</a></li>
<li id="news"><a href="#news">News</a></li>
<li id="gallery"><a href="#gallery">Gallery</a></li>
<li id="blog"><a href="#blog">Blog</a></li>
<li id="about"><a href="#about">About</a></li>
</ul>


navigation.css

* {
margin: 0;
padding: 0;
}

.navigation li {
width: 25px;
height: 50px;
background: #ccc;
margin: 3px;
overflow: hidden;
white-space: nowrap;
font-size: 32px;
line-height: 50px;
padding: 0 5px;
opacity: .5;
text-shadow: 1px 1px 0 #fff;
font-family: Helvetica,arial,freesans,clean,sans-serif;
-webkit-transition-property: width, opacity; /* animate properties for chrome */
-webkit-transition-duration: .300s, .300s; /* animation duration for chrome */
-o-transition-property: width, opacity; /* animate properties for opera */
-o-transition-duration: .300s, .300s; /* animation duration for opera */
-moz-animation-duration: .300s; /* animation duration for mozilla */
-moz-animation-name: slidein; /* mozilla animation name */
}

.navigation li:target,
.navigation li:hover {
width: 130px;
opacity: 1;
-webkit-transition-property: width, opacity; /* animate properties for chrome */
-webkit-transition-duration: .300s, .300s; /* animation duration for chrome */
-o-transition-property: width, opacity; /* animate properties for opera */
-o-transition-duration: .300s, .300s; /* animation duration for opera */
-moz-animation-duration: .300s; /* animation duration for mozilla */
-moz-animation-name: slideout; /* mozilla animation name */
}

.navigation li a {
color: #333;
display: block;
text-decoration: none;
}

.navigation li a:first-letter {
font-weight: bold;
padding-right: 7px;
color: #fff;
text-shadow: 1px 1px 0 #000;
}

/* mozilla animation definitions */
/* slideout animation */
@-moz-keyframes slideout {
from {
width: 25px;
opacity: .5;
}
to {
width: 130px;
opacity: 1;
}
}
/* slidein animation */
@-moz-keyframes slidein {
from {
width: 130px;
opacity: 1;
}
to {
width: 25px;
opacity: .5;
}
}


navigation.js

$(function (){
$(window.location.hash).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');

$('.navigation li').hover(
function () {
$(this).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');

},
function () {
if($(window.location.hash)[0] != this){
$(this).stop().animate({"opacity" : "0.5", "width" : "25px"}, 100, 'linear');
}
}
);

$('.navigation li').click(function(){
$('.navigation li').stop().animate({"opacity" : "0.5", "width" : "25px"}, 100, 'linear');
$($('a',this).attr('href')).stop().animate({"opacity" : "1", "width" : "130px"}, 100, 'linear');
});
});


Целия код

Надявам се да ви е харесал урока, ако имате въпроси Давайте. :)



/ Трябва да сте регистриран за да напишете коментар /
От: shterev
17:21 14-07-2011
Браво! Добро уроче.
От: netphager
10:21 15-07-2011
демо има ли?
От: batmanabg
13:15 22-07-2011
Полезен урок.
От: topchokt
11:39 27-07-2011
Демо може да видите тук - http://myweb.papagal.bg/demo1/.
От: sHoRt
22:14 04-09-2011
Mного е добро! :)
От: chepa
17:46 17-11-2011
Много ми помогна !! Уникално меню, мерси !!
1