source: spip-zone/_squelettes_/escal/trunk/inclusions/inc-menu2eniveauartH2.html @ 112840

Last change on this file since 112840 was 112840, checked in by root, 2 months ago

EscalV4 : proposition d'un 2e menu horizontal style "méga menu" full CSS

File size: 12.5 KB
Line 
1[(#REM) source : https://designmodo.com/create-css3-mega-menu/]
2
3<div class="menudesktop">
4<nav class="menu">
5<ul class="nav">
6
7        <li class="item-accueil">
8         <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_SITE_SPIP|parametre_url{lang,#ENV{lang}})],#URL_SITE_SPIP})]" title="<:escal:accueil:>">
9    [(#CONFIG{escal/config/logoaccueil}|=={oui}|oui)
10    [(#CHEMIN{images/accueil2.png}|balise_img{accueil,spip_logos}|image_reduire{0,#GET{taillelogo}})]
11    ]
12    [(#CONFIG{escal/config/texteaccueil}|=={non}|non)<:escal:accueil:>
13    ]
14    </a>
15        </li>
16
17        <!-- exclusion des rubriques avec le mot-clé "pas-au-menu" ou "invisible" et de ses sous-rubriques -->
18        <BOUCLE_exclure_rub_menu(RUBRIQUES){titre_mot IN 'pas-au-menu', 'invisible'}{doublons rubriques}>
19        <BOUCLE_exclure_ssrub_menu(RUBRIQUES){id_parent}{doublons rubriques}></BOUCLE_exclure_ssrub_menu>
20        </BOUCLE_exclure_rub_menu>
21
22        <!-- exclusion des articles avec le mot-clé "pas-au-menu" ou "invisible"  -->
23        <BOUCLE_exclure_art_menu(ARTICLES){titre_mot IN 'pas-au-menu', 'invisible'}{doublons articles}>
24        </BOUCLE_exclure_art_menu>
25
26
27 <!-- affichage des secteurs-->
28    <BOUCLE_secteur(RUBRIQUES){profondeur=1}{lang}{par num titre}{doublons rubriques}>
29     <li class="#EXPOSE rubrique secteur">
30     <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>
31     [(#CONFIG{escal/config/logorubmenu}|=={oui}|oui)
32     [(#LOGO_RUBRIQUE|oui)[(#LOGO_RUBRIQUE|extraire_attribut{src}|balise_img{logo rubrique,spip_logos}|image_reduire{0,#GET{taillelogo}})]]
33     [(#LOGO_RUBRIQUE|non)[(#CHEMIN{images/transparent2.png}|balise_img{transparent,spip_logos menutransparent}|image_reduire{0,20})] ]
34     ]
35     [(#CONFIG{escal/config/texterubmenu}|=={non}|non)
36     #TITRE
37     ]
38     <BOUCLE_testrub1(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-bas.png}" alt="fleche" /></BOUCLE_testrub1>
39     </a>
40<div>
41<div class="nav-column">
42    <ul>
43       <!-- affichage des articles du secteur -->
44      <BOUCLE_testchrono(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
45      <BOUCLE_articles_racineC(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
46        <li class="#EXPOSE article">
47         <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
48        </li>
49      </BOUCLE_articles_racineC>
50      </BOUCLE_testchrono>
51      <BOUCLE_articles_racine(ARTICLES){si #CONFIG{escal/config/articlesmenuH}|=={oui}|oui}{id_rubrique} {par num titre, titre}{doublons articles}>
52        <li class="#EXPOSE article">
53         <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
54        </li>
55      </BOUCLE_articles_racine>
56      <//B_testchrono>
57
58      <!-- affichage des sous-rubriques de niveau 1 -->
59                        <BOUCLE_rubriques1(RUBRIQUES){id_parent}{par num titre, titre}{doublons rubriques}>
60        <li class="#EXPOSE rubrique">
61                                  <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[<h3>(#TITRE)</h3>]
62                                                <BOUCLE_testrub2(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-droite.png}" alt="fleche" /></BOUCLE_testrub2>
63                            </a>
64
65        <ul>
66              <!-- affichage des articles des sous-rubriques de niveau 1 -->
67              <BOUCLE_testchrono1(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
68              <BOUCLE_articles_rubrique1C(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
69                <li class="#EXPOSE article">
70                  <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
71                </li>
72              </BOUCLE_articles_rubrique1C>
73              </BOUCLE_testchrono1>
74              <BOUCLE_articles_rubrique1(ARTICLES){id_rubrique} {par num titre, titre}{doublons articles}>
75                <li class="#EXPOSE article">
76                  <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
77                </li>
78              </BOUCLE_articles_rubrique1>
79              <//B_testchrono1>
80
81              <!-- affichage des sous-rubriques de niveau 2 -->
82              <BOUCLE_rubriques2(RUBRIQUES){id_parent}{par num titre, titre}{doublons rubriques}>
83                <li class="#EXPOSE rubrique">
84                                  <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE)]
85                                                <BOUCLE_testrub3(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-droite.png}" alt="fleche" /></BOUCLE_testrub3>
86                            </a>
87
88                                      <ul>
89                      <!-- affichage des articles des sous-rubriques de niveau 2 -->
90                      <BOUCLE_testchrono2(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
91                      <BOUCLE_articles_rubrique2C(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
92                        <li class="#EXPOSE article">
93                          <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
94                        </li>
95                      </BOUCLE_articles_rubrique2C>
96                      </BOUCLE_testchrono2>
97                      <BOUCLE_articles_rubrique2(ARTICLES){id_rubrique} {par num titre, titre}{doublons articles}>
98                        <li class="#EXPOSE article">
99                          <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
100                        </li>
101                      </BOUCLE_articles_rubrique2>
102                      <//B_testchrono2>
103
104                      <!-- affichage des sous-rubriques de niveau 3 -->
105                      <BOUCLE_rubriques3(RUBRIQUES){id_parent}{par num titre, titre}{doublons rubriques}>
106                      <li class="#EXPOSE rubrique">
107                                          <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE)]
108                                                        <BOUCLE_testrub4(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-droite.png}" alt="fleche" /></BOUCLE_testrub4>
109                                    </a>
110
111                                            <ul>
112                            <!-- affichage des articles des sous-rubriques de niveau 3 -->
113                            <BOUCLE_testchrono3(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
114                            <BOUCLE_articles_rubrique3C(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
115                              <li class="#EXPOSE article">
116                                <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
117                            </li>
118                            </BOUCLE_articles_rubrique3C>
119                            </BOUCLE_testchrono3>
120                            <BOUCLE_articles_rubrique3(ARTICLES){id_rubrique} {par num titre, titre}{doublons articles}>
121                              <li class="#EXPOSE article">
122                                <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
123                            </li>
124                            </BOUCLE_articles_rubrique3>
125                            <//B_testchrono3>
126
127                            <!-- affichage des sous-rubriques de niveau 4 -->
128                            <BOUCLE_rubriques4(RUBRIQUES){id_parent}{par num titre, titre}{doublons rubriques}>
129                            <li class="#EXPOSE rubrique">
130                                                  <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE)]
131                                                                <BOUCLE_testrub5(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-droite.png}" alt="fleche" /></BOUCLE_testrub5>
132                                            </a>
133
134                                                    <ul>
135                                  <!-- affichage des articles des sous-rubriques de niveau 4 -->
136                                  <BOUCLE_testchrono4(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
137                                  <BOUCLE_articles_rubrique4C(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
138                                    <li class="#EXPOSE article">
139                                      <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
140                                    </li>
141                                  </BOUCLE_articles_rubrique4C>
142                                  </BOUCLE_testchrono4>
143                                  <BOUCLE_articles_rubrique4(ARTICLES){id_rubrique} {par num titre, titre}{doublons articles}>
144                                    <li class="#EXPOSE article">
145                                      <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
146                                    </li>
147                                  </BOUCLE_articles_rubrique4>
148                                  <//B_testchrono4>
149
150                                  <!-- affichage des sous-rubriques de niveau 5 -->
151                                  <BOUCLE_rubriques5(RUBRIQUES){id_parent}{par num titre, titre}{doublons rubriques}>
152                                  <li class="#EXPOSE rubrique">
153                                                          <a href="<INCLURE{fond=inclusions/inc-triurlrubrique}{id_rubrique}{env}>"[ class="(#EXPOSE)"] [title="(#DESCRIPTIF|textebrut|entites_html)"]>[(#TITRE)]
154                                                                        <BOUCLE_testrub6(RUBRIQUES){id_parent}{0,1}><img class="menufleche" src="#CHEMIN{images/deplier-droite.png}" alt="fleche" /></BOUCLE_testrub6>
155                                                    </a>
156
157                                                            <ul>
158                                        <!-- affichage des articles des sous-rubriques de niveau 5 -->
159                                        <BOUCLE_testchrono5(RUBRIQUES){id_rubrique}{titre_mot=chrono}>
160                                        <BOUCLE_articles_rubrique5C(ARTICLES){id_rubrique} {par date}{inverse}{doublons articles}>
161                                          <li class="#EXPOSE article">
162                                            <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
163                                          </li>
164                                        </BOUCLE_articles_rubrique5C>
165                                        </BOUCLE_testchrono5>
166                                        <BOUCLE_articles_rubrique5(ARTICLES){id_rubrique} {par num titre, titre}{doublons articles}>
167                                          <li class="#EXPOSE article">
168                                            <a href="[(#CONFIG{gerer_trad}=={oui}|?{[(#URL_ARTICLE|parametre_url{lang,#ENV{lang}})],#URL_ARTICLE})]" title="[(#DESCRIPTIF|textebrut|entites_html)]">[(#TITRE)]</a>
169                                          </li>
170                                        </BOUCLE_articles_rubrique5>
171                                        <//B_testchrono5>
172                                                                  </ul>
173
174                                  </li>
175                                 </BOUCLE_rubriques5>
176                                                    </ul>
177
178                            </li>
179                           </BOUCLE_rubriques4>
180                                            </ul>
181
182                                  </li>
183                                </BOUCLE_rubriques3>
184                                </ul>
185              </li>
186             </BOUCLE_rubriques2>
187                                    </ul>
188
189                          </li>
190                        </BOUCLE_rubriques1>
191    </ul>
192</div>
193</div>
194     </li>
195        </BOUCLE_secteur>
196</ul><!-- fin menu -->
197</nav>
198</div>
Note: See TracBrowser for help on using the repository browser.