Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Ajouter une barre de navigation flottante

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... ::   :: Trucs et astuces

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Ajouter une barre de navigation flottante

Message par Shadow le Ven 9 Oct 2015 - 12:53

Ajouter une barre de navigation flottante

Ce tutoriel vous expliquera comment avoir une barre de navigation flottante, c'est-à-dire qui restera visible en haut de l'écran lors du défilement sur la page. Cela vous permettra de naviguer plus rapidement sur le forum car il ne sera plus nécessaire de remonter tout en haut de la page pour accéder au menu! Wink


Cette astuce est compatible avec toutes les versions. Cependant, si vous avez déjà modifié la position de la barre de navigation par défaut, il est possible que des modifications en plus soient nécessaires.

1. Installer la barre de navigation


Dans un premier temps, vous devez ajouter un de ces codes à votre feuille de style CSS. Pour cela, rendez-vous dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS, et choisissez un des deux thèmes ci-dessous puis copiez-collez le code:

Thème clair


Code:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#FAFAFA;
  border-bottom:1px solid #CCC !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#39C;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i18.servimg.com/u/f18/18/45/41/65/nav10.png') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnibo10.png') no-repeat 0 0 #FAFAFA;
  border:1px solid #CCC;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #CCC;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

Thème foncé


Code:
/* sticky nav main */
#fa_sticky_nav {
  font-size:0; /* hide whitespace */
  text-align:center;
  background:#333;
  border-bottom:1px solid #222 !important;
  height:30px;
  position:fixed;
  right:0;
  z-index:999;
  overflow:hidden;
  transition:top 200ms linear, width 600ms ease-in-out;
}

#fa_sticky_nav li { display:inline } /* navlist adjustment */


/* sticky menu links */
#fa_sticky_nav a.mainmenu {
  color:#CCC;
  font-size:12px;
  font-weight:bold;
  font-family:"Trebuchet MS", Arial, Verdana, Sans-serif;
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/row10.gif') repeat-x 0px 30px;
  display:inline-block;
  padding:0 10px;
  height:30px;
  line-height:30px;
  transition:200ms;
}

#fa_sticky_nav a.mainmenu:hover, #fa_sticky_nav a.mainmenu.fa_navactif {
  color:#FFF;
  background-position:0 25px;
}


/* sticky nav toggler */
#fa_sticky_toggle {
  background:url('http://i21.servimg.com/u/f21/18/21/41/30/omnida11.png') no-repeat 0 0 #333;
  border:1px solid #222;
  border-right:none;
  display:inline-block;
  height:29px;
  width:30px;
  position:fixed;
  right:0;
  z-index:999;
  transition:top 200ms linear;
}

#fa_sticky_toggle:hover { background-position:-30px 0 }


/* make hidden toolbar similar to toggler */
#fa_toolbar_hidden {
  border-radius:0 !important;
  border:1px solid #222;
  border-right:0;
  border-top:0;
}


/* post offset fix */
.post div[style*="-30px;"] {
  top:-60px !important;
}

Vous pouvez bien sûr personnaliser le CSS pour l'adapter au design de votre forum. Wink

Remarque: La hauteur de la barre de navigation est fixée à 30 pixel (height: 30px;), vous pouvez augmenter ou supprimer cette limite si les liens de la barre de navigation se retrouvent coupés.

2. Installer le Javascript

Pour installer la barre de navigation, il va falloir ajouter maintenant un nouveau script. Pour cela rendez-vous dans le Panneau d'Administration > Modules > Gestion des codes Javascript et créez un nouveau javascript:

Titre: Barre de navigation
Placement: Sur toutes les pages

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 : '30px'
      },
      
      tbHidden : {
        bottom : 0,
        top : '0px'
      },
      
      toggler : '30px'
    },
    
    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();
        });
      });
    }
  });
}());

Enregistrez le script puis passez à l'étape 3 qui vous expliquera comment faire pour afficher la barre de navigation selon votre version ou effectuer certaines modifications! Smile

3. Personnalisation du code


5 paramètres peuvent être modifiés dans ce script. Les voici:

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:

Code:
#page-header .navlinks

Par la bonne valeur de sa version:
Code:
phpbb2 : .bodyline > table + table
phpbb3 : ne rien modifier
punbb : #pun-navlinks
invision : #submenu

Exemple si votre forum est en version phpBB2:
Code:
FA.Nav = {
    
    // TARGET NODES POUR CHAQUE VERSION
    // PHPBB2  : ".bodyline > table + table"
    // PHPBB3  : "#page-header .navlinks"
    // PUNBB    : "#pun-navlinks"
    // INVISION : "#submenu"
    targetNode : ".bodyline > table + table",

2. customNav permet d'ajouter des liens de navigation en plus dans la barre de navigation flottante. Par exemple si vous voulez ajouter un bouton Haut et Bas pour naviguer plus rapidement sur la page, il vous suffit d'ajouter des liens de cette façon:
Code:
customNav : '<a class="mainmenu" href="#top">Top</a><a class="mainmenu" href="#bottom">Bottom</a>',

3. keepDefault: Cette option vous permet de choisir de garder ou non les liens de la barre de navigation déjà présente sur le forum. En indiquant la valeur false les liens par défaut ne seront pas conservés, et il suffit de modifier customNav pour ajouter le contenu souhaité dans la barre flottante. Wink

4. collapsible permet d'afficher ou non le bouton de menu sur la barre de navigation flottante (). Comme précédemment, indiquer la valeur false le masquera.

5. offsets: Cette option comporte deux objets pour le positionnement de la barre de navigation flottante.

tbVisible: s'applique lorsque la toolbar est activée
tbHidden: s'applique lorsque la toolbar est masquée ou désactivée

Ces deux objets ont deux propriétés:

top: Définit l'offset haut de la toolbar (exemple: s'affiche à 30 pixels du haut de l'écran)
bottom:: Définit l'espace à partir duquel la barre de navigation flottante doit s'afficher. Vu que la toolbar Forumactif à une hauteur de 30 pixels, on a ajouté 30 pixels de distance à partir du haut. Ainsi quand la barre de navigation par défaut passe sous la toolbar, la barre de navigation flottante s'affiche.

toggler: Définit la distance à partir de laquelle s'affiche le menu. Quand la toolbar est activée, le menu est affiché par défaut à 30 pixels du haut de l'écran.

Cette astuce a été proposée par Ange Tuteur et a été traduite par Vivi.
Make your navbar sticky

Pour proposer une astuce, merci de l'envoyer par MP à un Aidactif ou un Modéractif.
avatar

Shadow
Adminactive
Adminactive

Féminin
Messages : 24348
Inscrit(e) le : 30/03/2007

Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Forum gratuit : Le forum des forums actifs :: Vous et Forumactif... ::   :: Trucs et astuces

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