[Toutes versions] Menu de navigation en haut du forum

[MävenRâleuse (Admin)]

Menu de navigation en haut du forum

Bonjour !

Aujourd'hui je viens te donner un petit libre-service pour un menu de navigation fixe, en haut du forum, qui s'ajoutera à ta barre de navigation.

Pré-requis :
Avoir accès aux templates
Avoir des bases en HTML / CSS

Ici je pars de templates non modifiés, si tu n'arrives pas à adapter à tes templates n'hésite pas à demander de l'aide.

Prends bien les codes qui concernent ta version lorsqu'ils diffèrent et lis bien les différentes "conditions" pour ne pas voir de bug apparaitre

Préparation du menu en HTML

On va d'abord préparer le menu dans une page HTML, qu'on appellera ensuite au bon endroit selon la version.
D'abord, crée une nouvelle page HTML en mode avancé (Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > créer en mode avancé) . Ici on met un titre au choix et on coche les 2 cases à "non".
Puis on colle ceci :

Code:

<div id="menuTop" class="d-flex">
  <div class="d-flex itemFlex">
    Nom menu 1
    <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
  </div>
  <div class="d-flex itemFlex">
    Nom menu 2
    <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
  </div>
  <div class="d-flex itemFlex">
    Nom menu 3
    <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
  </div>
  <div class="d-flex itemFlex">
    Nom menu 4
    <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
  </div>
</div>

Tu peux supprimer/ajouter autant de liens (sous-menu) que tu le souhaites, ils se placeront automatiquement avec la CSS après.
Tu peux également supprimer / ajouter un "menu" en supprimant / collant cette partie :

Code:

<div class="d-flex itemFlex">
    Nom menu 4
    <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
      <a href="#">
        sous-menu
      </a>
  </div>

Pour le moment, ça n'est pas très joli, pas de panique on va faire du beau
On récupère bien l'URL de la page HTML qu'on a une fois la page enregistrée, et ce qui est important c'est ce qu'il y a au niveau du "h". Pour moi : /h6-menu-top.

On appelle notre menu en Javascript

On va le préparer maintenant, même si pour le moment tu ne verras pas la différence. On va se baser sur ce tutoriel de Miettes si tu veux en savoir plus.
Dans les javascript (Panneau d'administration > Modules > HTML & Javascript > Gestion des javascripts) on vérifie que "Activer la gestion des codes Javascript :" est bien à "Oui" (sinon on le bascule et on enregistre) et on crée un nouveau javascript.
On l'applique sur "toutes les pages" et on colle ceci :

Code:

$(document).ready(function(){
  $('#mvn-menuTop').load('/h6-menu-top');
});

Attention, de mon coté c'est /h6-menu-top mais il faut remplacer par ce que tu as toi.

Puis tu enregistres.

Modification de templates

On va ensuite préparer notre emplacement dans le template, pour y voir apparaitre notre menu. Pour cela, on va dans Affichage > Templates > Général > Overall_header.
Et selon la version on va placer ce code :

Code:

<div id="mvn-menuTop">
</div>

PhpBB2 & ModernBB

Juste après :

Code:

{JAVASCRIPT}

On enregistre et on oublie pas de publier le template.

PhpBB3 & Invision

juste après :

Code:

<!-- END switch_login_popup -->

On enregistre et on oublie pas de publier le template.

PunBB

juste après :

Code:

<a id="top" name="top" accesskey="t"></a>

On enregistre et on oublie pas de publier le template.

AwesomeBB

Juste avant :

Code:

<div id="header-banner">

On enregistre et on oublie pas de publier le template.

De la CSS pour la mise en forme

Pour le moment, ça ne ressemble pas à grand chose... Mettons un peu de CSS pour arranger tout ça !
Ici on va voir plusieurs cas :

Si la toolbar est activée

Si la toolbar est fixe

Si la toolbar du forum est "fixe" (Modules > Toolbar > Configuration : Fixer la toolbar : Oui) alors on va faire pour que notre menu soit fixe aussi et reste sous la toolbar.
On va donc appliquer cette CSS (A mettre dans Affichage > couleurs > Feuille de style CSS), pour les versions PhpBB2, phpBB3, PunBB et Invision :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index:10;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

Si la toolbar n'est pas fixe

Si la toolbar du forum n'est pas en mode "fixe" (Modules > Toolbar > Configuration : Fixer la toolbar : Non) alors on va faire pour que notre menu suive la toolbar et ne soit pas fixe non plus.
On va donc appliquer cette CSS (A mettre dans Affichage > couleurs > Feuille de style CSS), pour les versions PhpBB2, phpBB3, PunBB et Invision :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.d-flex{
 display:flex;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

Exceptions pour ModernBB

- Si le "sticky" est retiré : ici, je parle si ce tutoriel a été suivi, on applique cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index:10;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

- Si le "sticky" est actif (donc si ce tutoriel n'a pas été suivi ): là on va avoir la barre de navigation qui va "monter" sur le menu. On va donc devoir adapter notre style pour placer notre menu entre la toolbar et la barre de navigation.
On va donc appliquer cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.is-sticky#headerbar-top.w-toolbar {
    top: 92px;
}
.is-sticky#headerbar-top {
    z-index: 999 !important;
}

.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index: 999;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

Si la toolbar n'est pas activée

Si la toolbar n'est pas activée, on va encore distinguer 2 cas (oui oui, encore....).

Si on veut que le menu ne soit pas fixe

Pour les versions phpBB2, phpBB3, PunBB et Invision on va appliquer cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
body{
margin:0;padding:0;
}
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

Si on veut que le menu soit fixe en haut et reste accessible même si on scrolle

Pour les versions phpBB2, phpBB3, PunBB et Invision on va appliquer cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
body{
margin:0;padding:0;
}
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index: 10;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

Exceptions pour ModernBB

- Si le "sticky" est retiré : ici, je parle si ce tutoriel a été suivi, on applique cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
body{
margin:0;padding:0;
}
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index: 10;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

- Si le "sticky" est actif (donc si ce tutoriel n'a pas été suivi ): là on va avoir la barre de navigation qui va "monter" sur le menu. On va donc devoir adapter notre style pour placer notre menu entre la toolbar et la barre de navigation.
On va donc appliquer cette CSS :

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.is-sticky#headerbar-top {
    z-index: 999 !important;
}
.is-sticky#headerbar-top{
    top:50px;
}
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index: 999;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

