Resizable tabbed navigation with CSS, avagy méretezhető füles menü


A minap olyan megoldásra volt szükség, hogy egy felső navigációs menüt fülekkel kellett megoldani az alábbi kikötésekkel:

- legyen rugalmas (a fül szövege határozza meg a fül szélességét)
– ne kelljen minden fülhöz külön háttérképet készíteni (hover, active stb.)
– legyen a képállomány a lehető legkisebb
– árnyék, körvonal és hasonló grafikai “bonyolítások” ne okozzanak gondot
– ne kelljen javascript a használatához
– legyen nagyon rugalmas a használata, minden tulajdonságát lehessen módosítani
– működjön firefox 2.x, Opera 9.x, IE6 és IE7 alatt

A neten keresgetve több módszert is találni, de maradéktalanul egyik sem felelt meg, így az alábbi kód született, mely a fenti feltételeknek megfelel.

Füles navigáció – initializálás a css-ben

A böngészők alapértelmezett beállításait töröljük, egységesítjük, erre szolgál az “initializalas” rész.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* initializalas
-------------------------------------------------------------------------*/
/* alap beallitasok, margin-ok es padding-ok nullazasa */
html, body, form, input, select, fieldset {font-size: 11px; font-family: Tahoma, Verdana, Arial; color: #000000; }
body {background-color: #cccccc; }
/* heading es egyeb formazasok, melyek mas alapertelmezett margokkal birnak az egyes bongeszokben */
html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, address {margin: 0px; padding: 0px; }
/* alapertelmezett betumeret ezeknel az elemeknel */
h1, h2, h3, h4, h5, h6, pre, code {font-size: 10px; }
ul, ol {list-style: none; }
/* a linkek kez alakot kapjanak mindenhol */
form label {cursor: pointer; }
address {font-style: normal; }
/* a linkek alapertelmezett alahuzasat szunteti meg */
:link,:visited { text-decoration: none;  }
/* linkelt kepek keretezesenek megszuntetese */
a img,:link img,:visited img {border: none; }
/* a bordert nullazzuk fieldset eseteben */
fieldset {border: none; }
/* float-olt elemek utan hasznalatos clear */
div.clear, span.clear {clear: both; font-size: 0px; }

Füles navigáció – menü a CSS-ben

Ez a kódrészlet felel a füles menürendszer tényleges működéséért és kinézetéért.

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
/* menu
-------------------------------------------------------------------------*/
 
/* ez folgalja magába a menüt */
div#container {
	margin: 20px;
	padding: 20px;
	background-color: #ffffff;
	}
 
/* a menü elemei */
div#container ul li {
	display: block; /* hogy méretezhetőek legyenek */
	float: left; /* balra floatolva, hogy egymás mellé kerüljenek */
	height: 40px; /* beállítja a magasságot */
	margin: 0px 10px 0px 0px; /* az egyes menüpontok közötti távolságot határozza meg */
	background-color: #ffcc00; /* a menüelemek háttérszíne */
	}
 
	/* a menüelemekben lévő linkek tulajdonságai */
	div#container ul li a {
		display: block;
		float: left;
		height: 40px; /* a magasság megegyezik a LI magasságával */
		line-height: 40px; /* a sor magassága megegyezik a LI magasságával */
		vertical-align: middle; /* ez rendezi be a szöveget vertikálisan a sor közepére */
		background: url(images/bg-center.gif); /* a háttérkép */
		font-weight: bold;
		color: #000000;
		cursor: pointer; /* az egér fölévitelére váltson át kézre a mutató */
		}
 
	/* a LI-ken belül található elemek, melyek a linket (A-t) közrefogják. Ezek gyakorlatilag a fülek 1-1 oldalai */
	div#container ul li a span.left,
	div#container ul li a span.right {
		display: block;
		float: left;
		width: 11px; /* szélessége megegyezik a kicsit lentebb látható bg-XXX.gif háttérképek szélességével */
		height: 40px; /* magasság megegyezik a LI magasságával */
		}
		div#container ul li a span.left { background: url(images/bg-left.gif) } /* a fülek bal oldalának háttérképe */
		div#container ul li a span.right { background: url(images/bg-right.gif); } /* a fülek jobb oldalának háttérképe */
	div#container ul li a span.text {
		display: block;
		float: left;
		padding: 0px 5px; /* meghatározza a szövegek távolságát a fülek széleitől */
		height: 40px; /* magasság megegyezik a LI magasságával */
		}
	/* a hover állapotú linkek formázásai */
	div#container ul li a:hover {
		text-decoration: underline;
		color: #ffffff;
		background: url(images/bg-center-blue.gif);
		}
		div#container ul li a:hover span.left { background: url(images/bg-left-blue.gif) } /* a fül hover állapotban ezt a háttérképet fogja megjelenítenia a fül bal oldalán */
		div#container ul li a:hover span.right { background: url(images/bg-right-blue.gif); } /* a fül hover állapotban ezt a háttérképet fogja megjeleníteni a fül jobb oldalán */

