Legördülő menü CSS-sel


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:

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

1
2
3
4
5
6
7
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ása

Html kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ul id="menu">
  <li class="cim" style="margin-left: 0px;"><a href="#" target="kozep" class="link1">Főmenü1</a>
      <ul>
        <li><a href="#" target="kozep" class="link2">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

csshover.htc.txt

Kapcsolódó bejegyzések:

A cikket beküldte: farkas77 (http://www.farkasweb.hu)

15 hozzászólás

  1. Mael says:

    Üdv!
    Hát ezt megnézem, nagyon jónak tűnik az ötlet!
    Köszönet érte!

  2. Mael says:

    Üdv!
    A csshover.htc.txt-t nem lehet letölteni!
    Csak gondoltam jelzem, mert gondoltam belekukkantok:-)

  3. Harder says:

    Márpedig elérhető a fájl, az előbb kattintottam rá. :)

  4. Mael says:

    Hát akkor nem értem. Nekem egy tök üres oldalt hoz be. Pedig jó lenne megnézni. Tudsz valami tanácsot adni? :-)

  5. Mael says:

    Najó, megvan a hiba. Úgy látszik csak FireFox alatt lehet megnézni:-)

  6. Mael says:

    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!

  7. Harder says:

    Örülök, hogy sikerürt megoldani :)

  8. hapiweb says:

    a pspad visit hogy a css2.0 nem ismeri a behavior -t

  9. Mael says:

    Lehet hogy visit, de berakja:-) Én is pspadot használok, és működik rendesen.

  10. nyakyer says:

    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!

  11. unique says:

    Farkasweb fertőzött, pls nézze meg a tulaj!
    AVAST: HTML:Script-inf
    Csövi!

  12. Bandinho says:

    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.

  13. Bandinho says:

    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.

  14. hamm-mer says:

    Sziasztok!
    azt meglehet csinálni, hogy az almenüknek is lehessenek almenüi?(Html ben)

  15. rudy8 says:

    Es ezt dreamwearben hogy lehet hasznositani?

Szólj hozzá
a Legördülő menü CSS-sel 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>