Jazyk CSS prešiel po niekoľkých rokoch výraznými zmenami a vďaka podpore animácií je možné vytvárať niektoré efekty bez použitia JavaScriptu. V tomto článku predstavím vytvorenie menu s animovanými položkami.Ako prvé si vytvoríme menu. Pre demonštráciu bude použitý jednoduchý HTML kód, ktorý je v aplikácii potrebné upraviť na semantický markup.Príklad: Zápis do sekcie pre HTML.
1
2
3
<div class="item-1">Item 1</div>
<div class="item-2">Item 2</div>
<div class="item-3">Item 3</div>
Druhý a posledný krok je zápis pravidiel v jazyku CSS. Tu je využitá vlastnosť transition, ktorá definuje vlastnosť, na ktorú sa má reagovať. V tomto prípade je definovaná vlastnosť width. Jej zmena je vykonaná cez pseudo triedu :focus. Efekt s rohmi položiek je dosiahnutý prostredníctvom vlastnosti border-radius. Príklad: Zápis do sekcie pre CSS.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div {
height: 30px;
line-height : 30px;
width : 100px;
transition: width 0.5s ease-in-out;
color : white;
text-align: center;
border-radius: 0 10px 0 10px;
}
div:hover {
width : 200px;
}
.item-1 {
background-color: blue;
}
.item-2 {
background-color: red;
}
.item-3 {
background-color: black;
}
Záver
Ako vidieť efektné a pekné menu je možné vytvoriť aj bez pokročilých znalosti skriptovania. Stačí len pár riadkov a menu je vytvorené. Prepracovanejšie sliding menu si môžete pozrieť na mojej stránke Projekty - Sliding menu. 19.3.2016, Matej LednárKategória: CSSCSS,sliding menu,transition,border-radiusŽiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.Viac informácií nájdete v sekcii O projekte.
