Függőleges menük CSS segítségével

Az első dolog az az, hogy megértsük, mit is akarunk készíteni. Az alább található leírás abban lesz segítségünkre, hogy megtanuljuk CSS és listák segítségével szép és igényes menüket készíteni. Az egész menü abból fog állni, hogy a menüpontokat listába ágyazzuk.

Fogjunk is neki:

1
2
3
4
5
6
7
8

<div id="css_menu">
<ul>
<li><a href="http://tupacko.uw.hu" target="_blank" rel="noopener noreferrer">Első</a>
<li><a href="http://tupacko.uw.hu" target="_blank" rel="noopener noreferrer">Második</a>
<li><a href="http://tupacko.uw.hu" target="_blank" rel="noopener noreferrer">Harmadik</a>
<li><a href="http://tupacko.uw.hu" target="_blank" rel="noopener noreferrer">Negyedik</a>
</ul>
</div>

Most, hogy megvan a DIV és a menülista, el is kezdhetjük a formázást. Addig is, elmagyarázom, hogy miben is áll az előbb említett. A DIV az az elem, amihez relativan fogjuk formázni a menüt. A lista egy átlagos rendezetlen lista, aminek minden eleme egy-egy link. Ezen túl csak a CSS kódot fogom kiírni szövegmezőkbe, mivel a HTML része nem fog változni. (az elöző szővegdoboz azért nem tartalmazza a CSS kódot, mert még nincs formázva a lista) Elsősorban el kell tüntetnünk a jeleket a listaelemek elől, majd a listaelemek más stílus-beállításait is meg kell babrálni.

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

#css_menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#css_menu a {
	display: block;
	color: #ffffff;
	background-color: #006600;
	border: 0;
	border-left: 3pt solid #003300;
	border-right: 3pt solid #009900;
	width: 100pt;
	padding: 3pt 3pt;
	text-decoration: none;
}
#css_menu a:hover {
	display: block;
	color: #ffffff;
	background-color: #009900;
	border: 0;
	border-left: 3pt solid #006600;
	border-right: 3pt solid #00cc00;
	width: 100pt;
	padding: 3pt 3pt;
	text-decoration: none;
}

Most peddig következik a részletes leírás, hogy mit miért, és hogyan formáztunk, ahoz hogy a fent látható eredményt kapjuk.
#css_menu ul { – ez a sor kezdi a hivatkozást a css_menu elem rendezetlen listájára
list-style-type: none; – a ‘none’ azt fejezi ki, hogy nincsen semmi jel a listaelem előtt
margin: 0; – a lista kerete nulla
padding: 0; – a lista belső kerete nulla
}
#css_menu a { – a listában résztvett linkek formázása
display: block; – a megjelenitést tömbszerűre állítja (egymás alatt fognak elhelyezekedni)
color: #ffffff; – a betű színezését fehérre formázza
background-color: #006600; – a háttérszín sötétzöldre vált
border: 0; – a keret 0 vastagságú lesz
border-left: 3pt solid #003300; – a baloldali keret 3 pont széles és sötétebb zöld
border-right: 3pt solid #009900; – a jobboldali keret 3 pont széles és világosabb zöld
width: 100pt; – a szélessége 100 pont
padding: 3pt 3pt; – a belső margó (minden irányban) 3 pont
text-decoration: none; – a szövegdiszítés semmi
}
#css_menu a:hover { – a listában szereplő menüpont, ami fölött épp ottan van a mutató
display: block;
color: #ffffff;
background-color: #009900; – a háttér világosabb zöld
border: 0;
border-left: 3pt solid #006600; – a színe világosabb
border-right: 3pt solid #00cc00; – a színe világosabb
width: 100pt;
padding: 3pt 3pt;
text-decoration: none;
}