Vytvárame sliding menu bez použitia JavaScriptu

Permalink: http://how-to.mldgroup.com/index.php?article=vytvarame-sliding-menu-bez-pouzitia-javascriptu&lang=en

19.3.2016, Matej LednárCategory: CSS

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>
<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;
}
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.

Vytvárame sliding menu bez použitia JavaScriptu

Záver

Comments

Add a comment