Füles navigáció – A HTML kód

A kódban az UL-eken belüli részlet a lényeg.

A módszer lényegét tekintve nagyon egyszerű megoldáson alapul. A felsorolás elemei (LI) tartalmazzák a linkeket (A), melyeken keresztül a linkeken belül található tartalmak (SPAN) tulajdonságai és működése szabályozható. A linkeken belüli elemek is “float: left”-tel vannak rendezve hogy egymás mellé kerüljenek, a magassága mindegyiknek azonos.
A módszer nem tartalmaz semmilyen hack-t, nem függ javascripttől és elég rugalmasan alakítható és ahogy a demo-ban is látható, tökéletesen megfelel akár kerekített füles menüként is.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS demo - Resizable tabbed navigation</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="description" content="Ultimate solution - Resizable tabbed navigation using CSS" />
	<meta name="keywords" content="resizable,tabbed,navigation,css,demo" />
	<link rel="stylesheet" href="tabbedcorners.css" type="text/css" media="all" />
	<style type="text/css"></style>
</head>
<body>
<div id="container">
	<ul>
		<li><a href="#" alt="1"><span class="left"></span><span class="text">minta</span><span class="right"></span></a></li>
		<li><a href="#" alt="2"><span class="left"></span><span class="text">mókus</span><span class="right"></span></a></li>
		<li><a href="#" alt="3"><span class="left"></span><span class="text">fenn a fán</span><span class="right"></span></a></li>
		<li><a href="#" alt="4"><span class="left"></span><span class="text">az úttörő</span><span class="right"></span></a></li>
		<li><a href="#" alt="5"><span class="left"></span><span class="text">oly vidám</span><span class="right"></span></a></li>
		<li><a href="#" alt="6"><span class="left"></span><span class="text">sallalala lalala</span><span class="right"></span></a></li>
	</ul>
	<div class="clear"></div>
</div>
</body>
</html>

Megtekintető minta (demo)

Resizable tabbed corners with CSS (méretezhető füles menü CSS-sel) demo

megjegyzés:

A címet nem véletlenül írtam angolul (is), magyarul elég idétlenül hangzik (mintha egy mese címe lenne, benne főszereplő Füles a csacsi) és talán így többen is keresnek rá.

Kapcsolódó bejegyzések:
  • Ha olyasmi formázást szeretnél, melyek általában könyvekben lehet látni (tartalomjegyzék), akkor az alábbi kódot használd:tartalomjegyzék mintaol …

  • A CSS-ek elején szoktam ezt a kódot használni ahhoz, hogy minden böngésző alatt az egyébként másként megjelenített részeket azonos kinézetre formázzam.…

  • 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 …

  • A navigációnál használt tab-os/füles megoldások egy problémája szokott lenni, hogy hiába állítjuk be a css-ben, hogy az aktív tab-nak hogy kellene kinéznie, katt …

  • Ha különböző adatokat tartalmazó táblákat szeretnék kinyíló, bezáródó effekttel ellátni, használd az alábbi kódot (expand, collapse effect)tabl …

