Webshop menü CSS kódjának bővítése

Az első példában:

- Ha egy kiválasztó négyzet nincs kiválasztva, akkor eltüntetjük a mögötte álló ul elemet az alatta lévő menüpontokkal együtt.

A második példában:

- Eltüntetjük a kiválasztó négyzetet. Ha nem látszik, akkor is működik a hozzá kapcsolt label elem jóvoltából.

A harmadik példában:

- A címkét blokként formázva, úsztatott elemmé tesszük.

- A címke szélessége a háttérkép szélességének pont a fele lesz. A háttérképen elől +, hátul pedig - jel látható.

- A címke háttérképének pozícióját úgy módosítjuk, hogy a mínusz jel legyen látható.

1. példa:

Forráskód


<style type="text/css"> 
....
#balmenu input:not(:checked) ~ ul {
display: none; }
</style>   
...

Eredmény*

2. példa:

Forráskód


<style type="text/css"> 
  .....
#balmenu input{ display: none; }
 

</style>   
...

Eredmény*

3. példa:

Forráskód


<style type="text/css"> 
....
#balmenu label { display: block; float:left; 
  background-image: url("plusminus_14.png"); 
  background-repeat: no-repeat; 
  background-position: -14px 5px ; width:14px; height:20px;
  margin-left:3px;
}
 

#balmenu input:not(:checked) + label{
  background-position: 0px 5px ;
}
</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_hmenu_1d.html