Listás felsorolású navigációk

Megegírása XHTML lapon

A "elérési_út" helyére írjuk azon elérési útvonalat (html fájl elnevezését), ahová a rákattintáskor jutunk.

<div id="navdlista">
<ul class="navdlista">
<li> <a href="elérési_út.html">Téma 1</a> </li>
<li> <a href="elérési_út.html">Téma 2 </a> </li>
<li> <a href="elérési_út.html">Téma 3 </a> </li>
<li> <a href="elérési_út.html">Téma 4 </a> </li>
<li> <a href="elérési_út.html">Téma 5 </a> </li>
<li> <a href="elérési_út.html">Téma 6 </a> </li>
<li> <a href="elérési_út.html">Téma 7 </a> </li>
<li> <a href="elérési_út.html">Téma 8 </a> </li>
<li> <a href="elérési_út.html">Téma 9 </a> </li>
</ul>
</div>

Meghatározások megírása CSS lapon

#navdlista {width: 120px; padding: 10px 0px 10px 0px; background-color: black;}
.navdlista a {text-align: center;}
.navdlista{list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px; margin-left: 15px;}
.navdlista a {background: #3c4f38; display: block; width: 80px; text-decoration: none; color: #fff;}
.navdlista a {border: 1px solid #ccc; margin-top: 2px; padding: 2px 5px 2px 5px;}
.navdlista a:hover {background-color: #fc0; color: black;}

Megírása XHTML lapon

A "X" helyére írjuk azon elérési útvonalat (html fájl elnevezését), ahová a rákattintáskor jutunk.

<div id="navszvtabla">
<table border="4" cellpadding="2" class="navszvtabla">
<tr><td><ul class="valtozoa"><li> <a href="X.html"> Téma 1 </a></li> </ul></td></tr>
<tr><td><ul class="valtozob"><li> <a href="X.html"> Téma 2 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoc"><li> <a href="X.html"> Téma 3 </a></li> </ul></td></tr>
<tr><td><ul class="valtozod"><li> <a href="X.html"> Téma 4 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoe"><li> <a href="X.html"> Téma 5 </a></li> </ul></td></tr>
<tr><td><ul class="valtozof"><li> <a href="X.html"> Téma 6 </a></li> </ul></td></tr>
<tr><td><ul class="valtozog"><li> <a href="X.html"> Téma 7 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoh"><li> <a href="X.html"> Téma 8 </a></li> </ul></td></tr>
<tr><td><ul class="valtozoi"><li> <a href="X.html"> Téma 9 </a></li> </ul></td></tr>
</table>
</div>

Megírása CSS lapon

#navszvtabla {width: 160px; background-color: black; margin-left: 30px;}
.navszvtabla{width: 110px; margin: 15px; background: red;}
.navszvtabla td {text-align: center; font-size: 12px; font-weight: bold; }

.valtozoa, .valtozob, .valtozoc, .valtozod, .valtozoe, .valtozof, .valtozog, .valtozoh, .valtozoi {width: 110px; list-style: none; font-size: 12px; font-weight: bold; margin: 0px; padding: 0px;}

.valtozoa a, .valtozob a, .valtozoc a, .valtozod a, .valtozoe a, .valtozof a, .valtozog a, .valtozoh a, .valtozoi a {display: block; width: 110px; text-align: center; padding: 2px 0px 2px 0px; background: #3c4f38; text-decoration: none; color: #fff;}

.valtozoa a:hover, .valtozob a:hover, .valtozoc a:hover, .valtozod a:hover, .valtozoe a:hover, .valtozof a:hover, .valtozog a:hover, .valtozoh a:hover, .valtozoi a:hover {padding: 2px 0px 2px 0px; background-color: #fc0; color: black;}

.valtozoa a:hover{background-color: aqua;} - Megváltoztatjuk a háttérszínt
.valtozob a:hover{background-color: fuchsia;} - Megváltoztatjuk a háttérszínt
.valtozoc a:hover{background-color: lime;} - Megváltoztatjuk a háttérszínt
.valtozod a:hover{color: blue;} - Megváltoztatjuk a betű színét