×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Vytvárame riešenia

Vytvárame sliding menu bez použitia JavaScriptu

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.


CSS,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.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších