Zadnjih par dana imamo problema sa radom servera tako da site i forum cesto nisu dostupni. Cak je upitno da li cete vidjeti grafike u ovom broju newslettera, posto se ocitavaju sa servera. Nadamo se da ce uskoro biti bolje :-)

Izradite padajuce izbornike pomocu Dreamweavera
Napisala: Visnja Zeljeznjak © 2001 - 2002

Padajuci izbornici (meniji) na kakve smo navikli u Windows okolini cesta su i vrlo upotrebljiva pojava na webu. Podrzavaju ih svi moderni browseri i nije ih tesko izraditi. Naucite kako napraviti lijepi izbornik pomocu Dreamweavera.

Padajuce izbornike sigurno ste susretali na mnogim web sajtovima i pozeljeli ih imati i kod sebe. Dobro ih znate: oni iskacu kad misem prijedjete preko neke slike ili linka. Vrlo su prakticni jer ih znaju koristiti svi Windows korisnici, stede piksele na vasem ekranu i dosta se brzo ucitavaju.

Padajuci izbornici nisu nista drugo nego layeri kojima upravlja Javascript i to tako da ih sakriva ili otkriva, ovisno o tome gdje postavite kursor misa. Srecom, ne morate rucno pisati ni znati Javascript da biste kreirali takve izbornike.

Primjere padajucih (okomitih i vodoravnih) izbornika mozete vidjeti na sljedecim sajtovima (nazalost, ove primjere samo Internet Explorer prikazuje ispravno):

http://www.coles.com.au/
http://msdn.microsoft.com/
http://www.icnz.org.nz/

Za potrebe ovog clanka izradila sam mali primjer izbornika na kojem cu bazirati svoje upute. Isprobajte moj izbornik da biste vidjeli sto je krajnji rezultat ove nase vjezbice.

Izbornik je kreiran koristenjem Show-Hide Layers behaviora unutar Dreamweavera 4. U osnovi, ovaj izbornik sadrzi dva behaviora:

1. Kad se prijedje misem preko linkova Izbornik1-Izbornik3, pokazi pripadajuci izbornik i sakrij sve ostale.
2. Kad se makne mis s izbornika, sakrij izbornik.

1. Prvo kreirajte svoj glavni izbornik i imenujte stavke u njima (u mom primjeru su to Izbornik1 - Izbornik3). Linkajte ih na stranice na koje zelite da vode kad se klikne na njih ili im dodijelite lazni link (<a href="#"></a>). Linkanje je vazno jer neki browseri ne podrzavaju dodavanje behaviora svim elementima web stranice, vec npr. samo linkovima, slikama i slicno.
2. Kreirajte layere (Insert --> Layer) koji ce predstavljati vase padajuce izbornike i pozicionirajte ih na stranici gdje zelite da se prikazuju.
3. Isprobajte layere u svim mogucim browserima. Mozda cete morati fino namjestati layere kako bi se pravilno prikazali u browserima za koje dizajnirate jer razliciti browseri razlicito izracunavaju poziciju layera na stranici. Nadjite kompromis koji ce dati sto vecu funkcionalnost u svim browserima uz minimalna estetska odstupanja u manje koristenim browserima.
4. Svim layerima odredite property visibility="hidden".
5. U layere ubacite sadrzaj izbornika prema zelji - ovdje su to kao primjeri "IzbornikX - izborY". Predlazem da u layer ubacite tablicu s onoliko redova koliko cete imati izbora - moze se dogoditi da ce vam se izbornici cudno ponasati ako sadrzaj ne stavite u tablice. Linkajte sadrzaj na zeljene web stranice.
6. Deselektirajte sve layere, tj. postavite mis u radnom prozoru Dreamweavera tako da nijedan layer nije oznacen. Ovo je vazno zbog sljedeceg koraka u kojem necete moci dodati behaviore ako je selektiran neki layer.

1. Selektirajte prvi izbornik i otvorite Behaviors prozor (Shift+F3).
2. Kliknite na gumb + koji sluzi za dodavanje novih behaviora i odaberite "Show-Hide Layers". Ako je ova stavka nedostupna, znaci da niste deselektirali neki od layera. Deselektirajte ih i pocnite ponovo.
3. Nakon odabira "Show-Hide Layers" opcije pojavljuje se dijaloski okvir u kojem odabirete koje layere prikazati, a koje sakriti, kao u mom primjeru:
   
   
   
   
4. Nakon sto kliknete OK, u Behaviors prozoru ce vam se prikazati novokreirani behavior, ali s onClick funkcijom. Kliknite jednom na taj behavior i dobit cete mali trokutic za izbor ostalih funkcija medju kojima pronadjite i izaberite onMouseOver funkciju.
5. Ponovite korake 1-4 za svaki izbornik koji imate.

Sad nam jos samo treba behavior koji ce sakriti layer/izbornik kad se misem maknemo s njega. To nam je potrebno kako izbornici ne bi prekrivali ostatak sadrzaja na stranici kad vise nisu potrebni.

1. U Behaviors prozoru (Shift+F3) kliknite na znak "+" i odaberite opciju "Show Events For" u kojoj vjerojatno imate stavljenu kvacicu kraj izbora "4.0 and later browsers". Postavite ovo na "IE 4.0".
2. Selektirajte prvi layer (kliknite na zuti Dreamweaver anchor koji oznacava layer).
3. Opet kliknite na znak "+" i za svaki layer kreirajte 2 behaviora jednako kako smo dodavali behaviore izbornicima: prvi s funkcijom onMouseOver na "Show" koji ce prikazivati doticni layer i drugi s funkcijom onMouseOut na "Hide" koji ce sakriti doticni layer. Behaviors prozor bi vam trebao izgledati kao na ovoj slici.
4. Ponovite korake 2 i 3 za svaki layer / izbornik koji imate.

Moram napomenuti da ovaj behavior nece raditi pod Netscape 4.7 browserom - tamo ce posljednji odabrani izbornik ostati vidljiv i vjerojatno ce prekrivati dio sadrzaja web stranice. Pokusajte to izbjeci tako da u glavni izbornik ukljucite neku stavku (npr. link na pocetnu stranicu) koja ne prikazuje nijedan izbornik i dodajte joj behavior onMouseOver s opcijom "Hide" za sve postojece layere / izbornike. Tako ce surfer barem imati opciju da deaktivira izbornike koji mu smetaju.

Sada vec dovoljno znate o kreiranju izbornika i o Dreamweaver behaviorima da biste mogli rijesiti druge eventualne probleme koji vam se mogu javiti kod finog podesavanja vasih izbornika. Eksperimentirajte s raznim behaviorima i isprobavajte kako oni utjecu na vase izbornike.

Predlazemo da svoj izbornik uljepsate, dodate mu boje, pozadine i slicno. Svakako isprobajte kako se on ponasa i izgleda u svim browserima do kojih mozete doci.

Visnja Zeljeznjak je Chief Content Manager na Webmajstori.net. Na grbaci ima jos tri sajta: Besplatne-Stvari.com, Newsletteri.com i Top-Lista.com. Omiljene teme su joj web usability, pisanje za web i online marketing. Jedna je od idejnih zacetnika ovog sajta.