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" 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

csshover.htc.txt

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség
http://www.farkasweb.hu

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

15 HOZZÁSZÓLÁS

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

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

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

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

  10. 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. Farkasweb fertőzött, pls nézze meg a tulaj!
    AVAST: HTML:Script-inf
    Csövi!

  12. 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. 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. Sziasztok!
    azt meglehet csinálni, hogy az almenüknek is lehessenek almenüi?(Html ben)

HOZZÁSZÓLOK A CIKKHEZ

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