Ajout d'un bouton contact dans un menu

**herveD** · 05/11/2024, 11h54

Bonjour
Je cherche fréquemment à mettre en valeur un bouton contact dans le menu principal sachant qu'il est déjà bien rempli, doit être responsive mais je suis contraint par le code HTM généré par une extension du joomla.
J'avai déjà galéré pour avoir le résultat bancal que l'on voit sur la page https://www.altius.fr/fr/
Ajout du bouton "Contact" (écrit en blanc sur fond fuchsia) dans le menu d'Altius, après "groupe Altius"

J'ai 3 propositions graphiques (cf image) mais je pense que le 2 serait mieux ? Comment faire ?

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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
Groupe Altius                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
<!--menu link ends--><div style="width: 250px; max-width: 1376px; left: -63.483px; top: 69.7834px; display: none;" class="megamenu-container nav-submenu-container nav-item-level-1"><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-523 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/nous-connaitre.html" title="Nous connaître" class=" nav-link-item-id-523 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nous connaître                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-584 nav-item-level-2 nav-item-deeper nav-item-parent nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations.html" title="Nos implantations" class=" nav-link-item-id-584 megamenu-item-link item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos implantations                                    <i class="fas fa-chevron-right nav-item-caret"></i>
         </span>
   </a>
<!--menu link ends--><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-517 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations/altius-sud-ouest.html" title="Altius Sud Ouest" class=" nav-link-item-id-517 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Altius Sud Ouest                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-618 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/implantations/altius-bourgogne-franche-comte.html" title="Altius Bourgogne Franche-Comté" class=" nav-link-item-id-618 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Altius Bourgogne Franche-Comté                              </span>
   </a>
<!--menu link ends--></li></ul></li><li data-position="right" class="nav-item-submenu nav-item-id-540 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rse.html" title="Nos engagements RSE" class=" nav-link-item-id-540 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos engagements RSE                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-436 nav-item-level-2 nav-item-deeper nav-item-parent nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous.html" title="Recrutement" class=" nav-link-item-id-436 megamenu-item-link item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nos offres d'emploi                                    <i class="fas fa-chevron-right nav-item-caret"></i>
         </span>
   </a>
<!--menu link ends--><ul class="nav-submenu"><li data-position="right" class="nav-item-submenu nav-item-id-624 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/chef-chantier-cordiste.html" title="Offre d'emploi : chef(fe) de chantier cordiste" class=" nav-link-item-id-624 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chef(fe) de chantier cordiste                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-623 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-affaires.html" title="Offre d'emploi : chargé(e) d'affaires travaux en hauteur" class=" nav-link-item-id-623 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) d'affaires                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-622 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/ingenieur-be.html" title="Offre d'emploi : ingénieur(e) Bureau d'Études" class=" nav-link-item-id-622 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Ingénieur(e) Bureau d'Études                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-625 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-etude-chiffrage.html" title="Offre d'emploi : économiste de la construction – chargé(e) d’étude chiffrage" class=" nav-link-item-id-625 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) d’étude chiffrage                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-626 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/formateur-travaux-hauteur.html" title="Offre d'emploi : formateur(trice) travaux en hauteur" class=" nav-link-item-id-626 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Formateur(trice)                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-627 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/charge-webmarketing-rse.html" title="Offre d'emploi : chargé(e) de webmarketing et RSE" class=" nav-link-item-id-627 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Chargé(e) de webmarketing et RSE                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-628 nav-item-level-3"><!--menu link starts-->
<a href="/fr/le-groupe-altius/rejoignez-nous/commercial-travaux-hauteur.html" title="Offre d'emploi : commercial(e) EPI - travaux en hauteur" class=" nav-link-item-id-628 item-link-component item-level-3" data-drop-action="hover">
   <span class="nav-title">
                                          Commercial(e) EPI - Plucéo                              </span>
   </a>
<!--menu link ends--></li></ul></li><li data-position="right" class="nav-item-submenu nav-item-id-164 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/actualites.html" title="Actus d'Altius et sur le travail en hauteur" class=" nav-link-item-id-164 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Actualités                              </span>
   </a>
<!--menu link ends--></li><li data-position="right" class="nav-item-submenu nav-item-id-166 nav-item-level-2"><!--menu link starts-->
<a href="/fr/le-groupe-altius/contact.html" title="Nous contacter" class=" nav-link-item-id-166 item-link-component item-level-2" data-drop-action="hover">
   <span class="nav-title">
                                          Nous contacter                              </span>
   </a>
<!--menu link ends--></li></ul></div></li></ul></div>      </div>
               <div></div>
                           <div class="header-right-section d-flex justify-content-end">
                                       <div class="header-right-block d-none d-lg-block align-self-center ms-4">
                  <div class="header-block-item d-flex justify-content-end align-items-center"><div class="langues-position moduletable ">
        <div class="mod-languages">
    <p class="visually-hidden" id="language_picker_des_87">Sélectionnez votre langue</p>
 
 
    <ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">
 
                                            <li class="lang-active">
                <a aria-current="true" href="https://www.altius.fr/fr/">
                                                                        <img title="Français" src="/media/mod_languages/images/fr_fr.gif" alt="Français">                                                            </a>
            </li>
                                        <li>
                <a href="/en/">
                                                                        <img title="English (UK)" src="/media/mod_languages/images/en.gif" alt="English (UK)">                                                            </a>
            </li>
                </ul>
 
    <div class="mod-languages__posttext posttext"><p><a href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse">

Nom : image.png
Affichages : 71
Taille : 116,0 Ko

**NoSmoking** · 06/11/2024, 12h09

Bonjour,
il faudrait commencer par avoir une structure cohérente, ce qui n'est pas le cas de ce que tu présentes !
Par exemple :

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
<div class="mod-languages">
  <p class="visually-hidden" id="language_picker_des_87">Sélectionnez votre langue</p>
  <ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">
    <li class="lang-active">
      <a aria-current="true" href="https://www.altius.fr/fr/">
        <img title="Français" src="/media/mod_languages/images/fr_fr.gif" alt="Français">
      </a>
    </li>
    <li>
      <a href="/en/">
        <img title="English (UK)" src="/media/mod_languages/images/en.gif" alt="English (UK)">
      </a>
    </li>
    <li>
      <a href="http://altius-leman.ch/">
        <img src="/images/suisse_flag.png" alt="Drapeau Suisse">
      </a>
    </li>
  </ul>
</div>

J'ai 3 propositions graphiques (cf image) mais je pense que le 2 serait mieux ?

sauf si d'autres langues viennent se rajouter !

PS :

... doit être responsive mais je suis contraint par le code HTM généré par une extension du joomla.

Bizarre, je viens de voir que sur la version Suisse la structure ressemble à celle que je viens de mettre ci-dessus

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="moduletable">
  <div class="mod-languages">
    <ul class="lang-inline">
      <li class="francais-flag"><a href="http://www.altius.fr/fr/"><img src="/images/francais_flag.gif" alt="Drapeau Français"></a></li>
      <li class="anglais-flag"><a href="http://www.altius.fr/en/"><img src="/images/english_flag.gif" alt="Drapeau Anglais"></a></li>
      <li class="suisse-flag"><a href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse"></a></li>
    </ul>
  </div>
</div>

**herveD** · 06/11/2024, 17h11

Bonjour

Ce que j'expliquais et je comprends que cela complexifie la modification c'est que le code HTML et css est en général généré par le cms joomla et le template choisi.
De plus effectivement le site suisse est un autre site (lien externe) vs de ce site en 2 langues, ce qui m'a obligé de bidouiller un module pour essayer de mettre l'icone suisse à peu près comme les autres.

Du coup à la remarque & réflexion il serait effectivement préférable de mettre un select sur les icones avec le bon lien !

J'essai de reproduire cela sur codepen mais je n'arrive pas à partager le lien car je ne peux pas travailler sur le site de production et si je pouvais éviter de faire un double du site, ce serait ... bien :-)

