logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.