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

EDGE/ PHPBB2 / PHPBB3/ PUNBB / INVISION/ MODERNBB/ AWESOMEBB
 
AccueilAccueil  PortailPortail  Connexion  S'enregistrerS'enregistrer  
Le deal à ne pas rater :
Cartes Pokémon EB12.5 : commander le coffret ETB Zénith Suprême
Voir le deal

 

 [PHPBB3] Ajouter une deuxième barre de navigation

Aller en bas 
2 participants
AuteurMessage
Milouze14
Fondateur

Milouze14



[PHPBB3] Ajouter une deuxième barre de navigation Empty
MessageSujet: [PHPBB3] Ajouter une deuxième barre de navigation   [PHPBB3] Ajouter une deuxième barre de navigation EmptyDim 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
Revenir en haut Aller en bas
https://www.milouze14.com
photoclic
Milouzien

avatar



[PHPBB3] Ajouter une deuxième barre de navigation Empty
MessageSujet: Re: [PHPBB3] Ajouter une deuxième barre de navigation   [PHPBB3] Ajouter une deuxième barre de navigation EmptyDim 15 Nov 2020 - 13:04

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

Revenir en haut Aller en bas
https://photoclic.forum-pro.fr/
 
[PHPBB3] Ajouter une deuxième barre de navigation
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [PHPBB3]Ajouter l'infobulle au survol des boutons de la barre de navigation
» [INVISION]Ajouter l'infobulle au survol des boutons de la barre de navigation
» [EDGE]Ajouter l'infobulle au survol des boutons de la barre de navigation
» [PHPBB2]Ajouter l'infobulle au survol des boutons de la barre de navigation
» [PHPBB3]Afficher une navigation rapide sur les messages

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Astuces Forumactif :: Astuces Forumactif :: Les astuces Phpbb3-
Sauter vers: