Fonctionnement menu dynamique CSS

**deathbiscuit** · 18/10/2010, 16h20

Hello tout le monde!

J'apprends la création de site web et à la main! J'ai trouvé un tuto qui montre la création d'un menu dynamique horizontal, nickel j'ai réussi à l'adapter comme j'ai envie, aucun soucis au niveau du CSS pour la personnalisation.

Maintenant j'aimerai bien l'intégrer dans une page template.

Voilà le CSS du menu

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
 
.menu{
    position:absolute;
    display:block;
    margin:0;
    padding:0;
    width:500px;
    }
 
 
/*  */
.menu ul{
 
    position:absolute;
    display:block;
    width:124px;
    margin:0;
    padding:0;
    }
 
.menu li ul{
 
    visibility:hidden;
    }
 
.menu li li ul{
	background-color:black;
    position:absolute;
    margin-left:124px;
    margin-top:-29x;
    }
 
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:6px;
    padding:0px; /* Change sur la hauteur */
    }
 
.menu li li{
    display:block;
    float:none;
		margin:1px;
    }
 
/* correct a little IE bug */
* html .menu li li{
    display:inline;
    }
 
.menu a{
    text-align:center;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:1px;
    }
 
.menu a:hover{
    background-color: #A366A3; /* Violet clair */ 
}
 
	a:link,a:visited
{
	font-weight:bold;
	color:#FFFFFF;
	background-color:	#660066; /* Violet foncé */
	text-align:center;
	padding:6px;
	text-decoration:none;
	text-transform:uppercase;
}

Le code 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
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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr"><head>
 
<title>Menu déroulant horizontal à plusieurs niveaux en DHTML</title>
 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="Robots" content="follow" />
    <meta name="MSSmartTagsPreventParsing" content="TRUE" />
 
<!-- script du menu -->
<script type="text/javascript" src="dynMenu.js"></script>
 <!-- détéction du navigateur -->
<script type="text/javascript" src="browserdetect.js"></script>
 
<!-- important pour que les vieux navigateurs ne comprennent pas le CSS -->
<style type="text/css">
    @import "menu.css";
</style>
 
</head><body>
 
 
<!-- liste imbriquée de liens qui fera office de menu -->
<ul id="menu">
    <li><a href="#menu1">menu 1</a>
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
            <li><a href="#">élément 4</a>
            </li>
        </ul>
    </li>
    <li><a href="#menu2" >menu 2</a>	
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
    </li>
    <li><a href="#menu3" >menu 3</a>	
        <ul>
            <li><a href="#">élément 1</a></li>
            <li><a href="#">élément 2</a></li>
            <li><a href="#">élément 3</a></li>
        </ul>
    </li>
</ul>
 
<script type="text/javascript">
    initMenu();
</script>
 
</body>
</html>

J'arrive à l'intégrer parfaitement dans mon template. Le problème survient à l'affichage : le menu de droite du template prends les mêmes mise en forme que le menu horizontal.

J'ai fouillé un peut partout, mais je n'ai pas réussi à trouver l'explication sur le fonctionnement du CSS du menu, dont :

Code :

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

1
2
3
 
.menu li li{}
.menu li li ul{

Je pense que je pourrai leur attribuer une classe en comprenant le fonctionnement pour pour bien les distinguer et qu'ils ne se confondent pas.

Merci d'avance!

**polymorphisme** · 19/10/2010, 11h47

Bonjour,

les tutoriels répondent complètement à ta question :
http://css.developpez.com/cours/?pag...itiation-css-2

**deathbiscuit** · 07/12/2010, 13h25

Merci bien pour ta réponse. J'ai déjà vu ce tuto et il ne m'a malheureusement pas beaucoup éclairée.

Après quelques recherches infructueuses sur le net, j'ai enfin trouvé quelqu'un pour m'expliquer son fonctionnement.

Jouer avec les liste est assez complexe je trouve. Pour se faciliter la vie, JQuery le fait très bien et je trouve ça assez intuitif.

Fonctionnement menu dynamique CSS

CSS

Vue hybride

Discussions similaires

Partager

Partager