Menu accordéon zend_navigation

**bencoandco** · 26/07/2011, 21h37

Bonjour !

Quelqu'un aurait il un bout de code ou un éxemple qui permettrait de créer un menu vertical avec sous menu en accordéon avec Zend_Navigation ?

Un peu comme ça :

menu1 je clic sur menu2 et hop : menu1
menu2 sous_menu1
menu3 sous_menu2
menu2
menu3

D'autre part y a t il des sites avec des samples/ scripts zf ?

Merci pour votre aide !

**5h4rk** · 26/07/2011, 22h20

as tu déjà un affichage standard de ton menu ?

**bencoandco** · 26/07/2011, 22h27

OUI !

**5h4rk** · 26/07/2011, 22h39

Tu peux nous coller le code html qui est fait ?

**bencoandco** · 26/07/2011, 22h49

Le script que j'utilise produit le code html suivant :

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
 
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Mes albums</title>
<link rel="stylesheet" type="text/css" media="screen"
href="/zf-tutorial/public/css/site.css" />
</head>
<body>
<div id="content">
<h1>Mes albums</h1>
 
<ul class="navigation">
    <li class="active">
        <a href="/zf-tutorial/">Accueil</a>
 
    </li>
    <li>
        <a href="/zf-tutorial/index/modifier">Modifier</a>
    </li>
    <li>
        <a href="/zf-tutorial/index/supprimer">Supprimer</a>
    </li>
</ul><div class="sec-nav-wrap"></div>
 
<link rel="stylesheet" type="text/css" media="screen"
href="/zf-tutorial/public/css/site.css" />
</head>
<body>
<h1>Mes albums</h1>
 
</body>
</html></div>
</body>

Je joint les script que j'utilise sans la lib zned bien sûr !

Je me suis aidé de cette page pour faire mon menu :

Code :

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

<a href="http://wiip.fr/content/ajouter-un-menu-son-site-avec-zend-navigation?page=1" target="_blank">http://wiip.fr/content/ajouter-un-me...igation?page=1</a>

**5h4rk** · 26/07/2011, 23h11

Je te propose un lien un css que j'avais fais il y a un bon moment mais il faudrait que tu adapte la représentation en html si possible, de toute façon je ne pense pas que tu auras le choix pour faire un menu dynamique.

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
#navigation
{
 	width					: 644px;
 	list-style-type			: none;
 	margin					: 0;
 	padding					: 0;
 	border					: 0;
	position				: absolute;
	margin-left				: 15px;
 
}
#navigation li
{
 	float					: left;
	width					: 150px;
 	margin					: 0;
 	padding					: 0;
 	border					: 0;
}
 
#navigation .sousMenu
{
 	list-style-type			: none;
 	margin					: 0;
 	padding					: 0;
 	border					: 0;
	display					: none;
}
#navigation .sousMenu li
{
 	float					: none;
 	margin					: 0;
 	padding					: 0;
 	border					: 0;
	width					: 149px;
 	border-top				: 1px solid transparent;
 	border-right			: 1px solid transparent;
}
 
#navigation li a:link, #menuDeroulant li a:visited
{
 	display					: block;
 	height					: 1%;
 	color					: black !important;
 	background				: #CCCCCC;
 	margin					: 0;
 	padding					: 4px 8px;
 	border-right			: 1px solid #fff;
 	text-decoration			: none;
}
#navigation li a:hover { 
	background-color		: #F2462E;
}
#navigation li a:active { 
	background-color		: #5F879D;
}
 
#navigation .sousMenu li a:link,
#navigation .sousMenu li a:visited
{
 	display					: block;
 	color					: #FFF;
 	margin					: 0;
 	border					: 0;
 	text-decoration			: none;
 	background-color		: #E7EDED;
}
#navigation .sousMenu li a:hover
{
 	background-image		: none;
 	background-color		: #F2462E;
}
 
#navigation li:hover > .sousMenu { 
	display					: block;
}

Pour un menu du style :

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
 
<ul id="navigation">
     <li>
          <a href="#" >Ta catégorie</a>
          <ul class="sousMenu">
               <li>
                    <a href="lien">Lien 1</a>
               </li>
               <li>
                    <a href="lien">Lien 2</a>
               </li>
          </ul>
     </li>
     <li>
          <a href="#" >Ta catégorie 2</a>
          <ul class="sousMenu">
               <li>
                    <a href="lien">Lien 1</a>
               </li>
               <li>
                    <a href="lien">Lien 2</a>
               </li>
          </ul>
     </li>
</ul>

Menu accordéon zend_navigation

Autres composants PHP

Vue hybride

Discussions similaires

Partager

Partager