Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.

[PHPBB3] Ajouter une deuxième barre de navigation

2 participants

Aller en bas

Icône par defaut [PHPBB3] Ajouter une deuxième barre de navigation

Message par Milouze14 Dim 15 Nov 2020 - 7:58

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:
[PHPBB3] Ajouter une deuxième barre de navigation 173

Après avant ouverture:

[PHPBB3] Ajouter une deuxième barre de navigation 234

Après avant fermeture:

[PHPBB3] Ajouter une deuxième barre de navigation 319



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
[PHPBB3] Ajouter une deuxième barre de navigation Add_it10

https://i.servimg.com/u/f20/20/11/87/27/remove11.png
[PHPBB3] Ajouter une deuxième barre de navigation Remove11

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   Enregistr puis Ajout



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 [PHPBB3] Ajouter une deuxième barre de navigation Sans_t10


Dernière édition par Milouze14 le Mar 30 Nov 2021 - 19:18, édité 1 fois
Milouze14
Milouze14
Fondateur



https://www.milouze14.com

Revenir en haut Aller en bas

Icône par defaut Re: [PHPBB3] Ajouter une deuxième barre de navigation

Message par photoclic Dim 15 Nov 2020 - 13:04

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

avatar
photoclic
Milouzien



https://photoclic.forum-pro.fr/

Revenir en haut Aller en bas

Revenir en haut


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