[PHPBB3] Ajouter une deuxième barre de navigation

[Milouze14Fondateur]

Hello les ami(e)s,

l'astuce consiste a ajouter une deuxième barre de navigation visible que par les membres.
Cette dernière sera automatiquement masquée.
Pourquoi ?
Lorsque vous arriverez sur un message il y aura un décalage de la hauteur
et donc l'entête du message ne sera pas visible.


Avant:


Après avant ouverture:



Après avant fermeture:





On va tout placer dans le template overall_header.



Dans le script ci-dessous ,
il y a deux variables o et c qui correspondent au lien des images 16px par 16px.
Vous pouvez modifier les images si vous le souhaitez, mais attention aux dimensions les ami(e)s.

https://i.servimg.com/u/f20/20/11/87/27/add_it10.png


https://i.servimg.com/u/f20/20/11/87/27/remove11.png


Il faudra repositionner ces derniers dans le style donné plus bas.

Code:

    
var o ="https://i.servimg.com/u/f20/20/11/87/27/add_it10.png";
var c ="https://i.servimg.com/u/f20/20/11/87/27/remove11.png";


Les liens renseignés:

Code:


<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=preferences">Vos préférences</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=signature">Votre signature</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=avatars">Votre avatar</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=notifications">Vos notifications</a></li>
<li><a class="mainmenu"href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username">Dernière visite des membres</a></li>
<li><a class="mainmenu"href="/search?search_id=favouritesearch">Favori</a></li>


Vous pouvez remplacer par  :

Code:


<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>
<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>
<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>
<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>
<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>
<li><a class="mainmenu"href="LE LIEN">TEXTE</a></li>


Et renseigner vous même les liens et les textes.


Dans le template overall_header:
Affichage/Templates/Général/ overall_header

Recherchez ceci:

Code:


<ul class="linklist navlinks{NAVBAR_BORDERLESS}">
<li>{GENERATED_NAV_BAR}</li>
</ul>


Juste avant déposez

Code:

 <!-- BEGIN switch_user_logged_in -->
<ul class="M14_more_btn_navbar navlinks" style="display:none;">
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=preferences">Vos préférences</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=signature">Votre signature</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=avatars">Votre avatar</a></li>
<li><a class="mainmenu"href="/profile?mode=editprofile&page_profil=notifications">Vos notifications</a></li>
<li><a class="mainmenu"href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&username">Dernière visite des membres</a></li>
<li><a class="mainmenu"href="/search?search_id=favouritesearch">Favori</a></li>
   <script>
    $(function(){
     var o ="https://i.servimg.com/u/f20/20/11/87/27/add_it10.png";
     var c ="https://i.servimg.com/u/f20/20/11/87/27/remove11.png";
     $('#page-header .navbar ul.navlinks:eq(1)').find('li:eq(0)').before('<li><span class="M14_openNav" title="Afficher la deuxième barre de navigation"><img src="'+o+'"/></span><span class="M14_closeNav" style="display:none;" title="Masquer la deuxième barre de navigation"><img src="'+c+'"/></span></li>');
$('.M14_openNav').click(function(){
$(this).hide();
$(this).closest('li').find('.M14_closeNav').show();
$(this).closest('ul').prev().slideDown(800);
});
$('.M14_closeNav').click(function(){
$(this).hide();
$(this).closest('li').find('.M14_openNav').show();
$(this).closest('ul').prev().slideUp(800);
});
});
  </script>
      </ul>
<!-- END switch_user_logged_in -->


Pensez a enregistrer puis à valider en cliquant respectivement sur   puis



Puis le style qu'il faudra peut être ajusté en fonction de votre forum.
Pensez aussi a adapter si besoin le dernier style en cas ou vou sauriez décidé de mettre des bouton plus importants.


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style

Ajouter ceci:

Code:


/*LA BARRE DE NAVIGATION*/
ul.M14_more_btn_navbar{font-weight: 700;text-align: center;  }
/*LES PARTIES DE LA BARRE DE NAVIGATION*/
.M14_more_btn_navbar  li{display:inline;font-size: 1.1em;line-height: 2.2em;}
/*LES LIENS DE LA BARRE DE NAVIGATION*/
.M14_more_btn_navbar  li a.mainmenu{margin:0px 5px 0px 5px;}
/*LES BOUTONS OUVERTURE/FERMETURE DE LA BARRE DE NAVIGATION*/
.M14_openNav,.M14_closeNav
{
position: relative;
float:left;
width: 16px;
height: 16px;
top: 3px;
cursor:pointer;
}    


Pensez a cliquer sur le bouton

[photoclic]

Merci Philippe.
Vraiment sympa d'en faire profiter les milouziens.