07_Menu2/Menu_02.htm
1 <html xmlns:t ="urn:schemas-microsoft-com:time">
2 <head>
3 <title>Menu_02</title>
4 <?import namespace="t" implementation="#default#time2">
5 <style>
6 .Menu {
7 position:absolute;
8 height:20; width:150; display:none;
9 border-width:1px; border-style:solid;
10 text-align:center;
11 }
12 </style>
13 <script type="text/javascript" >
14
15 var vpm =26; // vzdialenost poloziek menu
16
17 function CPolozkaMenu (M, A)
18 { this.M=M;
19 this.A=A;
20 this.x=10;
21 this.y=90;
22
23 this.Posun = Posun;
24 function Posun(x,y)
25 {
26 this.M.style.display='block';
27 this.A.path = Cesta(this.x, this.y, x, y);
28 this.A.beginElement();
29 this.x=x; this.y=y;
30 }
31
32 function Cesta(xz, yz, xc, yc)
33 {
34 var c;
35 c = " M " + xz + " " + yz;
36 c += " L " + xc + " " + yc ;
37 return c;
38 }
39
40 this.Skry = Skry;
41 function Skry()
42 {
43 this.M.style.display='none';
44 }
45 }
46
47 function CMenu ()
48 {
49 this.Polozky = new Array();
50
51 this.PridajPolozku = PridajPolozku;
52 function PridajPolozku(M, A)
53 {
54 A.dur = .2*(1+ this.Polozky.length);
55 this.Polozky.push(new CPolozkaMenu(M,A));
56 }
57
58 this.Posun = Posun;
59 function Posun ()
60 {
61 var x=event.clientX;
62 var y=event.clientY;
63 for (var i=0; i<this.Polozky.length; i++) this.Polozky[i].Posun(x, y+i*vpm);
64 }
65
66 this.Skry = Skry;
67 function Skry ()
68 {
69 for (var i=0; i<this.Polozky.length; i++) this.Polozky[i].Skry();
70 }
71 }
72
73 var Menu = new CMenu();
74 function Init()
75 {
76 Menu.PridajPolozku(M1, A1);
77 Menu.PridajPolozku(M2, A2);
78 Menu.PridajPolozku(M3, A3);
79 }
80
81 // Zmena zobrazenia položky pri presune kurzora nad a mimo
82 function Nad (M) { M.style.backgroundColor='#ffcc00'; }
83 function Mimo(M) { M.style.backgroundColor='#ffffff'; }
84
85 // Obsluzne funkcie poloziek menu
86 function OF1() { Oznam.innerText="Kuko"; }
87 function OF2() { Oznam.innerText="Hamo"; }
88 function OF3() { Oznam.innerText="Buro"; }
89
90 </script>
91 </head>
92 <body onload="Init()";
93 oncontextmenu="Menu.Posun(); return false;";
94 onclick = "Menu.Skry();" >
95 <h2>Animované menu</h2>
96 <span class="Menu" id="M1" onclick="OF1()";
97 onmouseover="Nad(this)" onmouseout="Mimo(this)"> Kuko </span>
98 <span class="Menu" id="M2" onclick="OF2()";
99 onmouseover="Nad(this)" onmouseout="Mimo(this)"> Hamo </span>
100 <span class="Menu" id="M3" onclick="OF3()";
101 onmouseover="Nad(this)" onmouseout="Mimo(this)"> Buro </span>
102
103 <t:animateMotion id="A1" targetElement="M1" origin="parent"
104 begin="indefinite" fill="freeze" />
105 <t:animateMotion id="A2" targetElement="M2" origin="parent"
106 begin="indefinite" fill="freeze" />
107 <t:animateMotion id="A3" targetElement="M3" origin="parent"
108 begin="indefinite" fill="freeze" />
109 <p>
110 Naposledy vyvolaná služba: <span id="Oznam">--</span>
111 </p>
112 </body>
113 </html>