AwesomeBB

AwesomeBB nous fait toujours faire pleins d'adaptations Ici pas de question de toolbar ou non, la CSS à appliquer est celle-ci (le menu restera fixe )

Code:

/***************** MENU DE NAVIGATION TOP ********************/
/* --------------------------------------------------------
--------- paramétrage du menu de navigation  ---------
------------------------------------------------------- */
.d-flex{
 display:flex;
}
#mvn-menuTop{
  height:50px;
  margin-top:64px;
}
#header-banner{
  margin:0;
}
#menuTop {
 background-color: #4D4D4D;
 height: 50px;
 justify-content: space-around;
 width: 100%;
 align-items: flex-start; 
 position:fixed;
 z-index:900;
}
/* --------------------------------------------------------
--------- paramétrage de chaque boutons  ---------
------------------------------------------------------- */
#menuTop > div {
 width: 100%;
 text-align: center;
 font-size:20px;
 color:#EAD5B8;
 line-height:50px;
 cursor:pointer;
}
.itemFlex{
 flex-direction:column;
 background-color: #4D4D4D;
 z-index:2;
}
/* --------------------------------------------------------
--------- paramétrage des liens et liens au survol  ---------
------------------------------------------------------- */
#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

/***************** FIN DU MENU DE NAVIGATION TOP ********************/

---

C'est terminé pour ce petit LS !
Comme tu peux le voir, il y a beaucoup de possibilités de réglage... Si j'en ai oublié ou si tu ne sais pas dans quelle catégorie tu es et donc quel code tu dois prendre, n'hésite pas une seule seconde à demander
Bien entendu, toutes les couleurs etc sont modifiables : que ça soit les block au passage de la souris ou autre. N'hésite pas à demander si tu as un souci de personnalisation

[Aethon]

Coucou c'est remoi ^^

J'ai envi d'utiliser cette méthode pour ma pa, je trouve cela pratique pour afficher des liens utiles sans en avoir une longue liste comme on peut le voir.

Pour l'installation, aucun problème.

Par contre, j'aurais voulu savoir comment rendre l'apparition de la liste moins abrupte mais plus dans une apparition progressive ?

[MävenRâleuse (Admin)]

Hello !

Il suffit d'utiliser un peu de CSS : tu peux te servir de ce tutoriel sur les transitions au passage de la souris.

Sur ce code par exemple, tu peux mettre une transition-duration à ces endroits là :

Code:

#menuTop div > a{
 display:none;
}
#menuTitre a{
 font-size:25px;
 display:block !important;
 color:#EAD5B8;
}
#menuTitre:hover a{
 font-size:25px !important;
}
#menuTop div:hover > a{
 display:block;
 color:#EAD5B8;
 font-size:20px;
}

selon ce que tu veux

[Aethon]

Coucou,

Je testerais ça merci

[Contenu sponsorisé]