Faire un sous menu sur un bouton menu

[Verlinovation]

Détails techniques

Version du forum : ModernBB
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 26-07-2022
Lien du forum : https://btexp.forumactif.com/forum

Description du problème

Bonjour,

Dans un bouton personnalisé du menu, j'aimerai, quand je clique dessus, que d'autre boutons apparaissent soit en liste, soit autrement (peu importe) afin d'accéder plus efficacement à une section du forum désirée.

Sait-on me dire si c'est possible et comment réalise-t-on cela ?

[Oka.mi]

Bonjour,

On peut ajouter le bouton personnalisé en question via JavaScript et ajouter l'affichage de la bulle de liens en cas de clic (cocher sur toutes les pages).

Code:

$(function () {
  $('.mainmenu[href="/forum"]').after('<span id="lienperso">Test</span>');
  $('#lienperso').after('
<div id="infobulle">
  <ul>
      <li><a href="/u1">Lien 1</a></li>
      <li><a href="/u2">Lien 2</a></li>
  </ul>
</div>
  ');

  $("#infobulle").hide();
  $(document).click(function () {
      $("#infobulle").hide();
  });

  $("#lienperso").click(function (e) {
      e.stopPropagation();
      $('#infobulle').css('display', 'inline-block');
  });
});

Comme je ne sais pas où vous voulez placer votre bouton, j'ai ciblé le lien "forum" de votre menu (.mainmenu[href="/forum"]), mais vous pouvez personnaliser ça en modifiant ce passage. On place juste après le lien "forum" le bouton personnalisé "Test" qu'on englobe dans un span avec pour nom "lienperso" pour pouvoir le cibler plus facilement.
On cible donc l'élément "lienperso" et on installe après lui un élément "infobulle" contenant les différents liens que vous souhaitez ajouter.
Ensuite on cache l'infobulle, que ce soit par défaut ou suite à un clic quelque part sur la page autre que sur votre bouton nommé "lienperso", et on dit que si on clique sur votre bouton, l'infobulle s'affiche.

Pour le reste ce sera donc du css :

Code:

#lienperso {
color: #FFF;
font-size: 1.3rem;
padding: 6px;
display: inline-block;
}

#infobulle {
  position: absolute;
  top: 50px;
  background: #333;
}

#infobulle li {
  margin: 0;
  display: block;
}

On donne notamment à "lienperso" les mêmes propriétés que les autres liens de la barre de navigation afin qu'il n'apparaisse pas comme un intrus.

Est-ce que cela vous convient ?

[Verlinovation]

Bonjour,

L'infobulle, c'est parfait. Par contre, pourquoi "Test" (que j'ai renommé "navigateur forum") n'est pas mis en évidence comme les autres boutons du menu ? Ceux de l'infobulle fonctionnent bien.

Que dois-je rajouter pour avoir une mini-icone à gauche de ce bouton, vu qu'il a été ajouté par code ?

Donc, si je comprends bien, la partie HTML c'est la structure du bouton et le CSS c'est pour la partie esthétique ?

[Oka.mi]

Donc, si je comprends bien, la partie HTML c'est la structure du bouton et le CSS c'est pour la partie esthétique ?

Vous avez bien compris, c'est plus ou moins ce qui définit les deux types de langage !

Par contre, pourquoi "Test" (que j'ai renommé "navigateur forum") n'est pas mis en évidence comme les autres boutons du menu ? Ceux de l'infobulle fonctionnent bien.

Ceux de l'infobulle ne possèdent pas de class ou d'id particulier, c'est pourquoi on leur attribue par défaut les propriétés de tous les liens présents dans le navbar (class de la barre de navigation), défini dans le css de base lorsque vous installez la version ModernBB :

Code:

.navbar a {
  color: #FFF;
  font-size: 1.3rem;
  padding: 6px;
  display: inline-block;
  border-radius: 3px;
  line-height: 1.3846;
}

.navbar a:hover {
  background-color: #FFF;
  color: #000;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

Du coup, pour obtenir le même effet sur le bouton ajouté, vous pouvez ajouter ceci à votre CSS personnalisé :

Code:

#lienperso:hover {
  background-color: #FFF;
  color: #000;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  border-radius: 3px;
}

On récupère les propriétés des autres liens du navbar pour les mettre sur votre bouton personnalisé au survol de la souris (:hover).

Que dois-je rajouter pour avoir une mini-icone à gauche de ce bouton, vu qu'il a été ajouté par code ?

Dans le script, juste avant votre texte "navigateur forum" (donc après <span id="lienperso">), ajoutez

Code:

<i class="ion-android-add-circle"></i>

Modifiez ion-android-add-circle par la class souhaitée (vous pouvez trouver les class ici https://ionic.io/ionicons/v2/cheatsheet.html ) et le tour est joué.

[Verlinovation]

Merci beaucoup !