menu horizontal agréable

Version imprimable

01/04/2008, 12h18
yosraisi

menu horizontal agréable

bonjour

je viens de découvrir un menue fantastique source

le menue:
http://youngpup.net/projects/transmenus/demos/photos/

source
http://youngpup.net/projects/transmenus/

j'ai telecharger les fichier css et .js

et lorsque j'utilise la page html de ce menue en inserrant les liens il s'afiiche sans mise en forme la suite des liens superieur et il n' y a pas aussi le sous menue comme ça:
Liguria Lombardia Veneto Toscana Umbria Lazio

comment faire pour lui rendre comme afficher dans le site ???

merci de m'aider
01/04/2008, 14h56
le_chomeur

peut-être que si tu nous disais ce que tu as fait ?
ou un morceau de code de ta part , nous aiderais a cerner ton problème :)
01/04/2008, 15h06
SpaceFrog

menu ... un menu sans e ...

merci pour le de menu :mouarf:

je n'est pas fais une transformation mais j'ai volue voir le menue dans mon site et puis je le modifie et ça c'est le fichier menu c'est long

Code:

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
 
<html>
<head>
	<!-- these two are required for transmenus to function -->
<link rel="stylesheet" media="screen" type="text/css" title="Essai" href="<?php echo $this->baseUrl; ?>/public/styles/transmenu.css" />
<script src="<?php echo $this->baseUrl; ?>/public/scripts/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 = ""; }
 
      location.href="alt.html"
      }
		}
	</script>
</head>
 
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 bgcolor="white" onLoad="init()">
<form>
 
	<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>
		</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 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>
	</form>
</body>
 
</html>

01/04/2008, 15h56
le_chomeur

le code php ne nous sert pas a grand chose pour tester ;)
as tu le code généré , ainsi que le css + le js ?

2 pièce(s) jointe(s)

voici le code js c'est trop long j'ai donner le liens tu peux copier les fichiers css et js de ce lien
voici une portion de js

Code:

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
 
// JavaScript Document
/* =================================================================================================
 * TransMenu 
 * March, 2003
 * Customizable multi-level animated DHTML menus with transparency.
 *
 * Copyright Aaron Boodman (www.youngpup.net)
 * =================================================================================================
 * updates:
 * 04.19.04 fixed cascade problem with menus nested greater than two levels.
 * 12.23.03 added hideCurrent for menu actuators with no menus. renamed to TransMenu.
 * 04.18.03	fixed render bug in IE 5.0 Mac by removing that browser from compatibility table ;)
 *			also made gecko check a little more strict by specifying build no.
 * ============================================================================================== */
 
 
 
//==================================================================================================
// Configuration properties
//==================================================================================================
TransMenu.spacerGif = "img/x.gif";                     // path to a transparent spacer gif
TransMenu.dingbatOn = "img/submenu-on.gif";            // path to the active sub menu dingbat
TransMenu.dingbatOff = "img/submenu-off.gif";          // path to the inactive sub menu dingbat
TransMenu.dingbatSize = 14;                            // size of the dingbat (square shape assumed)
TransMenu.menuPadding = 5;                             // padding between menu border and items grid
TransMenu.itemPadding = 3;                             // additional padding around each item
TransMenu.shadowSize = 2;                              // size of shadow under menu
TransMenu.shadowOffset = 3;                            // distance shadow should be offset from leading edge
TransMenu.shadowColor = "#888";                        // color of shadow (transparency is set in CSS)
TransMenu.shadowPng = "img/grey-40.png";               // a PNG graphic to serve as the shadow for mac IE5
TransMenu.backgroundColor = "white";                   // color of the background (transparency set in CSS)
TransMenu.backgroundPng = "img/white-90.png";          // a PNG graphic to server as the background for mac IE5
TransMenu.hideDelay = 1000;                            // number of milliseconds to wait before hiding a menu
TransMenu.slideTime = 400;                             // number of milliseconds it takes to open and close a menu
 
 
//==================================================================================================
// Internal use properties
//==================================================================================================
TransMenu.reference = {topLeft:1,topRight:2,bottomLeft:3,bottomRight:4};
TransMenu.direction = {down:1,right:2};
TransMenu.registry = [];
TransMenu._maxZ = 100;
 
 
 
//==================================================================================================
// Static methods
//==================================================================================================
// supporting win ie5+, mac ie5.1+ and gecko >= mozilla 1.0
TransMenu.isSupported = function() {
        var ua = navigator.userAgent.toLowerCase();
		var pf = navigator.platform.toLowerCase();
        var an = navigator.appName;
        var r = false;
 
        if (ua.indexOf("gecko") > -1 && navigator.productSub >= 20020605) r = true; // gecko >= moz 1.0
        else if (an == "Microsoft Internet Explorer") {
                if (document.getElementById) { // ie5.1+ mac,win
                        if (pf.indexOf("mac") == 0) {
							r = /msie (\d(.\d*)?)/.test(ua) && Number(RegExp.$1) >= 5.1;
						}
						else r = true;
                }
        }
 
        return r;
}
 
// call this in onload once menus have been created
TransMenu.initialize = function() {
        for (var i = 0, menu = null; menu = this.registry[i]; i++) {
                menu.initialize();
        }
}
 
// call this in document body to write out menu html
TransMenu.renderAll = function() {
        var aMenuHtml = [];
        for (var i = 0, menu = null; menu = this.registry[i]; i++) {
                aMenuHtml[i] = menu.toString();
        }
        document.write(aMenuHtml.join(""));
}

j'ai envoyer comme piece jointe le css et le js