Tutorial na Pull - Down menu v JavaScripte

JavaScript pull - down menu sú spôsob , ako vytvoriť graficky vylepšené menu pre navigáciu užívateľa na webových stránkach . Tieto ponuky sa stali štandardom v programovaní webových stránok vo formáte HTML , takže mnoho užívateľov rozpoznať funkčnosť rozhrania . Pri vytváraní rozbaľovacej ponuky JavaScript , je to len nutné pridať pár riadkov kódu v aplikácii . Javascript

Vytvorenie JavaScript pull - down menu možno vykonať pomocou funkcie vloženého do webovej stránky . Funkcia JavaScript sa potom nazýva prvok v menu . Zakaždým , keď sa užívateľ pohybuje cez menu , funkcia JavaScript je volaná a otvorí zoznam možností pre užívateľov . Nižšie je uvedený príklad Javascript roletového menu funkcií : .

Funkcia pulldown ( menu_element , pozícia ) { menuObject = document.getElementById ( menu_element ) štýl , newPosition = ( parseInt ( menuObj.top ) == -10 ) ? -100 : -10 }

Prvý príkaz v kóde je názov funkcie . To sa používa v HTML neskôr v tomto výukovom programe . Prvý príkaz v kóde je súčasťou ponuky . Vzhľadom k tomu , niektoré položky v menu sa používajú v JavaScripte navigáciu , to používa ID prvku , ktorý je odovzdaný z prvku HTML . Ďalší riadok presunie prvok buď zatvorte rozbaľovacie menu alebo rozšíriť ju .
Pridať JavaScriptové funkcie do menu položky

menu sú vytvorené pomocou tag div objekty vo formáte HTML . Div tag , ktorý sa používa pre menu pull - down normálne sa texte priradený k tomu , aby vizuálne vyzve užívateľa k prejdite myšou nad element . Akonáhle je myš vznášal nad tag div HTML , volanie sa na funkciu JavaScript otvorte rozbaľovacej ponuky . Nasledujúci príklad div tagu prvku , ktorý volá funkciu vytvorenú v bode 1 :

< div id = " main_menu " onmouseover = " pulldown ( " main_menu " , -10 ) " onmouseout = " rozbaľovacej ( " main_menu " , -100 ) " >

Tento kód volá funkciu pull - down , keď sa myš pohybuje nad tag div , ale potom volá funkciu znovu , keď sa myš odsunie od prvku . To dáva vzhľad otváranie a zatváranie v ponuke na webovej stránke .

• Predchádzajúca strana: Zmena ukazovateľa myši v Javascriptu 
• Ďalšia strana: Ako previesť HTML do JSP