CSS3 legördülő webshop menü készítése

Az első példában:

- Kiegészítjük a HTML kódot a menülista második szintjével. Annak érdekében, hogy áttekinthető legyen az elemek kiválasztása a felső szinten elhelyezkedő listát egyedi azonosítóval látjuk el '<ul id="menusor">'.

- A display tulajdonságát inline-block-ra állítjuk. Mivel egy szinttel feljebb a szöveget középre igazítottuk, ezért főmenüpontjaink a sor közepén egymás mellett fognak megjelenni.

A második példában:

- A felső szint listaelemeinek pozíciója relatív. Ennek hatására a beágyazott listák helyzetét, abszolút pozicionálás esetén a szülő elem helyzetéből számolják a böngészők.

- A beágyazott listánál a menüpontok magasságával megegyező függőleges eltolás kell megadni. A Z index beállításával pedig elérjük, hogy a menüpont, ha megjelenik, akkor az oldalon lévő többi HTML elem fölé kerüljön.

A harmadik példában:

- A beágyazott listát a display:none; beállítással alapértelmezetten eldugjuk.

- Ha az egérkurzor egy olyan főmenüpont fölé, amelyhez almenü is tartozik akkor a hozzátartozó almenü display tulajdonságát block-ra állítva jeleníthetjük meg az almenüpontokat.

1. példa:

Forráskód


<style type="text/css"> 
  #menusor{ display:inline-block;
    width: auto; margin: 0;
    padding: 0; list-style: none;}
</style>   
...
<body>
  <nav id="menu"> 
  <ul id="menusor">
     <li><a href="#">Termékek</a>
        <ul>
	  <li><a href="#">Kategória 1</a></li>
	  <li><a href="#">Kategória 2</a></li>
	  <li><a href="#">Kategória 3</a></li>
	</ul>
     </li>
     <li><a href="#">Vásárlás</a>
	<ul>
	  <li><a href="#">Kosár</a></li>
	  <li><a href="#">Megrendelés</a></li>
	  <li><a href="#">ÁSZF</a></li>
	</ul>
     </li>
     <li><a href="#">Kapcsolatok</a></li>
  </ul>
</body>

Eredmény*

2. példa:

Forráskód


<style type="text/css"> 
  .....
  #menusor li{
    float: left;
    position: relative;}
  #menusor ul{
    list-style: none;  
    position: absolute;
    top: 25px;
    left: 0;
    z-index: 1000;}
  #menusor ul li{
    float: none;
    margin: 0;
    padding: 0;
    display: block;}
</style>   
...

Eredmény*

3. példa:

Forráskód


<style type="text/css"> 
....
  #menusor li:hover > ul{
	display: block; 
  } 
  #menusor ul{
    list-style: none;  
    display: none;
  }
</style>   
...

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_msmenu_3_OK.html