Faire un sous menu sur un bouton menu
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Faire un sous menu sur un bouton menu
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
Re: Faire un sous menu sur un bouton menu
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).
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 :
Est-ce que cela vous convient ?
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');
});
});
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;
}
Est-ce que cela vous convient ?
Donnez un titre explicite à votre sujet pour améliorer son référencement Remerciez le message qui vous a aidé pour le mettre en évidence Cochez lorsque votre problème est résolu pour faciliter le travail des modérateurs L'aide par MP n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre |
Re: Faire un sous menu sur un bouton menu
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 ?
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 ?
Re: Faire un sous menu sur un bouton menu
Vous avez bien compris, c'est plus ou moins ce qui définit les deux types de langage !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 ?
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 :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.
- 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>
Donnez un titre explicite à votre sujet pour améliorer son référencement Remerciez le message qui vous a aidé pour le mettre en évidence Cochez lorsque votre problème est résolu pour faciliter le travail des modérateurs L'aide par MP n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre |
Re: Faire un sous menu sur un bouton menu
Merci beaucoup !
Sujets similaires
» Faire disparaître le bouton Flash de la barre de menu de l'éditeur de message
» comment faire une insertion d'image dans le menu des divers sous forums
» Modification de nom d'un bouton du menu
» Comment faire ce menu svp
» Faire une catégorie "Menu"
» comment faire une insertion d'image dans le menu des divers sous forums
» Modification de nom d'un bouton du menu
» Comment faire ce menu svp
» Faire une catégorie "Menu"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum