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>

26/07/2011, 21h37	#1
bencoandco Invité de passage benco andco Développeur php/mysql/jquery/javascript/ajax/css/flash Inscription : mai 2010 Messages : 4 Détails du profil Informations personnelles : Nom : benco andco Informations professionnelles : Activité : Développeur php/mysql/jquery/javascript/ajax/css/flash Informations forums : Inscription : mai 2010 Messages : 4 Points : 0 Points : 0	Menu accordéon zend_navigation 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 !
	00

26/07/2011, 22h20	#2
5h4rk Modérateur Loïc Développeur Web Inscription : février 2011 Messages : 678 Détails du profil Informations personnelles : Nom : Loïc Âge : 26 Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 678 Points : 1 041 Points : 1 041	as tu déjà un affichage standard de ton menu ?
	00

26/07/2011, 22h27	#3
bencoandco Invité de passage benco andco Développeur php/mysql/jquery/javascript/ajax/css/flash Inscription : mai 2010 Messages : 4 Détails du profil Informations personnelles : Nom : benco andco Informations professionnelles : Activité : Développeur php/mysql/jquery/javascript/ajax/css/flash Informations forums : Inscription : mai 2010 Messages : 4 Points : 0 Points : 0	OUI !
	00

26/07/2011, 22h39	#4
5h4rk Modérateur Loïc Développeur Web Inscription : février 2011 Messages : 678 Détails du profil Informations personnelles : Nom : Loïc Âge : 26 Localisation : France, Hérault (Languedoc Roussillon) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : février 2011 Messages : 678 Points : 1 041 Points : 1 041	Tu peux nous coller le code html qui est fait ?
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email