Uczestnicząc aktywnie w życiu forum dla webmasterów zauważam, że dość częstym problemem jest menu rozsuwane. Dzisiaj pokażę wam jak takowe zrobić, temat co prawda był omawiany wiele razy, jednak w większości poradników używany jest JavaScript, przez co: 1. Jest to rozwiązanie mało optymalne i toporne, 2. Po wyłączeniu JavaScriptu nasza strona jest bezużyteczna.

Zaczynamy od stworzenia szkieletu menu:

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

<ul id="”menu”">
	<li><a href="”#”">Strona Główna</a></li>
	<li><a href="”#”">Portfolio</a>
<ul>
	<li><a href="”#”">Grafika</a></li>
	<li><a href="”#”">Webdesign</a></li>
</ul>
</li>
	<li><a href="”#”">O mnie</a></li>
	<li><a href="”#”">Oferta</a>
<ul>
	<li><a href="”#”">Cennik</a></li>
	<li><a href="”#”">Terminy</a></li>
</ul>
</li>
	<li><a href="”#”">Kontakt</a></li>
</ul>

Bez css’a wygląda to tak:

Gdy już mamy gotowy szkielet naszego menu, zabieramy się za css. Oczywiście nic nie stoi na przeszkodzie żeby po dodaniu styli dopisać do menu jakieś opcje.

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

body {
background: #606060;
font-family: Arial, verdana;
}

ul {
list-style:none; /* usuwamy wypunktowanie listy */
}

#menu  {
margin: 0;
padding: 0; /* usuwamy wszelkie odstępy */
}

#menu li a {
border-left: 1px #2a2a2a solid;
border-right: 1px #585a5b solid;
border-bottom: 1px #585a5b solid;
border-top: 1px #2a2a2a solid;
color: #ffffff;
text-decoration:none;
padding:15px 15px;
background: #333333;
}

#menu li, #menu li a {
float:left;
}

#menu li {
position:relative; /* względem tego będziemy pozycjonowali podmenu */
}

#menu li a:hover {
background: #252627;
}

#menu li ul { /* tutaj odnosimy się do podmenu*/
display:none;
position:absolute;
top:100%; /* wysuwające się podmenu przesuwamy w dół o długość menu-matki */
padding:0;
margin:0; /*usuwamy wszelkie odstępy podmenu*/
}

#menu li:hover &gt; ul { /* selektor &gt; oznacza, że instrukcja obejmuje każdy tag
<ul> wewnątrz #menu li */
display:block;
}

#menu li ul li, #menu li ul li a {
float: none;
}

#menu li ul li a {
width: 100px; /* szerokosc wysuwajacego sie podmenu*/
display: block;
}

Po ostylowaniu jak widać wszystko działa poprawnie, a co najważniejsze – bez udziału JavaScriptu. :)

Autor: Maciej Owcarz
Źródło: dhofca.pl