Menu déroulant sur IE7

**SpIrIt505050** · 11/02/2009, 23h05

Bonjour,

Je suis en train de réaliser un site web, j'ai trouvé un tutoriel pour créer un menu (ici) mais celui-ci ne fonctionne pas sur Internet Explorer pour moi (je code en local).

Voila le code, si vous trouvez qqchose qui ne va pas :

HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div id="menu">
	<ul>
		<li><a title="Accueil" href="index.php" onclick="change_current_tab('tab1')">Accueil</a></li>
		<li><a title="News" href="news.php" onclick="change_current_tab('tab2')">Actualités</a></li>
		<li><a title="Artistes" href="artistes.php" onclick="change_current_tab('tab3')">Artistes</a></li>
		<li >
			<a title="Informations Pratiques" href="infos.php" onclick="change_current_tab('tab4')">Infos</a>
			<ul>
				<li><a title="Informations Pratiques - Lieu" href="infos.php?page=lieu" onclick="change_current_tab('tab4')">Lieu</a></li>
				<li><a title="Informations Pratiques - Transport" href="infos.php?page=transport" onclick="change_current_tab('tab4')">Transport</a></li>
				<li><a title="Informations Pratiques - billeterie" href="infos.php?page=billeterie" onclick="change_current_tab('tab4')">Billeterie</a></li>
			</ul>
		</li>
		<li>
			<a title="Historique" href="historique.php" onclick="change_current_tab('tab5')">Historique</a>
			<ul>
				<li><a title="Historique 2008" href="historique.php?page=2008" onclick="change_current_tab('tab5')">Festival 2008</a></li>
				<li><a title="Historique 2007" href="historique.php?page=2007" onclick="change_current_tab('tab5')">Festival 2007</a></li>
			</ul>
		</li>
		<li><a title="Forums" href="forums.php" onclick="change_current_tab('tab6')">Forums</a></li>
			<li><a title="Liens" href="liens.php" onclick="change_current_tab('tab7')">Liens</a></li>
			<li><a title="Contacts" href="contact.php" onclick="change_current_tab('tab8')">Contacts</a></li>
	</ul>
</div>

CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<style type="text/css" media="screen">
#menu {
height:50px;
}
 
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
 
</style>
<!--[if !IE]> <-->
<style type="text/CSS" media="screen">
#menu li ul {
position:absolute;
}
</style>

Merci d'avance pour vos réponses.

Cordialement.

Spirit

ps : une autre chose aussi, sur IE7, tout code JavaScript ne fonctionne pas, alors qu'il n'y a aucun soucis sur Firefox.

**desert** · 12/02/2009, 11h41

Quel version d'IE ?
Sur IE7, il doit normalement marcher. Sur IE6, il faut passer par du JavaScript.
Concernant le JS qui ne s'exécute pas chez toi, regarde si tu ne l'as pas désactivé dans les options du navigateur.

EDIT: Par contre, ton commentaire conditionnel ne risque pas de marcher. Voici la bonne syntaxe :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<!--[if !IE]>
    <style type="text/css">
    #menu li ul {
        position:absolute;
    }
    </style>
<![endif]-->

**SpIrIt505050** · 12/02/2009, 14h20

Non, ça ne marche pas sur IE7 !

Et je n'ai pas touché au javascript sur IE ! C'est vraiment une horreur ce navigateur.

**SpIrIt505050** · 13/02/2009, 22h22

Je fais un up, parce que je ne trouve vraiment pas ce qui va pas avec ce navigateur de m**** !!!

Et je met mon code javascript, qui ne fonctionne pas en intégralité avec Internet Explorer mais qui fonctionne correctement avec Firefox. Si vous voyez qqchose qui ne va pas.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function GetId(id) {
	return document.getElementById(id);
}
 
 
 
