×
Creating solutions

Vytvárame dropdown menu s HTML a CSS

V tomto článku predstavím ako rýchlo a jednoducho je možné vytvoriť menu, kde po umiestnení kurzora nad hlavnú položku sa zobrazia príslušné položky. Celé menu je vytvorené len v jazykoch HTML a CSS, teda bez potreby použitia JavaScriptu.
Hlavné položky menu sú umiestnené vedľa seba cez float : left;. Ponuka s položkami obsahuje tieň. Veľkosť položiek je tvorená cez vlastnosť padding. Šírka položiek je definovaná cez min-width.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
nav ul {
float : left;
margin : 0;
padding-left : 0;
}
.button {
background-color: black;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
position: relative;
display: inline-block;
}
.button:hover, .button:focus {
background-color: #999999;
}
.button-menu {
display: none;
position: absolute;
background-color: #999999;
min-width: 160px;
overflow: auto;
left : 0;
top : 50px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.button-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.button a:hover {
background-color: #cccccc;
}
.button:hover .button-menu {
display:block;
}
.break {
clear : left;
}
Menu vytvorené v HTML je z dôvodu sémantiky umiestnené v elemente <nav> a položky v elementoch <ul> a <li>.
Príklad: Zápis do elementu <body>.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<nav>
<ul>
<li class="button">Menu 1
<ul class="button-menu">
<li><a href="#home">Home 1</a></li>
<li><a href="#about">About 1</a></li>
<li><a href="#contact">Contact 1</a></li>
</ul>
</li>
</ul>
<ul>
<li class="button">Menu 2
<ul class="button-menu">
<li><a href="#home">Home 2</a></li>
<li><a href="#about">About 2</a></li>
<li><a href="#contact">Contact 2</a></li>
</ul>
</li>
</ul>
</nav>
<div class="break">Content</div>
Celý princíp tohto menu je založený na zobrazovaní a skrývaní <ul class="button-menu"> pri akcii hover nad <li class="button">.
Obrázok: Výsledok programového kódu.
Výsledok programového kódu.

Záver

Ak ste vytvorili zaujímavé rozšírenia tohto menu, podeľte sa o ne prostredníctvom komentára.


HTML,CSS,menu,dropdown menu
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