-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
executable file
·203 lines (171 loc) · 9.39 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<html>
<head>
<title>TransMenus</title>
<!-- this is for the layout of this page itself; not transmenus. -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- these two are required for transmenus to function -->
<link rel="stylesheet" type="text/css" href="transmenu.css">
<script language="javascript" src="transmenu.js"></script>
<script language="javascript">
function init() {
//==========================================================================================
// if supported, initialize TransMenus
//==========================================================================================
// Check isSupported() so that menus aren't accidentally sent to non-supporting browsers.
// This is better than server-side checking because it will also catch browsers which would
// normally support the menus but have javascript disabled.
//
// If supported, call initialize() and then hook whatever image rollover code you need to do
// to the .onactivate and .ondeactivate events for each menu.
//==========================================================================================
if (TransMenu.isSupported()) {
TransMenu.initialize();
// hook all the highlight swapping of the main toolbar to menu activation/deactivation
// instead of simple rollover to get the effect where the button stays hightlit until
// the menu is closed.
menu1.onactivate = function() { document.getElementById("liguria").className = "hover"; };
menu1.ondeactivate = function() { document.getElementById("liguria").className = ""; };
menu2.onactivate = function() { document.getElementById("lombardia").className = "hover"; };
menu2.ondeactivate = function() { document.getElementById("lombardia").className = ""; };
menu3.onactivate = function() { document.getElementById("veneto").className = "hover"; };
menu3.ondeactivate = function() { document.getElementById("veneto").className = ""; };
menu4.onactivate = function() { document.getElementById("toscana").className = "hover"; };
menu4.ondeactivate = function() { document.getElementById("toscana").className = ""; };
menu5.onactivate = function() { document.getElementById("lazio").className = "hover"; };
menu5.ondeactivate = function() { document.getElementById("lazio").className = ""; };
document.getElementById("umbria").onmouseover = function() {
ms.hideCurrent();
this.className = "hover";
}
document.getElementById("umbria").onmouseout = function() { this.className = ""; }
}
}
</script>
</head>
<body bgcolor="white" onload="init()">
<div id="banner"></div>
<div id="content">
<div id="wrap">
<div id="menu">
<a id="liguria" href="#">Liguria</a>
<a id="lombardia" href="#">Lombardia</a>
<a id="veneto" href="#">Veneto</a>
<a id="toscana" href="#">Toscana</a>
<a id="umbria" href="#">Umbria</a>
<a id="lazio" href="#">Lazio</a>
</div>
<img id="img" src="img/bkgd.jpg" width="660" height="417">
</div>
<div id="left">
<p><b>TransMenus</b><br>March, 2003
<p>This is a multi-level menu system featuring transparency and animation. It was
originally written for use on <a href="http://www.mediatemple.net">mediatemple.net</a>, but later
generalized somewhat.
<p><a href="https://github.com/aboodman/transmenus">Source Code</a>
</div>
</div>
<script language="javascript">
// set up drop downs anywhere in the body of the page. I think the bottom of the page is better..
// but you can experiment with effect on loadtime.
if (TransMenu.isSupported()) {
//==================================================================================================
// create a set of dropdowns
//==================================================================================================
// the first param should always be down, as it is here
//
// The second and third param are the top and left offset positions of the menus from their actuators
// respectively. To make a menu appear a little to the left and bottom of an actuator, you could use
// something like -5, 5
//
// The last parameter can be .topLeft, .bottomLeft, .topRight, or .bottomRight to inidicate the corner
// of the actuator from which to measure the offset positions above. Here we are saying we want the
// menu to appear directly below the bottom left corner of the actuator
//==================================================================================================
var ms = new TransMenuSet(TransMenu.direction.down, 1, 0, TransMenu.reference.bottomLeft);
//==================================================================================================
// create a dropdown menu
//==================================================================================================
// the first parameter should be the HTML element which will act actuator for the menu
//==================================================================================================
var menu1 = ms.addMenu(document.getElementById("liguria"));
menu1.addItem("Ventimiglia", "http://youngpup.net/italy/photos/ventimiglia/thumb/102_0261.jpg");
menu1.addItem("Cinque Terre", ""); // send no URL if nothing should happen onclick
var submenu0 = menu1.addMenu(menu1.items[1]);
submenu0.addItem("Monterosso", "http://youngpup.net/italy/photos/cinqueterre/104_0458.jpg");
submenu0.addItem("Manorola", "http://youngpup.net/italy/photos/cinqueterre/thumb/104_0474.jpg");
submenu0.addItem("Corniglia", "http://youngpup.net/italy/photos/cinqueterre/104_0472.jpg");
submenu0.addItem("Rio Maggiore", "http://youngpup.net/italy/photos/cinqueterre/105_0522.jpg");
submenu0.addItem("Vernazza", "");
submenu0.addItem("Apartment", "");
submenu0.addItem("Via del Amore", "");
submenu0.addItem("Rocky beach", "");
submenu0.addItem("Swimming hole", "");
var submenu00 = submenu0.addMenu(submenu0.items[0]);
submenu00.addItem("foo");
submenu00.addItem("bar");
//==================================================================================================
//==================================================================================================
var menu2 = ms.addMenu(document.getElementById("lombardia"));
menu2.addItem("Milano", "");
var submenu1 = menu2.addMenu(menu2.items[0]);
submenu1.addItem("Galeria", "");
submenu1.addItem("Duomo", "");
submenu1.addItem("Castle", "");
//==================================================================================================
//==================================================================================================
var menu3 = ms.addMenu(document.getElementById("veneto"));
menu3.addItem("Verona");
menu3.addItem("Venezia");
var submenu2 = menu3.addMenu(menu3.items[0]);
var submenu3 = menu3.addMenu(menu3.items[1]);
submenu2.addItem("Hostel", "");
submenu2.addItem("Piazza Erba", "");
submenu2.addItem("Castle", "");
submenu2.addItem("Arena", "");
submenu3.addItem("Piazza San Marco", "");
submenu3.addItem("Lagoon", "");
submenu3.addItem("Hotel", "");
submenu3.addItem("Chichetti", "");
submenu3.addItem("Doge's Palace", "");
//==================================================================================================
//==================================================================================================
var menu4 = ms.addMenu(document.getElementById("toscana"));
menu4.addItem("Florence", "");
menu4.addItem("Sienna", "");
menu4.addItem("Montelicino", "");
menu4.addItem("Orvieto", "");
var submenu4 = menu4.addMenu(menu4.items[0]);
var submenu5 = menu4.addMenu(menu4.items[1]);
submenu4.addItem("Hostile", "");
submenu4.addItem("Duomo", "");
submenu4.addItem("Pitti Palace", "");
submenu4.addItem("Ponte Vecchio", "");
submenu5.addItem("Il Campo", "");
submenu5.addItem("Roman Center", "");
submenu5.addItem("Duomo", "");
//==================================================================================================
//==================================================================================================
var menu5 = ms.addMenu(document.getElementById("lazio"));
menu5.addItem("Roma", "");
var submenu6 = menu5.addMenu(menu5.items[0]);
submenu6.addItem("Appian Way", "");
submenu6.addItem("Trastevere", "");
submenu6.addItem("Pantheon", "");
submenu6.addItem("Palantine Hill", "");
submenu6.addItem("Colloseum", "");
submenu6.addItem("Forum", "");
submenu6.addItem("Trevi Fountain", "");
submenu6.addItem("St. Peter's", "");
submenu6.addItem("Vatican Museum", "");
//==================================================================================================
//==================================================================================================
// write drop downs into page
//==================================================================================================
// this method writes all the HTML for the menus into the page with document.write(). It must be
// called within the body of the HTML page.
//==================================================================================================
TransMenu.renderAll();
}
</script>
</body>
</html>