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

Az elrejtésre váró almenü előtt elhelyezünk egy kiválasztónégyzetet. Illesztünk hozzá egy label elemet is.

A későbbiekben kiválasztónégyzetet elrejtjük majd és csak a hozzá tartozó címke fog majd látszani.

1. példa:

Forráskód


....
 <div id="balmenu"> 
      <ul> 
...
        <li><a href="#">Termékek</a>
         <ul> 
           <li>
            <input id="valaszt1" name="valaszt" type="checkbox" checked>
            <label for="valaszt1">   </label>
            <a href="#">Kategória 1</a>
            <ul>
	      <li><a href="#">Alkat 1.1 </a></li>
	      <li><a href="#">Alkat 1.2 </a></li>
	      <li><a href="#">Alkat 1.3 </a></li>
	    </ul>
         </li>         
... 
        <li><a href="#">Kategória N</a></li>     
       </ul>
    </li></ul><br>
  </div>
 ...

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_1a.html