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">Első</a>
<li><a href="http://tupacko.uw.hu" target="_blank">Második</a>
<li><a href="http://tupacko.uw.hu" target="_blank">Harmadik</a>
<li><a href="http://tupacko.uw.hu" target="_blank">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;
}

Kapcsolódó bejegyzések:
  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla ér …

  • A photoshoppal pillanatok alatt lehet bármilyen ágyúnak sci-fi filmbe illő lövedéket adni, ennek egyik módszere olvasható itt…Ebben a tutorialban azt fogo …

  • Honlapkészítés során van olyan helyzet, hogy szeretnénk betölteni a lapon 1-1 olyan új szöveget, képet miegymást, hogy az ne járjon az egész oldal újratöltésével …

A cikket beküldte: Tupacko (http://webpillango.org)

8 hozzászólás

  1. Metál says:

    Neken nagyon tetszik ez a tutor, most csináltam meg és nagyon király.

  2. Gaf says:

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

  3. zoleytaylor says:

    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)

  4. hb says:

    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!

  5. Tupacko says:

    Az kicsitt furfangosabb már. Ezt a kódot nem tudod használni, hacsak nem írod nagyon át, mivel ez egy menüre volt tervezve, egy statikus menüre.
    Szerintem könnyebb, ha fogsz egy legördülő menüt és direkt azzal dolgozol, pl.:
    http://sperling.com/examples/menuh/
    http://www.cssplay.co.uk/menus/final_drop.html

  6. hb says:

    Függőleges menüre gondoltam, mint pl ez: http://www.calmamedispa.com/

    Lehet ezeket is át lehet varjálni valahogy, de az nekem már nem megy…

  7. MacGyver says:

    Ez si jó:
    http://www.stunicholls.com/menu/tree_frog_slide.html

  8. Tupacko says:

    Ez megoldja a gondod (ha tudsz alapfokú angolt): http://www.seoconsultants.com/css/menus/vertical/
    Ha követed a lépéseket, akkor egy oldalranyilos, legördülo menüt kapsz.

Szólj hozzá
a Függőleges menük CSS segítségével c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>