Създаване на кaскадно меню

Пример: Създаване на главно меню с две позиции, като поне за едната позиция са добавени още две възможности (кaскадно меню). Използват се нива/слоеве (Layers) за поместване на главното и подчинените менюта.

Указания:

• Създайте нова страница Menu.htm;
• Покажете панела на задачите TaskPane и изберете Layers;
• Вмъкнете в страницата ниво/слой, в което ще разположите главното меню и именувайте нивото/слоя gmenu (десен клик в TaskPane върху нивото и ModifyID)
• Разпънете слоя хоризонтално, за да можете да поместите повече от един бутон в него;
• От меню Insert/WebComponent/DynamicEffects->InteractiveButton вмъкнете два бутона, подходящи за хоризонтално разположено меню и ги именувайте например GM1, GM2;

За създаване на подменю например на бутон GM1изпълнете следните стъпки:

• Вмъкнете в страницата нов слой под първия бутон (извън първия слой), в който ще разположите подменюто и го наречете SmG1 (десен клик в TaskPane върху нивото и ModifyID)
• В новия слой от меню Insert/WebComponent/DynamicEffects->InteractiveButton вмъкнете два подходящи за вертикално разположено меню бутона един под друг (използвайте комбинацията Shift+Enter, за да преминете на нов ред в слоя след вмъкнат първи бутон), като първия бутон именувайте SM11, а втория - SM12;
• Направете слоя с главното меню родителски за този с подчиненото меню, като в TaskPane посредством drag and drop технологията с мишката пренесете слоя на подчиненото меню и го пуснете върху този на главното меню (ако се наложи главното меню да се мести в страницата едновременно с него ще се мести и подчиненото);
• Променете размерите на слоя с подменюто, ако това се налага, за да бъде добре подравнен по границите на съответния бутон от главното меню;
• Направете от TaskPane слоя SmG1 с подменюто невидим (затворено око в TaskPane) - той ще трябва да се вижда само ако е избран съответния му бутон от главното меню;

За показване на подменюто, когато курсорът премине над бутона GM1 изпълнете следните стъпки:

• Изберете бутон GM1 като обект, върху който ще се прилага действието и от TaskPane изберете Behaviors. Този вид бутони вече имат свързани с тях действия, които ще се визуализират и предстои добавянето на ново действие от меню Insert/ Change Property;
• В диалоговия прозорец е избрана опцията Current Element (текущ елемент), какъвто сега е бутон GM1, но желаното действие е свързано с нивото SmG1 - т.е. трябва да бъде избран друг елемент и затова посочете Select Element, при което в полето трябва да се появи тага div за слой. От двата възможни слоя в падащото меню с имена на елементи (ElementID) изберете SmG1 за слоя на подменюто. Натиснете бутон Visibility и в получения диалогов прозорец изберете Visible, след което - бутон OK за затваряне на диалогов прозорец Visibility. Включете поле Restore on mouseout event, за да се възстанови старото положение - когато курсорът напусне бутона подменюто трябва да става невидимо. Натиснете бутон OK за затваряне на диалогов прозорец ChangeProperty;
• В TaskPane всички досега уточнения за действието (Action) ChangeProperty са съпоставени на събитието (Event) onclick за бутона GM1, което трябва да промените на onmouseover, за да не е необходимо натискането на GM1, за да се види неговото подменю.

Ако тествате резултата в браузер ще забележите, че натискането на бутон от подменюто не е възможно, защото според настройките извършени до сега то трябва да изчезва след напускане на бутон GM1 от главното меню. За да бъде подменюто видимо, когато курсорът е над него изпълнете следните стъпки:

• Трябва да се избере в дизайнерския изглед нивото на подменюто, за да се сменят неговите свойства, но то е скрито и не се вижда. Налага се да превключите TaskPane в Layers режим или от менюто в горната част на TaskPane, или от хипервръзката Layers в долната част на панела на задачите и в режима Layers от панела на задачите да изберете слоя на подменюто. След това отново превключете към режима Behaviors на панела на задачите;
• В режима Behaviors изберете Insert/ Change Property;
• В диалоговия прозорец Change Property изберете Current Element, след което натиснете бутон Visibility;
• В новия диалогов прозорец изберете Visible и натиснете OK;
• В диалоговия прозорец Change Property включете Restore on mouseout event, за да осигурите изчезването на подменюто, когато курсора го напусне;
• Натиснете OK бутона, за да запазите настройките в промяната на свойствата;
• В режима Behaviors на панела на задачите променете съответното събитие от onclick на onmouseover;
• Запазете страницата и я тествайте в браузер.