Helyi menü elrejtése - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

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

A korábban elkészített weboldalunkat kiegészítjük egy checkbox-al, amit azonnal el is rejtünk.
A checkbox-hoz tartozó címkét beillesztjük a menüsorba.
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*

* 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