[JavaScript] Spis treści

Na prośbę Loli 

Miło nam, że mamy aktywnych czytelników, którzy pytają, wręcz domagają się instrukcji. Tak trzymajcie!

Na wstępie chciałabym jednak zaznaczyc, ze efekt na taki spis treści nie jest mojego autorstwa. O ile mnie pamięc nie myli, instrukcje brałam z bloga Elfaby.

No to lecimy z tym koksem.

 <form><select style="width: 100%; background:black; color: #53dab3;font-family:arial; text-align:center; font-size:10px;border:1px solid #53dab3;padding:3px" onchange="window.open(this.options[this.selectedIndex].value,'_self')"
size=1 name=menu>

<option />->Menu<-

<!-- change the links with your own -->
<option value="http://zatracone-instrukcje.blogspot.com/2014/03/swoj-wasny-niepowtarzalny-podpis.html" />[HTML] Swój własny niepowtarzalny podpis
<option value="http://zatracone-instrukcje.blogspot.com/2014/03/pseudoklasa-czyli-kazdy-inny-pagelist1.html" />[Pseudoklasa] Czyli każdy inny
<option value="http://zatracone-instrukcje.blogspot.com/2014/03/widzety-bo-kazdy-ma-swoje-imie-id.html" />[Widżety] Bo każdy ma swoje imię
<option value="http://zatracone-instrukcje.blogspot.com/2014/03/karty-czyli-jak-zrobic-fajny-
</select></form>

No tak, trochę czarnej magii. Gubimy się? Nie? To super! Ale dopełnijmy formalności, bo przecież samo kopiuj wklej to żadna instrukcja.
CALOSC WKLEJAMY DO RAMKI HTML/JAVASCRIPT
Bierzemy na warsztat pierwsze cudo.

 <form><select style="width: 100%; background:black; color: #53dab3; font-family:arial; text-align:center; font-size:10px;border:1px solid #53dab3;padding:3px" onchange="window.open(this.options[this.selectedIndex].value,'_self')"
size=1 name=menu>

Moi drodzy. Wyróżnione elementy są waszym polem do popisu.
- background - tło widżetu (black, #53dab3);
- color - kolor czcionki(black, #53dab3);
- font family - rodzaj czcionki (arial, georgia);
- text align - pozycja napisów (center, left, right);
- font size - rozmiar czcionki (10px, 11px, 12px);
- border - obramowanie (grubośc, rodzaj, kolor);
- padding - odleglośc od obramowania;

<option />->Menu<-

W miejscu MENU wprowadzacie swoja własną nazwę. Może to byc "Archiwum", "Spis treści", itd.

<!-- change the links with your own -->
<option value="TWOJ LINK 1" />OPIS
<option value="TWOJ LINK 2" />OPIS
<option value="TWOJ LINK 3" />OPIS
</select></form>

Tak to mniej więcej wygląda. Co do pozycjonowania. Klikacie na swój blog prawym klawiszem -> źródło strony i szukacie w kodzie jak się wasz widżet nazywa. Np powiedzmy, że to #HTML5. No to lecimy.

#HTML5 {position: relative; top:10px; left10px;} 

Jeśli coś pominęłam lub jeżeli macie inne, lepsze rozwiązanie - śmiało, nie gryzę. Z uwagi na późną porę za błędy przepraszam.