Kategóriák
Új Cikkek
Legnépszerűbbek
- Otthoni webszerver titkosítással (SSL)
- Komment jóváhagyás + véletlen cikk
- Otthoni szerver Linux alapokon
- The Church of Google
- Invision Power Board IPB 3 Beta 1
- Új generációs érintőképernyők és a Windows 7
- dr. Tihanyi László orvos weboldala
- Lightning-PC 2008, avagy a szerkesztő gépe
- Woopra, avagy a valósidejű webstatisztika
- SEO barát URL kezelés - duplikált tartalom
- Invision Power Board IPB 3 Beta 1
- Otthoni szerver Linux alapokon
- Valid CSS dropdown menü
- Google, mint munkahely és Google hackek
- Realtek 8101/8168/8169 PCI/PCIe Driver Vista kékhalál
- Full HD-s 24" monitorok
- Lightning Weblog 3.0
- SEO barát URL kezelés - duplikált tartalom
- Samsung 82" QuadHD LCD monitor
- Stargate Atlantis cancel, Stargate Universe pilot
LW CMS PHP SQL SEO XHTML CSS XML Feed Javascript Programozás Webworks Fórum Domain Szoftver Hardver Fejlesztések Szerver Film és Sorozat Lightning Online cégek Hackek
Kommentek
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ő:
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:
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:
Na most készült el a dropdown menü, ami teljességgel böngésző független és valid.
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
Komment küldése
| A komment küldéshez regisztráció szükséges! |
| Bejelentkezés / Regisztráció |


Zoli
2008. Aug. 29. 20:12Van valahol demója a menünek? Ha tényleg megy ie6-tal akkor azt hiszem áttérek erre a kódra.
Lightning
2008. Aug. 29. 20:18Itt a nyelvválasztó a jobb felső sarokban ugyanez a menü.
A kis zászlócskás gombon éred el.
Zoli
2008. Aug. 30. 09:57Lightning
2008. Aug. 30. 10:08Zolee
2008. Oct. 28. 12:17Betettem 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
Lightning
2008. Oct. 28. 13:06Most 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.
amatőr senki
2008. Oct. 31. 22:25Lightning
2008. Nov. 2. 15:28Az 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.