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;
}

Tutorial.hu Szerkesztőség
Egyetemi hallgató vagyok, e mellett (főleg webes témában) dolgzom, illetve szerkesztem a WebPillangót. Azt hiszem ide ennyi elég is lesz.

8 HOZZÁSZÓLÁS

  1. Azt hiszem elírás lehet a cikkben, hogy nincsenek lezárva a lista elemek:
    Amúgy nagyon jó tutor!

  2. régebbi html verziókban (így az xhtml 1.0 transitional-nál sem) nem számított hibának a listaelemek zárótag elhagyása. (asszem :D)

    css-ben egy hiba: „border: 0” nincs. van helyette „border: none” (ami a „border-style: none” rövid elérése. a 0 az a border-width-nél sem szabványos megoldás… mondjuk logikus lenne, rendezettebben/egységesebben nézne ki vele a kód, de vannak a css-ben ilyen butaságok)

  3. Sziasztok!

    Ha ezen belül szeretnék még pár almenüt is, akkor mit kell módosítanom?

    Tehát ha pl rámegyek az elsőre az egérrel, akkor még megjelenjen mellette pár menüpont. Nekem sajna nem akar összejönni. :(

    Előre is köszönöm a segítséget!

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét