Bouton pour cacher et déplier la barre de navigation

[Kam27]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://tavernedanna.forumactif.org/

Description du problème

Bonjour,
Après consultations avec certains de mes confrères nous avons déduit que la barre de navigation qui descend quand on scroll pouvait en perturber certains, mais que ça pouvait en arranger d'autres. Alors nous avons déduit que ça pourrait être intéressant que les membres puissent cacher leur barre de navigation quand ils veulent avec un bouton.
J'ai vu que sur d'autres forums ils ont réussis à en faire : http://fieldofheroes.forumactif.org/ ou celui de forumactif  

Saviez-vous comment on peut faire ce genre de bouton ?

Bonne journée.

[Kam27]

Je up

[Kam27]

up

[◦Jay◦]

Bonjour, vous pouvez réaliser cela avec ce tutoriel.

[Kam27]

Bonjour, merci pour le lien.
J'ai réussi l'étape 1 et 2 mais la 3 me pose problème : "1. targetNode: Il s'agit de l'élément cible qui va transformer la barre de navigation en un élément fixe lorsque du défilement vertical. En fonction de la version de votre forum, il faudra remplacer au début du script "
Il n'y a pas le code de la valeur de la version modernBB. Est-ce qu'il y a un moyen de la connaitre ?

[Kam27]

up

[◦Jay◦]

Il faut garder la version phpBB3 mais il faut supprimer le script de la BDN actuelle.

Pour ce faire, rendez-vous dans votre PA>Affichage>Templates>Général>Template overall_footer_end>Recherchez et supprimez :

Code:

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   $(window).scroll(function() {
      var header_top = $('#headerbar-top');
 
      if (header_top.hasClass('w-toolbar')) {
         if ($(window).scrollTop() >= 42) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      } else {
         if ($(window).scrollTop() >= 1) {
            header_top.addClass('is-sticky');
         } else {
            header_top.removeClass('is-sticky');
         }
      }
   });
});
//]]>
</script>

[Kam27]

Merci de votre réponse.
J'ai réussi ce que vous m'avez dit mais malheureusement ça ne fonctionne pas : https://media.discordapp.net/attachments/435186846213996556/480731858665996298/unknown.png?width=400&height=225
Une deuxième barre s'est crée :/

(actuellement je suis en train de faire mes tests ici : http://tavernanna2.forumactif.com/)

Bonne journée

[◦Jay◦]

Vous avez certainement loupé quelque chose, je viens d'essayer sur ce forum test et cela fonctionne. Je n'ai pas pris le temps d'adapter le css.

[Kam27]

En effet, j'ai dû supprimer quelque chose par mégarde.
Cependant je voulais savoir s'il y avait moyen de remettre la barre tout en haut et de la fixer ?
J'ai remis ce code : https://forum.forumactif.com/t393091-modernbb-fixe-la-barre-de-navigation, mais ça ne fonctionne plus.

[Bipo]

Bonsoir Kam27,

Votre problème est toujours d'actualité ? Je viens de regarder sur votre forum http://tavernedanna.kanak.fr/ et la barre est fixée correctement. Par contre, sur votre forum de test, ce n'est pas le cas car vous n'avez pas correctement suivi la procédure indiquée [ici]. En effet, dans le template overall_header, vous avez écrit ça :

Code:

<div id="page-header">
 <div class="headerbar">
 <div id="headerbar-top">
                          <div class="is-sticky">
 <div class="wrap">


Alors qu'il faudrait écrire comme ceci :

Code:

<div id="page-header">
 <div class="headerbar">
 <div id="headerbar-top" class="is-sticky">
 <div class="wrap">

La class is-sticky doit être dans la div dont l'id est headerbar-top.

Si l'explication n'est pas satisfaisante, vous pouvez toujours nous communiquer votre template overall_header.

Bonne soirée.
Bipo.

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Kam27]

Salut Bipo,
C'est fait, mais le problème c'est que le fond de la barre disparait quand on est tout en haut de la page.


Puis après j'ai un autre problème, quand je descend pas la barre ne se place pas tout à fait en haut, un décalage se créer :


Bonne journée

[Bipo]

Bonjour Kam27,

Tout d'abord, il faudrait être beaucoup plus clair dans votre demande d'entraide car vous êtes en train de tout mélanger entre les différentes astuces...

Donc, que voulez-vous concrètement ? Faire comme sur ce forum d'entraide :



OU ALORS, vous souhaitez mettre en place la solution exposée dans ce sujet : [ici].

Ce sont deux choses différentes, faites votre choix.

Bipo.

[Kam27]

Au départ je voulais un bouton pour cacher et déplier la barre navigation. Jay a trouvé une solution, mais elle ne me convient pas car comme vous pouvez le voir sur les screenshots, le fond de la barre disparait quand on est en haut de la page, puis quand on scrool, cette dernière ne se place pas tout à fait en haut, il y a un décalage comme vous pouvez le voir.
En bref, Jay a trouvé une solution mais qui crée des problèmes qui rend sa solution pas satisfaisante.

