WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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üntejü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óvóltából.

A harmadik példában:


- A címkét blokként formázva, úsztatott elemmé teszü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 minusz 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