J'ai modifié le code HTML pour stimuler l'ajout du bouton contact en éléguant ce qui ne devrait pas intervenir !?

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
 
<li data-position="right" class="nav-item nav-item-id-165 nav-item-level-1 nav-item-current nav-item-active nav-item-deeper nav-item-parent has-megamenu nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius.html" title="Qui sommes nous ?" class=" nav-link-item-id-165 nav-link active megamenu-item-link item-link-component item-level-1" data-drop-action="hover">
   <span class="nav-title">
                                          Groupe Altius                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
 
 
<li data-position="right" class="nav-item nav-item-id-165 nav-item-level-1 nav-item-current nav-item-active nav-item-deeper nav-item-parent has-megamenu nav-item-dropdown"><!--menu link starts-->
<a href="/fr/le-groupe-altius.html" title="Qui sommes nous ?" class=" nav-link-item-id-165 nav-link active megamenu-item-link item-link-component item-level-1" data-drop-action="hover">
   <span class="nav-title">
                                          CONTACT                                                <i class="fas fa-chevron-down nav-item-caret"></i>
                  </span>
   </a>
 
        <div class="mod-languages">
    <p class="visually-hidden" id="language_picker_des_87">Sélectionnez votre langue</p>
 
 
    <ul aria-labelledby="language_picker_des_87" class="mod-languages__list lang-inline">
 
                                            <li class="lang-active">
                <a aria-current="true" href="https://www.altius.fr/fr/le-groupe-altius.html">
                                                                        <img title="Français" src="/media/mod_languages/images/fr_fr.gif" alt="Français">                                                            </a>
            </li>
                                        <li>
                <a href="/en/">
                                                                        <img title="English (UK)" src="/media/mod_languages/images/en.gif" alt="English (UK)">                                                            </a>
            </li>
                </ul>
 
    <div class="mod-languages__posttext posttext"><p><a href="http://altius-leman.ch/"><img src="/images/suisse_flag.png" alt="Drapeau Suisse"></a></p></div>
</div>
</div></div>

**NoSmoking** · 07/11/2024, 17h38

Ce que j'expliquais et je comprends que cela complexifie la modification c'est que le code HTML et css est en général généré par le cms joomla et le template choisi.

Il n'empêche que le code généré ne correspond pas à un schéma fonctionnel. Si tu insères correctement deux liens pourquoi n'y parviens tu pas pour trois ?

Du coup à la remarque & réflexion il serait effectivement préférable de mettre un select sur les icones avec le bon lien !

Tu peux également te tourner vers un élément <details>.

Il te faudra, quoiqu'il arrive, que tu mettes en place la structure suivante, ou quelque chose du style :

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
<details>
  <summary>Langues</summary>
  <div class="liste">
    <a href="https://..." title="Français">
      <img src="flag/fr.png">
    </a>
    <a href="https://..." title="English (UK)">
      <img src="flag/en.png">
    </a>
    <a href="https://..." title="Suisse">
      <img src="flag/ch.png">
    </a>
  </div>
</details>

**herveD** · 08/11/2024, 14h38

Bonjour
Merci pour ce retour. Je vais reprendre ce dossier la semaine prochaine en essayant peut-être quelque chose

**herveD** · 21/11/2024, 18h36

Bonjour
Bon j'ai repris ce dossier et je cherche tjs activement une réponse pour l'aspect multilangue mais j'essaie de modifier la structure pour faciliter cela

En attendant vu mon retard, je me demande s'il existe des tips, bibliothèque pour faire des choses comme l'encadre d'un bouton CONTACT dans le menu principal :
https://j4tmp.88h.ovh/index.php?opti...=fr&Itemid=483
comme le montre l'image

Nom : menu avec btn contact uniquement.png
Affichages : 9
Taille : 3,1 Ko

j'ai mis un identifiant dans le cms pour accéder à cet élément mais je peux le mettre ailleurs si besoin

Ajout d'un bouton contact dans un menu

CSS

Discussions similaires

Partager

Partager