Provavelmente você já deve ter visto, ou até precisado, de um menu HTML com CSS com submenu e subníveis. Por subníveis, quero dizer que os submenus podem ter vários outros submenus dentro deles.
Neste tutorial vou detalhar como criar tal menu utilizando apenas CSS, sem nada de JavaScript. Além disso, o menu suporta quantos submenus forem necessários para seu layout.
Abaixo segue o HTML:
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
|
<div class="menu-container">
<ul class="menu clearfix">
<li><a href="#">Item</a>
<!-- Nível 1 -->
<!-- submenu -->
<ul class="sub-menu clearfix">
<li><a href="#">Sub</a>
<!-- Nível 2 -->
<!-- submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">Sub Sub</a>
<!-- Nível 3 -->
<!-- submenu do submenu do submenu -->
<ul class="sub-menu">
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
</ul><!-- submenu do submenu do submenu -->
</li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
<li><a href="#">Sub Sub</a></li>
</ul><!-- submenu do submenu -->
</li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
<li><a href="#">Sub</a></li>
</ul><!-- submenu -->
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</div>
|
O CSS criado
Abaixo segue o CSS:
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
50
51
52
53
54
55
56
57
58
|
body,
.menu,
.sub-menu {
margin: 0;
padding: 0;
}
.clearfix:after{
content: '.';
display: block;
clear: both;
height: 0;
line-height: 0;
font-size: 0;
visibility: hidden;
overflow: hidden;
}
.menu,
.sub-menu {
list-style: none;
background: #000;
}
.sub-menu {
background: #444;
}
.menu a {
text-decoration: none;
display: block;
padding: 10px;
color: #fff;
font-family: sans-serif;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
}
.menu li {
position: relative;
}
.menu > li {
float: left;
}
.menu > li:hover {
background: #444;
}
.menu li:hover > .sub-menu {
display: block;
}
.sub-menu {
display: none;
position: absolute;
min-width: 150px;
}
.sub-menu li:hover {
background: #555;
}
.sub-menu .sub-menu {
top: 0;
left: 100%;
}
|
Só isso fará seu menu funcionar perfeitamente.
Nenhum comentário:
Postar um comentário