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á.

Hugyecz Görgy (Harder)
Hugyecz Görgy (Harder)
http://blog.harder.hu
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.
Facebook Linkedin

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

23 HOZZÁSZÓLÁS

  1. 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. 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. 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. 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. 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. 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. Ú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. 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. 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. 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. Ü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. 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. 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. 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

  16. 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. 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. 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

  20. 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. 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!

  23. 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.

HOZZÁSZÓLOK A CIKKHEZ

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