logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
menüMENÜ   

Listaszerkezet kialakítása



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


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.