menu css style 3 suisses

**datawebsolution** · 23/03/2009, 18h45

bonjour a vous, je suis nouveau dans ce forum , j'ai un petit souci dans un menu qui a le style du site web 3suise

des catégories dans des div , ces div sont en mode visibility hidden alors , onMouseOver il deviennent en visible mais le problème est dans le positionnement je positionne ses div en 1er plan avec z-index:1
et le sous contenu en z-index:0 mais en cliquant sur le menu les div se positionnent en haut tout a droite j'ai essai tout position:absolute , tout mais sa marche pas du tout si sa marche dans un navigateur pa exemple IE alors firefox non
voila le code

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
body {margin-top:0px;
text-align:center;
font-size:12px;
color:#333333;
font-family: Arial, Verdana,Helvetica, sans-serif;}
.contenu{text-align:left;position:relative;padding:0;margin:0 auto;width:924px;}
#logo{
margin-top:15px;
margin-bottom:0px;
float:left;
width:193px;
height:65px;
background:url(../images/logo.png);
}
#pub{
float:left;
margin:10px 10px 10px 20px;
width:70%;}
#insc{
clear:both;
font-size:11px;
text-align:right;
padding-right:30px;}
/*----------------------*/
#menu{
clear:both;
}
ul{
list-style:none;
margin:0px;
padding:0px;
float:left;}
li{
float:left;}
.menu li a { 
 display:block; 
 color:#333333;
 font-size:12px; 
 font-weight:bold; 
 text-decoration:none; 
 font-family:arial, verdana, sans-serif; 
 text-align:center; 
 margin-top:8px;
 padding:6px 10px 6px 10px;
 cursor:pointer; 
 }
.divMenu{// les div Menu prendrant la mm class
 
width:100%;
background-color:#FEFEFE;
border:2px solid #3366FF;
width:400px;;
height:250px;
z-index:2;
clear:both;
float:left;
position:absolute;}
#sous{// le contenu de la page en ariere plan
	z-index:0px;
	clear:both;
	margin-top:0px;
	background-image:url(../images/menu_02.png);
 
}
#info{
border:2px solid #66FF33;//style de chauque sous menu
}

//Code HTML

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>1er comparateur des prix en algerie, vente en ligne Publicit&eacute;</title>
<script type="text/javascript">
div = {
                show: function(elem) {
                        document.getElementById(elem).style.visibility = 'visible';
                },
                hide: function(elem) {
                        document.getElementById(elem).style.visibility = 'hidden';
                }
        }
 
/*
</script></head>
<body>
<div class="contenu">
 
<div id="pub">
</div>
<div id="insc">Se Connecter | Inscription | Aide </div>
<div id="menu">
<ul class="menu">
<li><a href="#" onmouseover="div.show('div11')" onmouseout="div.hide('div1');" >menu1</a></li>
<li><a href="#" onmouseover="div.show('div2')" onmouseout="div.hide('div2');" >menu2 </a></li>
<li><a href="#" onmouseover="div.show('div3')" onmouseout="div.hide('div3');" >Informatique</a></li>
</ul>
 
<div class="divMenu" style="visibility:hidden" id="div1">sous m1</div>
<div class="divMenu" style="visibility:hidden" id="div2">sous m2</div>
<div class="divMenu" style="visibility:hidden" id="div3">sous m3</div>
</div>
<div id="sous">
  <p>va</p>
  <p>CONTENU de LA PAGE................</p>
  <p>fsdf</p>
  <p>dfsdf</p>
  <p>&nbsp;</p>
</div>
</div>
</body>
</html>

sa peut venir de la fonction js le style hidden, en tout les cas j'ai presque tout essayé et sa n'a pas marché

**datawebsolution** · 23/03/2009, 21h49

voila j'ai changer le code js

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
function aff(monDiv1)
{
	var pr = document.getElementById(monDiv1);
   if (pr.style.display = "")
	     pr.style.display = 'bloc';
}
function cache(monDiv){
var   mt = document.getElementById(monDiv);	
if (mt.style.display =! "")
 mt.style.display ='none';
}

et le code CSS

Code css :

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
 
.menu li a { 
 display:block; 
 color:#333333;
 font-size:12px; 
 font-weight:bold; 
 text-decoration:none; 
 font-family:arial, verdana, sans-serif; 
 text-align:center; 
 padding:6px 10px 6px 10px;
 cursor:pointer;
 
 }
.divMenu{les div menu
float:left;
background-color:#FEFEFE;
border:2px solid #3366FF;
width:400px;;
height:250px;
z-index:500;
 
}
#sous{//contenu en ariere plan
	z-index:0px;
	clear:both;
	margin-top:10px;
	background-image:url(../images/menu_02.png);
 
 
}

le code HTLM

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<body>
<div class="contenu">
<div class="menu">
<ul class="menu">
<li><a href="#" onmouseover="aff('menu1)" onmouseout="cache('menu1');" >menu1</a></li>
<li><a href="#" onmouseover="aff(menu2)" onmouseout="cache('menu2');" >menu2 </a></li>
</ul>
</div>
<div class="divMenu" style="display:none" id="menu1">informatique</div>
<div class="divMenu" style="display:none" id="menu2">image et son</div><div id="sous">bla bla bla<br />

sa ne marche toujour pas

surtou dans IE 7

**desert** · 23/03/2009, 22h04

Bonjour, n'est-ce pas simplement un menu déroulant que tu recherches à faire ?
Si oui, tu peux regarder dans la galerie pour les exemples ou encore lire ce tutoriel.

**datawebsolution** · 23/03/2009, 22h26

pour le menu simple c'est vrai que c'est facile , mais dans mon cas c'est autre chose , il a le style du site web "3suises" c'est un large menu et les sous menu sont des div qui ont des bordures a colour différentes, j'ai mis en place la fonction js cité en haut mais dans explorer le div ne se cache pas il reste vigé dans sa position et le contenu en ariere plan de décale et redésant toute en bas l'or du onMousOver décalage

**GihefBey** · 23/03/2009, 23h25

Mets la page en ligne et donne-nous son adresse.
On aura tout.

-

menu css style 3 suisses

CSS

Discussions similaires

Partager

Partager