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

CODES & ASTUCES POUR VOS FORUMS

Compteur de visites gratuit
Annonces
CAForum est aussi un forum d'aide pour phpBB. Voici le lien du forum : https://forums.caforum.fr
 Vous voulez créer un forum sans publicités tout en étant propriétaire de votre base de données ?
Contactez moi sur le forum !
CAForum infos
Derniers sujets
» » Bouton MP "Répondre" adapté à la version ModernBB
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 13:03 par NIK SIURI

» » Réduire la hauteur des catégories
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 12:59 par NIK SIURI

» » [AwesomeBB] Ajout d'un bloc de connexion/enregistrement en bas de page
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 12:35 par NIK SIURI

» » Afficher les avatars en forme rectangulaire
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 11:47 par NIK SIURI

» » Modifier la partie des stats en début de qeel
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 11:45 par NIK SIURI

» » Mettre une image au qeel
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 11:37 par NIK SIURI

» » Rendre l'image du header cliquable
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 11:34 par NIK SIURI

» » Elargir le cadre de la boite de smileys
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 11:33 par NIK SIURI

» » [phpBB3] Flèches Haut et Bas qui s'adaptent à la couleur du thème
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 10:29 par NIK SIURI

» » Catégories rétractables sur l'index
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Catégories de différentes couleurs
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 10:17 par NIK SIURI

» » [phpBB3] Ajout d'un bloc de connexion/enregistrement en bas de page
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 10:07 par NIK SIURI

» » Centrer l'avatar, le pseudo & le rang dans les messages
[phpBB3] bare de navigation Clock-10Mer 31 Jan 2024 - 10:06 par NIK SIURI

» » Modifier l'icône "On-line"
[phpBB3] bare de navigation Clock-10Mar 23 Mai 2023 - 19:15 par Kionk

» » Insérer des boutons "Haut" & "Bas" de forum
[phpBB3] bare de navigation Clock-10Mar 23 Mai 2023 - 11:40 par Kionk

Avril 2024
LunMarMerJeuVenSamDim
1234567
891011121314
15161718192021
22232425262728
2930     

Calendrier Calendrier

Le Deal du moment : -20%
-20% Récupérateur à eau mural 300 ...
Voir le deal
79 €

[phpBB3] bare de navigation

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

Résolu [phpBB3] bare de navigation

#920
Message n°1
francis 1

Membre
Membre
francis 1

Messagefrancis 1 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 !

Résolu Re: [phpBB3] bare de navigation

#921
Message n°2
Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash 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

Résolu Re: [phpBB3] bare de navigation

#924
Message n°3
francis 1

Membre
Membre
francis 1

Messagefrancis 1 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 ?

Résolu Re: [phpBB3] bare de navigation

#925
Message n°4
Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash 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

Résolu Re: [phpBB3] bare de navigation

#926
Message n°5
francis 1

Membre
Membre
francis 1

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

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

amitiés

Résolu Re: [phpBB3] bare de navigation

#927
Message n°6
Splash

StaffAdmin
StaffAdmin
Splash

MessageSplash 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.

Résolu Re: [phpBB3] bare de navigation

#0
Message n°7
Contenu sponsorisé

MessageContenu sponsorisé

  • MP
  • Zoom

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

Sujets similaires
» Barre de navigation
» [phpBB3] les mp (Spam)
» [phpBB3] drapeau de nationalité
» [phpBB3] ajout d'un lien sur la navbar
» [phpBB3] disparition de la liste des banissements

Inscrivez-vous ou connectez-vous pour répondre

Vous devez être membre pour répondre.

Nous rejoindre

Inscrivez-vous pour participer au forum !


Nous rejoindre

Connexion

Vous êtes membre du forum, cliquez ici pour vous connecter.


Connexion

Les forums Forumactif ::  Forum entraide :: 

Archives / Sujets résolus

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
Créer un forum | ©phpBB | Forum gratuit d'entraide | Signaler un abus | Forum gratuit