Kontakt

Przykładowe skrypty:

JavaScript to język skryptowy. Kodujac w JavaScript zyskujesz dynamiczne efekty na swojej stronie WWW.

Zobacz również:

LINKI:
Przepisy
Gry dla dzieci

W tym miejscu znajdziesz odnośniki do stron znajomych oraz do stron tematycznie powiązanych z tematyką mojego serwisu.

Skrypt menu ukryte linki

Skrypty obsługujący dynamiczną nawigację. Szczegółowe linki są ukryte do chwili wyboru odpowiedniej kategorii. Oprócz kodu javascript należy również wstawić odpowiednie style CSS. Wszystko zostało szczegółowo opisane zatem wstaw dynamiczną nawigację na własną stronę.

Na początek przetestuj działanie skryptu klikając w poszczególne linki.

Poniższy zapis należy umieścić w sekcji head z znaczniku script.

<script type="text/javascript">
function wyswietl(co) {
var ile = 3; for (var i = 1; i <= ile; i++)
if(co != i)
document.getElementById("w_" + i).style.display = 'none';
else
document.getElementById("w_" + i).style.display = 'block';
}
</script>

W sekcji body umieść następujący wpis:
<div id="navigacja">
<ul id="gora">
<li><a href="#" onclick="wyswietl(1);">Zwierzęta</a> | </li>
<li><a href="#" onclick="wyswietl(2);">Rośliny</a> | </li>
<li><a href="#" onclick="wyswietl(3);">Kredyty</a></li>
</ul>
<ul id="w_1">
<li><a href="#">Psy</a> | </li>
<li><a href="#">Koty</a></li>
</ul>
<ul id="w_2">
<li><a href="#">Kwiaty</a> | </li>
<li><a href="#">Drzewa</a> | </li>
<li><a href="#">Grzyby</a></li>
</ul>
<ul id="w_3">
<li>a href="#">Kredyty mieszkaniowe</a> | </li>
<li><a href="#">Kredyty hipoteczne</a> | </li>
<li><a href="#">Kredyty samochodowe</a></li>
</ul>
</div>

Kolejną ważną rzeczą są style CSS. Umieść je w sekcji head w znaczniku style:
<style type="text/css">
ul {
list-style-type: none;
}
li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
li a.link, li a.visited {
display: block;
width: auto;
float: left;
height: 20px;
}
#nawigacja {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
height: 20px;
}
#w_1, #w_2, #w_3 {
display: none;
}
</style>

Aby sterować wyglądem menu - zmieniaj style CSS. Możesz dodawać tło, zmieniać kolor liter itd...

W funkcji zastosowana została zmienna ile - musisz tu wpisać liczbę linków głównych. Jeżeli wpiszesz inną niż w przykładzie, pamiętaj, aby dodać również dodatkowe warstwy z linkami szczegółowymi.


UWAGA
Po zakodowaniu strony internetowej zawsze sprawdź czy prawidłowo wyświetla się we wszystkich popularnych przeglądarkach internetowych (np.: Internet Explorer, Mozilla Firefox, Opera).




Copyright © Atom 2006