Faire un sous menu sur un bouton menu

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Faire un sous menu sur un bouton menu

Message par Verlinovation Mar 26 Juil 2022 - 13:43

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 ?


Dernière édition par Verlinovation le Mer 27 Juil 2022 - 19:09, édité 1 fois
Verlinovation

Verlinovation
*

Messages : 34
Inscrit(e) le : 14/06/2022

Voir le profil de l'utilisateur https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire un sous menu sur un bouton menu

Message par Oka.mi Mar 26 Juil 2022 - 14:55

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 ?


Faire un sous menu sur un bouton menu 1213Donnez un titre explicite Faire un sous menu sur un bouton menu VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Faire un sous menu sur un bouton menu 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Faire un sous menu sur un bouton menu FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un sous menu sur un bouton menu

Message par Verlinovation Mar 26 Juil 2022 - 15:34

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 ?
Verlinovation

Verlinovation
*

Messages : 34
Inscrit(e) le : 14/06/2022

Voir le profil de l'utilisateur https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Faire un sous menu sur un bouton menu

Message par Oka.mi Mar 26 Juil 2022 - 22:48

Verlinovation a écrit: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 !

Verlinovation a écrit: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).

Verlinovation a écrit: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é.


Faire un sous menu sur un bouton menu 1213Donnez un titre explicite Faire un sous menu sur un bouton menu VTzsyWB à votre sujet pour améliorer son référencement

Remerciez Faire un sous menu sur un bouton menu 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP Faire un sous menu sur un bouton menu FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire un sous menu sur un bouton menu

Message par Verlinovation Mer 27 Juil 2022 - 19:09

Merci beaucoup !
Verlinovation

Verlinovation
*

Messages : 34
Inscrit(e) le : 14/06/2022

Voir le profil de l'utilisateur https://blendertribu.forumactif.com
Verlinovation a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum