1. példa a kiinduló oldalt mutatja, ami nem más mint a Webáruház fejléce fejezetben készített elő oldalunk.
Első lépésben elhelyezzük a linkeket a menüsorban, mégpedig lista szerkezetben. Csupán HTML kód változik. Ezt mutatja a második példa.
1. Példa:
Forráskód
...<style type="text/css">
- {margin:0; padding:0;}
#tarolo {position:relative; display:block; min-height:100%; width:100% }
#fejlec {position:absolute; display:block; top:0; left:0;
height:50px; width: 100%; background-color:#662210; color:#ffddcc;}
#menu {position:absolute; display:block; top: 50px; left: 0;
height:30px; width: 100%; text-align:center;
background-color:#aa2210; color:#ffddcc;}
#balmenu {position:absolute; display:block; top:80px; left:0;
height:290px; width:100px; ...}
#tartalom {position:absolute; display:block; top:80px; left:100px;
background-color:#ffddcc; color:#662210; padding-bottom:40px; }
</style> ....
<body>
<div id="tarolo">
<header id="fejlec"> Webáruház neve és lógója </header>
<nav id="menu">Termkek | Vásárlás... </nav>
<div id="tartalom"><p> Az oldal tartalma ... </p>
</div>
<div id="balmenu"> <br> <b>Kínálat</b> ...
</div>
</div>
</body>
Eredmény*
2. Példa:
Forráskód
...<style type="text/css">
....
</style> ....
<body>
....
<nav id="menu">
<ul><li>
<a href="#">Termékek</a>
</li><li>
<a href="#">Vásárlás</a>
</li><li>
<a href="#">Kapcsolatok</a>
</li></ul>
</nav>
....
</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ő: webshop_menu_1.html