Compteur de visites gratuit
CAForum infos
[phpBB3] bare de navigation Imgser10
Derniers sujets
» » Pas autorisé à poster pendant 7 jours?
[phpBB3] bare de navigation Clock-10Aujourd'hui à 16:30 par Diane M

» » Le coucou du jour
[phpBB3] bare de navigation Clock-10Aujourd'hui à 13:03 par David1195

» » Joyeux anniv Splash
[phpBB3] bare de navigation Clock-10Aujourd'hui à 13:00 par David1195

» » Avatar de profil arrondit dans les messages
[phpBB3] bare de navigation Clock-10Aujourd'hui à 12:55 par David1195

» » Vider le cache navigateur
[phpBB3] bare de navigation Clock-10Mar 21 Mai 2019 - 13:39 par David1195

» » Différencier le mode texte et le mode WYSIWYG à l'éditeur
[phpBB3] bare de navigation Clock-10Lun 20 Mai 2019 - 17:08 par Splash

» » Masquer la Google Map aux invités et la réserver aux membres en la publiant en iframe dans un forum dédié
[phpBB3] bare de navigation Clock-10Lun 20 Mai 2019 - 15:30 par Splash

» » Les dernières informations de Forumactif
[phpBB3] bare de navigation Clock-10Lun 20 Mai 2019 - 10:57 par Splash

» » [phpBB2] Que je clic sur n'importe quoi, cela m'amène toujours à la même page???
[phpBB3] bare de navigation Clock-10Ven 17 Mai 2019 - 16:06 par Splash

» » Interdire aux modérateurs la suppression de messages
[phpBB3] bare de navigation Clock-10Mar 14 Mai 2019 - 17:38 par Mathis

» » [JavaScript] Comment activer JavaScript dans votre navigateur
[phpBB3] bare de navigation Clock-10Lun 13 Mai 2019 - 15:37 par Splash

» » Mon ordinateur est long à télécharger...
[phpBB3] bare de navigation Clock-10Dim 12 Mai 2019 - 14:34 par Splash

» » Difficulté à s'inscrire sur mon forum
[phpBB3] bare de navigation Clock-10Dim 12 Mai 2019 - 14:31 par Splash

» » Problème accès CSS
[phpBB3] bare de navigation Clock-10Dim 12 Mai 2019 - 14:28 par Splash

» » Personnaliser la navbar en CSS
[phpBB3] bare de navigation Clock-10Jeu 9 Mai 2019 - 9:26 par David1195

» » Personnaliser la navbar en CSS
[phpBB3] bare de navigation Clock-10Jeu 9 Mai 2019 - 9:21 par David1195

» » Installer le traducteur Google
[phpBB3] bare de navigation Clock-10Jeu 9 Mai 2019 - 0:35 par HeroxAquariophile

» » [phpBB2] Le mot inscription n'apparaît pas sur la bande à l'accueil...
[phpBB3] bare de navigation Clock-10Mar 7 Mai 2019 - 20:29 par Splash

» » Les différents groupes d'un forum
[phpBB3] bare de navigation Clock-10Mar 7 Mai 2019 - 9:00 par Splash

» » Réduire la hauteur des catégories
[phpBB3] bare de navigation Clock-10Lun 29 Avr 2019 - 19:37 par caerran

[phpBB3] bare de navigation

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

francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Lun 10 Déc 2018 - 22:16

  • MP
  • Zoom
bonjour, je voudrais que ma bare de navigation qui se trouve sous ma banniere reste en haut de toutes les pages quand on descend sur les pages

merci a vous de me donner les codes et les endroits ou les mettres !
bonne soirée a vous !
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Lun 10 Déc 2018 - 23:11

  • MP
  • Zoom
Hi l'ami,

Il existe un tuto sur le FDF à ce sujet, "Ajouter une barre de navigation flottante", voici le lien : https://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante

Pour ton forum, install ce script 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();
        });
      });
    }
  });
}());

Ensuite va mettre ce code à la CSS :
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('https://i.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('https://i.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;
}

Au scroll vers le bas la navbar apparaitra ainsi

[phpBB3] bare de navigation Navbar10

Au clic sur ce bouton

[phpBB3] bare de navigation Nav10

Tu masque ou tu affiches cette navbar flottante

:u1:
A bientôt



† Aucune aide ne sera donnée en privé
francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Mar 11 Déc 2018 - 10:45

  • MP
  • Zoom
bonjour a tous, merci a vous pour les infos, c'est nikel , tout fonctionne bien ! c'est un peu domage que le fond de la bare de navigation flotante reste blanc ! est il possible de changer la coulleur en orange ?
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mar 11 Déc 2018 - 11:05

  • MP
  • Zoom
Hi francis,

Oui c'est possible, dans ton code CSS tu as 2 fois cette couleur #FAFAFA qui correspond à la couleur blanche de cette navbar.
Remplace là par la couleur de ton choix



† Aucune aide ne sera donnée en privé
francis 1

francis 1

Membre
Membre

Messagefrancis 1 le Mar 11 Déc 2018 - 11:37

  • MP
  • Zoom
grand merci a toi , ca marche nickel !

amitiés
Splash

Splash

StaffAdmin
StaffAdmin

MessageSplash le Mar 11 Déc 2018 - 15:40

  • MP
  • Zoom
Génial l'ami

Problème résolu
Ce topic est fermé
Il peut être réouvert sur demande

 Droite ici Gauche

À bientôt.



† Aucune aide ne sera donnée en privé

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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