Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
-46%
Le deal à ne pas rater :
Montre connectée HONOR Band 5 Sport
14.44 € 26.99 €
Voir le deal

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

[Toutes versions] Menu de navigation en haut du forum Empty [Toutes versions] Menu de navigation en haut du forum

le Mer 6 Mai 2020 - 16:49

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.

[Toutes versions] Menu de navigation en haut du forum Rendu13

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

Idea 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 Wink

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 Wink
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');
});

Exclamation 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 Wink ): 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 Wink ): 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 Wink Ici pas de question de toolbar ou non, la CSS à appliquer est celle-ci (le menu restera fixe Wink )
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 Wink
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 Smile


_________________
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Post-It des Râleuses