×
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest