HTML5 + CSS3 logó
  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    

Helyi menü elrejtése


Zavaró, ha kis felbontású képernyőn rendelkezésre álló ablak nagy részét a menü foglalja el. Megoldást jelent a problémára, ha a felhasználónak megadjuk a lehetőséget a menüoszlop elrejtésére.

Az átalakítása 3 lépése

  1. A korábban elkészített weboldalunkat kiegészítjük egy checkbox-al, amit azonnal el is rejtünk.
  2. A checkbox-hoz tartozó címkét beillesztjük a menüsorba.
  3. Ha checkbox-ot a felhasználó bejelöli (checked), akkor a menüoszlopot elrejtjük, a tartalom div baloldali belső margóját pedig, a menüoszlop szélességével csökkentjük.

1. Példa:

Forráskód


...
<style type="text/css"> 
...
  /* Változik a Hibrid elrendezéshez képest */
   #MenuLabel {display:block;float:left;color:#0f0;}
   #chmenu {display:none;}
   #chmenu:checked ~ #balmenu  {display: none; }
   #chmenu:checked ~ #tartalom  {padding:5px; }
</style>   ....
<body>
   <div id="tarolo">    
     <input type='checkbox' name='chmenu' id='chmenu' value='chmenu'>    
     <header id="fejlec"> Webáruház neve és lógója </header>
     <nav id="menu">
        <label for='chmenu'  id='MenuLabel'>Menü</label>
        Termékek | Vásárlás | Kapcsolatok 
     </nav>
     <div id="balmenu"> 
       <br>
       <b>Kínálat</b>
       <ul> 
         <li>PC</li>
         <li>Laptop</li>     
         <li>Táblagép</li>     
       </ul>
     </div>  
     <div id="tartalom">
       <p> Az oldal tartalma ... </p>     
     </div>
     <footer id="lablec"> Céginfó, jogi info...</footer>
   </div>     
</body> 

Eredmény*

Eredmény*

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ő: rejtett_menu_webaruhaz.html