• LW

  • Valid CSS dropdown menü

  • 2008. Aug. 29. 00:46
Bizonyára sokaknak okozott már hosszú unalmas órákat egy valid dropdown menü elkészítése kizárólag CSS és HTML felhasználásával úgy, hogy az böngésző független is legyen és a keresők is olvashassák és indexelhessék a benne levő menüpontokat. A tovább mögött egy részletes leírás vár az olvasókra.
Az alábbi módszer lényegében egy abszolút pozíciójú lebegő (float) div-et jelenít meg kitolva a képernyő teljes szélességén túlra, amit a dropdown menü lenyílásakor (hover) áthelyez a megfelelő pozícióra. A linkeket és menüket egymásba ágyazott felsorolások segítségével rendezi. Itt a weblapon a nyelvválasztó készült ugyanezzel a módszerrel.

A CSS kód a következő:

Kód
#menu, #menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
	}
#menu a:link,
#menu a:active,
#menu a:visited {
	display: block;
	border: 0;
	background: #CED7E5;
	color: #1a5fa8;
	font-size: 10px;
	text-indent: 7px;
	width: 64px;
	}
#menu a:hover{
	background: #E4E9F0;
	color: #c10000;
	font-size: 10px;
	text-indent: 13px;
	width: 64px;
	}
#menu li {
	float: left;
	padding: 0;
	margin: 0;
	}	
#menu li ul {
	float: left;
	position: absolute;
	left: -999em;
	padding: 0;
	margin: 0;
	border: 1px solid #303b4a;
	font-family: verdana, sans-serif;
	font-size: 10px;
	line-height:21px;
	text-align: left;
	}
#menu li ul li {
	float: none;
	background: #CED7E5;
	display: block;
	}
#menu li:hover ul,
#menu li.sfhover ul {
	left: auto;
	display: block;
	}

A formázás ebben a formában olyan, mint a nyelvválasztó doboz a zászlós gombnál. Természetesen átszerkesztheted igényed szerint. Figyelj a szélességekre és méretekre, könnyen ütközhetnek az elemek, ha nem arányosan vannak beállítva.

A menüpontokat a HTML kódban, pedig így adhatod meg:

Kód
<ul id="menu">
<li><a href="#" title="Főmenüpont 1">Főmenüpont 1</a>'
 <ul>
 <li><a href="a.html" title="Alfa">Alfa</a></li>
 <li><a href="b.html" title="Béta">Béta</a></li>
 </ul>
</li>
<li><a href="#" title="Főmenüpont 2">Főmenüpont 2</a>'
 <ul>
 <li><a href="1.html" title="Egy">Egy</a></li>
 <li><a href="2.html" title="Kettő">Kettő</a></li>
 </ul>
</li>
</ul>

Ezzel majdnem kész is volna. Működőképes is Opera, Firefox és a többiek alatt kivéve a különcböngésző MSIE alatt. IE alá tehát van egy pár soros javascript, ami megoldja a problémát:

Kód
<script type="text/javascript">
	sfHover = function() {
		var sfEls = document.getElementById("lang").getElementsByTagName("LI");
		for (var i=0; i<sfEls.length; i++) {
			sfEls[i].onmouseover=function() {
				this.className+=" sfhover";
			}
			sfEls[i].onmouseout=function() {
				this.className=this.className.replace(new RegExp(" sfhoverb"), "");
			}
		}
	}
	if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>

Na most készült el a dropdown menü, ami teljességgel böngésző független és valid.

Ajánlott Cikkek

Lightning

2008. Aug. 29. 20:18
Szia!
Itt a nyelvválasztó a jobb felső sarokban ugyanez a menü.
A kis zászlócskás gombon éred el.
Link ide

Zoli

2008. Aug. 30. 09:57
Nagyon príma, köszönöm. Még ie5.5-tel is okés a menü, bár némi kehe azért ott még akad.
Link ide

Lightning

2008. Aug. 30. 10:08
Ki használ már IE 5-t? :) Még a float div-eket is rosszul kezeli.
Link ide

Zolee

2008. Oct. 28. 12:17
Szia!
Betettem a kódokat egy fájlba, de IE6 alatt nem jelennek meg az almenük: www.eastside.hu/0/
Mi lehet a baj?
Köszi
Zoli
Link ide

Lightning

2008. Oct. 28. 13:06
Üdv!
Most nézem és az itteni se jó IE6-ban. De Zoli letesztelte IE 5.5-tel és abban meg jó. Nem egyszerű már egy IE-re se optimalizálni, nemhogy többre. Sajnos az IE6 fekete folt marad. Nem is nagyon használja már senki.
Link ide

amatőr senki

2008. Oct. 31. 22:25
Jah, senki, csak a netezők 30%-a (a maradék 15 meg 7.0-val oboázik)
Link ide

Lightning

2008. Nov. 2. 15:28
Csak a saját oldalaimról beszélhetek, de itt nyílván ez a mérvadó:
Az itteni látogatók csak 15%-ka használ IE-t, abból 30% IE6-ot, tehát az összes látogatók 4,5%-ka használja, ez havi kb 50 látogatás, amit max 10 ember generál.
Más oldalaimon kb 30% használ IE-t, abból szintén 30% IE6-ot, tehát az összes látógató 9%-ka.
Link ide
Komment küldése
A komment küldéshez regisztráció szükséges!
Bejelentkezés / Regisztráció