// Change la couleur du champ formulaire lorsqu on clique dessus
function input_color(current_obj) {
	var objList = new Array("name", "email", "subject", "msg");
 
	for(var i = 0; i < 4; i++) {
		var obj = GetId(objList[i]);
		var error = GetId("error_" + objList[i]);
		if(objList[i] == current_obj) { 
			obj.style.backgroundColor = "#FEFFCC";
			error.style.display = "none";
		} else obj.style.backgroundColor = "";
	}
}
 
// Vérifie la valeur des champs du formulaire
function form_check() {
	var result = true;
 
	if(document.contact.msg.value == "") {
		document.contact.msg.focus();
		result = false;
	}
 
	if(document.contact.subject.value == "") {
		var error = GetId("error_subject");
		error.style.display = "inline";
		document.contact.subject.focus();
		result = false;
	}
 
	if(document.contact.email.value == "") {
		var error = GetId("error_email");
		error.style.display = "inline";
		document.contact.email.focus();
		result = false;
	} else {							if(document.contact.email.value.search(/^[^._-][a-z0-9._-]+[^._-]@[a-z0-9._-]+([a-z0-9]+[^._-])?[.-]+[a-z]{2,4}$/) == -1) {
			var error = GetId("error_email");
			error.style.display = "inline";			
			document.contact.email.focus();
			result = false;
		}
	}
 
	if(document.contact.name.value == "") {
		var error = GetId("error_name");
		error.style.display = "inline";
		document.contact.name.focus();
		result = false;
	}
 
	return result;
 
}
 
			// PageLoad function
			// This function is called when:
			// 1. after calling $.historyInit();
			// 2. after calling $.historyLoad();
			// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
	if(hash) {		
		var i = hash.indexOf("-");
		var part1 = "";
		var part2 = "";
 
		if(i == -1) {
			hash = hash + ".php";
			if(hash == "actu.php") hash = "news.php"; 
			} else {
				part1 = hash.substr(0, i);
				part2 = hash.substr(i + 1, hash.length);
				hash = part1 + ".php?page=" + part2;
			}
 
			$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
					setTimeout(function(){
			$("#content").load(hash, function(){
 
			$(".accordion h3:first").addClass("active");
			$(".accordion p:not(:first)").hide();
			$(".accordion h3").click(function(){
				$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");
				$(this).toggleClass("active");
				$(this).siblings("h3").removeClass("active");
			});
 
			$('#newsSlide').wslide({
				width: 520,
				height: 500,
				horiz: true,
				duration: 1000,
			});
 
			$("#galerie2007").transition({
				title: "Elektrochoc 2007",
				images: [ 
                                        {image: "images/2007/01.jpg", thumb: "images/2007/thumb/01.jpg", title: "01.jpg"},
                                        {image: "images/2007/02.jpg", thumb: "images/2007/thumb/02.jpg", title: "02.jpg"},
                                        {image: "images/2007/03.jpg", thumb: "images/2007/thumb/03.jpg", title: "03.jpg"},
                                        {image: "images/2007/04.jpg", thumb: "images/2007/thumb/04.jpg", title: "04.jpg"},
                                        {image: "images/2007/05.jpg", thumb: "images/2007/thumb/05.jpg", title: "05.jpg"},
                                        {image: "images/2007/06.jpg", thumb: "images/2007/thumb/06.jpg", title: "06.jpg"},
                                        {image: "images/2007/07.jpg", thumb: "images/2007/thumb/07.jpg", title: "07.jpg"}
                                ],
 
				displayCaption: false,
				autoRun: true,
				displayTime: 5000,
				transitionTime: 500
			});
 
		 });					
	}, 400);
 
} else {
 
	$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
	setTimeout(function(){
		$("#content").load("accueil.php");					
	}, 400);
}
 
}
 
$(document).ready(function(){
	$.historyInit(pageload);
 
	$("a[@rel='history']").click(function(){
		var hash = this.href;
		hash = hash.replace(/^.*#/, '');
		$.historyLoad(hash);
		return false;
	});
});

Menu déroulant sur IE7

CSS

Discussions similaires

Partager

Partager