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*
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