Maintenant est-ce que vous comprenez mieux pourquoi je demande d'autres solutions ? C'est pour résoudre mes autres problèmes liés à la solution donné, car sinon je ne la prends pas.
N'hésites pas à me le dire si je ne suis pas encore assez clair.

[Bipo]

Re,

Je vais considérer que vous souhaitez cette solution :

Reprenons :

Pour avoir la barre de navigation flottante ci-dessus, il faut au préalable supprimer le script qui se trouve dans le template overall_footer_end :

Code:

//<![CDATA[
$(document).ready(function() {
 $(window).scroll(function() {
 var header_top = $('#headerbar-top');

 if (header_top.hasClass('w-toolbar')) {
 if ($(window).scrollTop() >= 42) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 } else {
 if ($(window).scrollTop() >= 1) {
 header_top.addClass('is-sticky');
 } else {
 header_top.removeClass('is-sticky');
 }
 }
 });
});
//]]>
</script>

Ensuite, il suffit de suivre les étapes indiquées dans ce tutoriel [ici] SAUF qu'à l'étape 2 (Installer le Javascript), vous allez mettre ce script :

Code:

(function() {
  if (!window.FA) window.FA = {};
  if (FA.Nav) {
    if (window.console && console.warn) console.warn('FA.Nav has already been defined');
    return;
  }
 
  FA.Nav = {
    
    // TARGET NODES POUR CHAQUE VERSION
    // PHPBB2  : ".bodyline > table + table"
    // PHPBB3  : "#page-header .navlinks"
    // PUNBB    : "#pun-navlinks"
    // INVISION : "#submenu"
    targetNode : "#page-header .navlinks",
    
    customNav : '', // custom navlinks
    
    keepDefault : true, // keep the default navlinks
    collapsible : true, // show hide button
    
    
    // offset states
    offsets : {
      tbVisible : {
        bottom : 30,
        top : '0px'
      },
      
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
      
      toggler : '0px'
    },
    
    activeOffset : {}, // active offset for the sticky nav
    
    visible : false, // sticky nav is visible
    
    // check the state of the static nav
    checkState : function() {
      if (!FA.Nav.animating) {
        var hidden = FA.Nav.barStatic.getBoundingClientRect().bottom <= FA.Nav.activeOffset.bottom;
      
        if (hidden && FA.Nav.barSticky.style.top != FA.Nav.activeOffset.top) {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = FA.Nav.offsets.toggler;
          FA.Nav.barSticky.style.top = FA.Nav.activeOffset.top;
          FA.Nav.visible = true;
        } else if (!hidden && FA.Nav.barSticky.style.top != '-30px') {
          if (FA.Nav.toggler) FA.Nav.toggler.style.top = '-30px';
          FA.Nav.barSticky.style.top = '-30px';
          FA.Nav.visible = false;
        }
      }
    },
    
    animating : false, // sticky nav is animating
    
    // animate the sticky nav when the toolbar is toggled
    animate : function() {
      if (FA.Nav.visible) {
        FA.Nav.animating = true;
        FA.Nav.barSticky.style.transition = 'none';
      
        $(FA.Nav.barSticky).animate({
          top : FA.Nav.activeOffset.top
        }, function() {
          FA.Nav.barSticky.style.transition = '';
          FA.Nav.animating = false;
          FA.Nav.checkState();
        });
      }
    },
    
    // toggle sticky navigation and remember preference via cookies
    toggle : function() {
      if (FA.Nav.barSticky.style.width == '100%') {
        my_setcookie('fa_sticky_nav', 'hidden');
        FA.Nav.barSticky.style.width = '0%';
      } else {
        my_setcookie('fa_sticky_nav', 'shown');
        FA.Nav.barSticky.style.width = '100%';
      }
      return false;
    }
    
  };
  
  $(function() {
    // set default offsets based on toolbar state
    FA.Nav.activeOffset = (my_getcookie('toolbar_state') == 'fa_hide' || !_userdata.activate_toolbar) ? FA.Nav.offsets.tbHidden : FA.Nav.offsets.tbVisible;
    if (!_userdata.activate_toolbar) FA.Nav.offsets.toggler = '0px';
    
    // find the static nav
    FA.Nav.barStatic = document.querySelector ? document.querySelector(FA.Nav.targetNode) : $(FA.Nav.targetNode)[0]; // static nav
    
    if (FA.Nav.barStatic) {
      $(function() {
        FA.Nav.barSticky = FA.Nav.barStatic.cloneNode(FA.Nav.keepDefault); // clone static nav
        if (FA.Nav.customNav) FA.Nav.barSticky.insertAdjacentHTML('beforeEnd', FA.Nav.customNav);
        FA.Nav.barSticky.id = 'fa_sticky_nav';
        FA.Nav.barSticky.style.width = my_getcookie('fa_sticky_nav') == 'hidden' ? '0%' : '100%';
        FA.Nav.barSticky.style.top = '-30px';
          
        document.body.appendChild(FA.Nav.barSticky); // append the sticky one
          
        // sticky nav toggler
        if (FA.Nav.collapsible) {
          FA.Nav.toggler = document.createElement('A');
          FA.Nav.toggler.id = 'fa_sticky_toggle';
          FA.Nav.toggler.href = '#';
          FA.Nav.toggler.style.top = '-30px';
          FA.Nav.toggler.onclick = FA.Nav.toggle;
          
          document.body.appendChild(FA.Nav.toggler);
        };
        
        window.onscroll = FA.Nav.checkState; // check state on scroll
        FA.Nav.checkState(); // startup check
          
        // animate sticky nav and change offsets when the toolbar is toggled
        $('#fa_hide').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbHidden;
          FA.Nav.animate();
        });
        
        $('#fa_show').click(function() {
          FA.Nav.activeOffset = FA.Nav.offsets.tbVisible;
          FA.Nav.animate();
        });
      });
    }
  });
}());

Si vous suivez correctement la procédure, vous arrivez à ce résultat : http://test-packs-preprod-5.kanak.fr/ (je vous laisse voir sur le forum de test directement).

Bonne fin de journée.
Bipo.

[*Splash*]

Hi,

Je pense que Kam27 veut pouvoir slider sa navbar, pour l'afficher ou non, comme sur ce forum

[Kam27]

Merci Bipo, mais il reste encore un soucis qu'est celui du fond de barre qui disparait quand on est en haut de la page :

(oups mon encadré a dépassé sur le scroll)

Le fond est important sinon les menus deviennent illisible sur la bannière.

[Bipo]

Re,

Il faut mettre cet élément dans votre CSS :

Code:

#headerbar-top {
    background-color: #D70000;
}

Vous pouvez changer la couleur en modifiant la valeur #D70000.

Bipo.

[Kam27]

Merci beaucoup, ça fonctionne à merveille.
Avant cocher l'icône résolu, je veux savoir une dernière chose. Est-ce qu'il y a un moyen de réduire la largueur de la barre ? ainsi que centrer les tous les menus ?
Quand on est tout en haut elle est vachement trop grosse par rapport aux menus : http://tavernanna2.forumactif.com/

Bonne soirée.

[Fantazie]

Coucou,

avec ce le header top qu'il t'a donné, tu peux modifier la largeur de la barre (ce qui apparait en rouge) mais tu verras tes liens au même endroit, il te faudra alors diminuer le margin top de cette class:

Code:



.navbar li {

J'ai carrément mis 0 pour environ 30px de hauteur du header bar

[Kam27]

Salut, pour dimunier il faut que j'utilise quoi comme code CSS ? un padding ? idem pour diminuer le margin top ?

[Fantazie]

Désolée si ce n'était pas assez clair, j'ai posté entre deux activités et voilà x)

Essaie:

Code:

#headerbar-top {
height: 30px;
}

J'ai remarqu" qu'actuellement tu avais ajouté à ce code un margin top de 10 px, ce qui décolle le menu de la toolbar. Si c'est voulu tant mieux, sinon tu sauras y remédier

Ensuite pour replacer les liens un peu plus haut (comme le header bar est moins large, les liens sortent du cadre) tu peux tester un:

Code:

.navbar li {
margin-top: 0;
}

En jouant sur la hauteur du header bar tu devras adapter le margin top des liens navbar li. A toi de faire mumuse et de mettre les dimensions qui te plaisent =)

Sur ce, après une bonne soirée devant Good doctor, je tire ma révérence pour ce soir ^-^

PS: applique les codes, l'un après l'autre, et actualise entre les deux, juste pour que tu voies le détail des étapes de tes propres yeux et ainsi tu sauras visualiser pour d'autres soucis de ce type. Sinon, tu peux tout simplement faire "inspecter" si tu es sous chrome ou "examiner" sous firefox et éditer le css directement dessus, ce sont des modifications temporaires et cela te permettra d'avoir un visuel avant de changer ton css réel

[Kam27]

Merci, j'ai réussi !

Une dernière chose. Pourquoi je n'arrive pas à centrer les menues ?
Pourtant j'ai utilisé ce code

Code:

text-align: center;

sur le .navbar li et .navbar a

[Fantazie]

Sur ton forum test je ne vois plus les liens étant donné le margin négatif mais comme c'est très différent de ton autre forum, c'est peut être fait expres, cependant je te le signale au cas où on aurait une différence de rendu =)

Pour centrer le menu:

Code:

.navbar {
    text-align: center;
}

[Kam27]

Merci