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: url("csshover.htc");
}
ul, li {
float: left;
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul#menu {
position: absolute;
margin-left: 5px;
left: auto;
top: 177px;
width: 950px;
}
ul li ul {
background-color: #D9E7EB;
display: none;
}
ul li ul li {
float: none;
width: 112px;
}
ul li:hover ul {
display: block;
}
ul li.cim {
width: 112px;
margin-right: 2px;
margin-top: 6px;
}
ul li:hover {
background-color: #94CEDC;
}
ul li.cim:hover {
background-color: transparent;
}A csshover.htc hack file az IE böngészőhöz kell, mert nélküle nem megy a legördülő menü.
ul#menu { : a menüsor helyének meghatározása.
ul li ul { :
ul li ul li { :
ul li:hover ul { :
ul li.cim { : Főmenü alap beállítása
ul li:hover { : Almenü hover beállítása
ul li.cim:hover { : Fömenü hover beállításaHtml kód:
<ul id="menu">
<li class="cim" style="margin-left: 0px;"><a href="#" target="kozep" class="link1" rel="noopener noreferrer">Főmenü1</a>
<ul>
<li><a href="#" target="kozep" class="link2" rel="noopener noreferrer">Főmenü1-Almenü1</a></li>
<li><a href="#" class="link2">Főmenü1-Almenü2</a></li>
<li><a href="#" class="link2">Főmenü1-Almenü3</a></li>
</ul>
</li>
<li class="cim" style="margin-left: -60px;"><a href="#" class="link1">Főmenü2</a>
<ul>
<li><a href="#" class="link2">Főmenü2-Almenü1</a></li>
<li><a href="#" class="link2">Főmenü2-Almenü2</a></li>
</ul>
</li>
</ul>Az <ul></ul> tag között van a legördülő menü. A margin-left-tel minden menüt pozícionálni kell egyesével! #### HTC letöltése
Harder
Profil
Korábbi hozzászólások (15)
A régi blogon érkezett hozzászólások archívuma. Új hozzászólást már nem lehet írni.
Üdv!
Hát ezt megnézem, nagyon jónak tűnik az ötlet!
Köszönet érte!
Üdv!
A csshover.htc.txt-t nem lehet letölteni!
Csak gondoltam jelzem, mert gondoltam belekukkantok:-)
Márpedig elérhető a fájl, az előbb kattintottam rá. :)
Hát akkor nem értem. Nekem egy tök üres oldalt hoz be. Pedig jó lenne megnézni. Tudsz valami tanácsot adni? :-)
Najó, megvan a hiba. Úgy látszik csak FireFox alatt lehet megnézni:-)
Tényleg működik így már explorer alatt is!
Hát ezt hasznosítani fogom. Remélem a validátor sem fog benne hibát találni:-)
Üdv!
Örülök, hogy sikerürt megoldani :)
a pspad visit hogy a css2.0 nem ismeri a behavior -t
Lehet hogy visit, de berakja:-) Én is pspadot használok, és működik rendesen.
Hello!
Két dologban kérnék segítséget, előre is megköszönve azt:
1.) mit kell tennem, ha "localban" legördül a menü a fentebb leírtak alapján IE alatt (csshover.htc kész,majd .css-file body részébe beírva stb.), de ha feltöltöm a szerverre (byethost) akkor az IE alatt már nem gördül le.
2.) Psd-vel csináltam többlayeres képeket és exportáltam png-be rétegenként. Az IE alatt a legfelső rétegből (a tényleges számomra felhasználni való) készített png-t úgy mutatja, hogy teljes képnagyságban betesz mögé egy világoskék hátteret.
Köszi előre is!
Farkasweb fertőzött, pls nézze meg a tulaj!
AVAST: HTML:Script-inf
Csövi!
Sziasztok,
Nagyon jó, hasznos és működik!
Csak egy apró kérdés:
A legördülő menürész jelenleg halványkéken átlátszó.
Hogy megváltoztatni, hogy a legörgülő rész ne legyen átlátszó, hanem takarja ki az alatta lévő tartalmat?
(pl: a legördülő menü alatti szöveg miatt zavaró az átlátszóság)
Köszönet a válaszért.
További 3 hozzászólás-szál megjelenítése
Sziasztok,
Újabb kérdés, a legördülő résszel kapcsolatban:
Megoldható, hogy a legördülő rész ne "egyszerűen" a FŐMENÜ alá gördüljön, hanem például a FŐMENÜ után (közvetlen jobbra) vegye fel a poziciót, s onnan gördüljün lefelé?
Ez hasznos lenne, pl negyedkör alakú menük esetében.
Köszönöm erre is a választ.
Sziasztok!
azt meglehet csinálni, hogy az almenüknek is lehessenek almenüi?(Html ben)
Es ezt dreamwearben hogy lehet hasznositani?
Van hozzáfűznivalód? Írj nekem közvetlenül.
Kapcsolat