A cikket beküldte: Harder (http://blog.harder.hu)

23 hozzászólás

  1. Knighthead says:

    Helló!
    Még kezdő lennék, így nem értek 2 dolgot:
    1, Mért kell a div#container-ben lévő dolgkohoz mindig odaírni a “float:left”-et illetve a “display:blockot”?
    2, Végülis hogyan működik / hol van a rész, ami azt teszi lehetővé, hogy a menü szélessége meghatározatlan legyen?

  2. Knighthead says:

    Helló újra!
    Azt hiszem közben megértettem a 2-es dolgot, az 1,-nél pedig a “div#container ul li”-nál való használást értem, a többinél nem. Ennek megértéséhez kérnék segítséget. Köszönöm előre is.

  3. tudodki says:

    legalább képeket, amik kellenek hozzá feltehetted volna egy RAR fájlban ! már másfél órája fáradozok a szaros kis gif képek letöltésével, és itt baszakszom ezzel a kis egérrel, és van kb 60 gif fájl… ilyen bg… olyan bg… hátt baszki, ez így használhatatlan !!

  4. Harder says:

    Azon nem tudok segíteni hogy lusta is vagy meg számolni sem tudsz (meg hogy überbunkó a stílusod), de szívesen belinkelem neked azt a 60 helyett 6db képet, amit le kéne menteni (ha már nem tudsz a böngésződben egy file/save page as…-t nyomni).

    1
    2
    3
    4
    5
    6
    
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-center-blue.gif
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-center.gif
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-left-blue.gif
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-left.gif
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-right-blue.gif
    http://www.tutorial.hu/webszerkesztes/tabbedcornerswithcss/images/bg-right.gif

    A kis egeredet cseréld le szerintem, ha neked másfél óra sem volt elég a 6db kép lementéséhez.

  5. BonFire says:

    Arról nem beszélve, hogy másfél óra alatt akár saját magad is megszerkeszthetted volna ezt a két képet, sőt még ki is cifrázhattad volna. Úgy látszik, hogy szitkozódni könnyebb, meg a kész képet követelni. És akkor mi van, ha nem kapsz képet, csak a kódot? He? Rajzold meg magadnak, legyen már benned ennyi önállóság, ezzel a szövegeddel meg eredj a kocsmába, oda való. Majd ott kapsz érte valami ajándékot a hátadba!

  6. bubu001 says:

    Harder: hihetetlen türelmes vagy. ;)
    Ha nem lennék intelligens, akkor azt írnám, hogy tudodki eléggé parasztul viselkedik és egy igazi kis p.cs.

  7. BonFire says:

    Úgy látom, hogy annak ellenére, hogy ide már nem kerül ki, azért jónéhány fórumozónak bekerül a postaládájába a hozzászólás. Úgyhogy sokan le tudjuk vonni a következtetést az ilyen alpári stílusról. Nálam az első ilyen hozzászólásnál moderációt, a másodiknál bant kapna az illető. Abban pedig nem értek egyet, hogy bármiben is igazat adtál neki, merthogy tényleg jól jönnek a képek. Amilyen hangnemben kérte, és azután, hogy megkapta, még rátett egy lapáttal, és kárörvendően és cinikusan felesel, hogy a kérésnek ez a célravezető módja, hiszen mégiscsak hozzájutott a képekhez, amelyekkel egyébként sem pocsékolná a drága idejét. Az ilyen szívességeket, esetleg udvarias kéréssel ki lehet érdemelni, járni nem jár, már ha még mindig áll a szabályzatban lefektetett “a lapon nincs demokrácia”. Én is csak gratulálni tudok a türelmedhez!

  8. Harder says:

    bubu001, BonFire,
    Minden egyes ilyen látogató után erősödik bennem a hit, hogy szigorítani kell a hozzászólásokon (előbb vagy utóbb biztos hogy fogok is) és elejét veszem az utólagos moderációnak. :)

  9. bubu001 says:

    Csak nehogy én legyek az első kitiltott :D
    Egyébként pedig: a Te oldalad, ezért nyugodtan. Szerintem senki nem szereti ha szétbarmolják az “otthonát”.

  10. republic67 says:

    A méretezhető füles menü kódot beillesztve nem müködik. XHTML Tran…1.0-en.
    Mi az oka?Várom válaszod.

  11. ronbird says:

    Üdv!

    tetszik a kód amit írtál, annyit fűznék hozzá, illetve kérdeznék hogy az initializáláskor
    html, body, form, fieldset, h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, li, dl, address {margin: 0px; padding: 0px; }
    ez helyett én a
    *{
    padding:0; margin:0;
    }
    kódot szoktam használni, nem tudom hogy ez igy “szabványos” e.

    Mindenesetre szép kód :)

  12. lepeselek says:

    Tökéletes a megoldás. Pont most szórakoztam ezzel és itt egy 1xű megoldás.
    Örök hála. Leborulok virtuálisan.
    Ezer thx.

  13. Harder says:

    Uhh, ronbird sorry de most látom csak hogy volt egy kérdésed is. A 0px-t én azért szoktam használni, mert így sokkal könnyebb rákeresni a css-ben ezekre a részekre, a 0-ra sajnos nem lehet, mert elég sok helyen szerepelhet (bár elvileg a 0; is kereshető lenne … no mindegy, így szoktam meg :D)

    lepeselek,
    Örülök ha tetszik, azóta már egy fokkal egyszerűbb megoldást használok, majd leírom azt is mikor lesz rá időm, ok?

  14. kOLOS says:

    Hali! nekem is tetszik ez a kis kód, de valamiért, amiért lecserélem a bg-left.gif-et, szóval az oldalsó képeket, akkor mintha eltünnének és csak a középsö képemet rakja be. Vázolom a szitut ^^:
    ez a normalis: /_\ (/=baloldali kép, \=jobboldali kép, _ középsö kép)
    csere után: _ _ _

    valaki tudna segíteni? elöre is köszi!
    u.i.: amugy egy ilyesfajta menüt probálnék kihozni belöle: http://www.vhglabs.com/

    kOLOS

  15. kOLOS says:

    Megoldottam, nem kell segiteni köszi :)

  16. Nelson says:

    Azért, nem semmi ! Másfél év után sem kaptam választ, ki működteti ezt az oldalt?
    Jó lenne azért a hozzászólásokra reagálni is, már csak illemből is. :-)
    De még mindig szívesen fogadom a segítségeteket.
    Üdv, Nelson

  17. Harder says:

    Válasz illemből:
    Mivel nem volt érdembeli kérdés, nincs válasz. Te megállapítottad a tényt, hogy nálad nem működik, nekem meg sajnos nincs időm és energiám találgatni 0 információ alapján, hogy mit ronthattál el. Szerintem minden szükséges kódot és segítséget megadtam a leírásban ahhoz, hogy ezt bárki fel tudja használni. Nagyon sajnálom, ha ennyi idő alatt sem tudtad megoldani, hanem vártad a megoldást.

  18. TranceMaster says:

    Gratula!

    Esetleg tudnál segíteni nekem, hogy egy ehhez (http://www.xpress.hu/prod/prod.asp?FILMAZ=12596) hasonló css füles effektet alkalmazhassak, de javascript nélkül? (Eddig csak javascriptes változatokat alkalmaztam és lövésem sincs, hogy csak css használaával hogyan tudnám ezt megcsinálni!)

    A segítséget előre is köszönöm bárkinek.

    Üdv.
    TM

  19. Szia, azt hogy tudom megoldani, hogy amelyik menü aktív, az maradjon kék?

  20. Harder says:

    Attól függ, hogy milyen rendszerrel dolgozol – pl. van cms, ami az aktív fülre ráfűz egy class=”current” -t és így elég egyszerű ezt az 1db class-t formázni.

  21. imi1979 says:

    Szia!
    Nagyon tetszik a megoldás. Szeretném egy div-ben középre igazítani, de nem sikerült. Erre van megoldásod? Előre is köszi! Üdv!

  22. Harder says:

    A “floated element align center” kulcsszavakkal kerestem rá és pl. ez jónak tűnik: http://pmob.co.uk/pob/centred-float.htm
    Ha mégis van valami gond vele, akkor érdemes a google-ban e keresés mentén tovább próbálkozni, lesz megoldás.

  23. imi1979 says:

    Köszi hogy kerestél megoldást, de sajnos ugyanoda lyukadtam ki mint eddig. Elfelejtettem írni, hogy azt már megoldottam, hogy középen legyen, de nem látszik a menü bal és jobb széle, amúgy tökéletes, csak ezeket nem tudom odavarázsolni. Most is pont ugyanoda jutottam el merőben más css-el. :-) Szóval pont ennek a cikknek a lényege veszik el. Dinamikusan változik a szélessége de nem tudok lekerekítést vagy bármi designt elé és mögé tenni.

Szólj hozzá
a Resizable tabbed navigation with CSS, avagy méretezhető füles menü 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>