Listás navigáció

A következõ bemutatóban, négy navigációs gomb lett létrehozva.
Ez annyiban különbözik a képekkel vagy szöveggel létrehozott hivatkozásoktól, azaz navigációktól, hogy a navigációs szöveg, egy adott keretben helyezkedik el, és ha az egérrel föléje állunk megváltozik a háttérszíne. Úgy mûködnek, mint egy kapcsoló, ezért nevezzük navigációs gombnak.
Ha beírunk hozzájuk hivatkozásokat valamelyik html - lapra, akkor ezek is mûködõképesek lesznek.

Listás felsorolású navigációk háttérszínét, a div szakasz háttérszíne határozza meg.

Meírása xhtml lapon

<div id="navigacio">
<ul>
<li><a href="#">xxxxx A html</a></li>
<li><a href="#">xxxxx B html</a></li>
<li><a href="#">xxxxx C html</a></li>
<li><a href="#">xxxxx D html</a></li>
</ul>
</div>

Meírása CSS lapon

#navigacio {width: 750px; height: 50px; margin: 10px; }
#navigacio {font-size: 16px; background: blue; border: 2px solid aqua;}

#navigacio ul { text-align: center; margin-top: 15px; margin-bottom: 10px;}

#navigacio li {list-style: none; display: inline;}
#navigacio li {margin-right: 35px; }

#navigacio a {color: #fff; border: 1px solid #ccc; }
#navigacio a { text-decoration: none; padding:0.25em 0.5em; }
#navigacio a:hover {color: #f8dd47; background: #757575; }

Listás felsorolású navigációk háttérszínét, az ul háttérszíne határozza meg.

Megírása xhtml lapon

<div id="navig">
<ul>
<li><a href="#">xxxxx A html</a></li>
<li><a href="#">xxxxx B html</a></li>
<li><a href="#">xxxxx C html</a></li>
<li><a href="#">xxxxx D html</a></li>
</ul>
</div>

Megírása CSS lapon

#navig {width: 740px; }

#navig ul {width: 600px; margin-top: 5px; margin-left: 50px; margin-bottom: 15px; }
#navig ul { text-align: center; background-color: blue; padding: 10px 0px 10px 0px;}

#navig li {list-style: none; display: inline; margin-right: 5px;}
#navig li {font-size: 10pt; font-weight: bold;}

#navig a {text-decoration: none; color: #fff; background: #969676;}
#navig a {border: 2px solid #ccc; padding: 2px 5px 2px 5px; }
#navig a:hover {color: #f8dd47; background: #757575;}

Navigációs, villogó lista vízszintesen

Megjelenése weblapon, azaz monitoron
Teszteléshez, szöveg fölé húzzuk az egeret.

Megegírása XHTML lapon

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

<div id="nav">
<ul>
<li><a href="hova.html">xxxxx A html</a> </li>
<li><a href="hova.html">xxxxx B html</a> </li>
<li><a href="hova.html">xxxxx C html</a> </li>
<li><a href="hova.html">xxxxx D html </a> </li>
</ul>
</div>

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

#nav {width: 650px; height: 50px; margin-left: 40px;}
#nav {background: #3c4f38; border: 2px solid black;}
li {list-style: none; display: inline;}
li {margin-right: 35px; }
/* A hivatkozásokat, vizszíntesen középre helyezzük. Függölegesen, a felsõ és alsó margóval kell beállítani. */
ul { text-align: center; margin-top: 15px; margin-bottom: 10px;}
a { color: #fff; }
a {border: 1px solid #ccc; }
a { text-decoration: none; padding:0.25em 0.5em; }
a:hover {color: #f8dd47; background: #757575; }

Vissza a lap elejére

Listák vízszintesen, egymástól külön

Megegírása XHTML lapon

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

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

#navvizlista {width: 770px; border: 2px solid black; padding-top: 10px;}

#navvizlista ul {width: 550px; background-color: aqua; margin-left: 100px;}
#navvizlista ul {text-align: center; padding: 10px;}

#navvizlista li { font-size: 12px; font-weight: bold;}
#navvizlista li {list-style: none; display: inline; margin-right: 5px;}

#navvizlista a {background: #3c4f38; text-decoration: none; color: #fff;}
#navvizlista a {border: 2px solid #ccc; padding: 2px 5px 2px 5px;}
#navvizlista a:hover {background-color: #fc0; color: black;}

Vissza a lap elejére