Compteur de visites gratuit
CAForum infos
[phpBB3] bare de navigation Imgser10
Derniers sujets
» » Supprimez les/des boutons de la Chatbox
[phpBB3] bare de navigation Clock-10Ven 19 Juil 2019 - 13:33 par Passiflore

» » [phpBB3] Nouvelle police d'écriture
[phpBB3] bare de navigation Clock-10Jeu 18 Juil 2019 - 9:43 par Splash

» » Un ptit délire
[phpBB3] bare de navigation Clock-10Mer 17 Juil 2019 - 23:06 par Splash

» » Installer une police d'écriture sur votre forum
[phpBB3] bare de navigation Clock-10Sam 13 Juil 2019 - 20:47 par Splash

» » Icône pour la Chatbox sur la toolbar
[phpBB3] bare de navigation Clock-10Sam 13 Juil 2019 - 13:41 par chrisnvidia

» » Rendre l'image du header cliquable
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 18:38 par David1195

» » Rendre l'image du header cliquable
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 18:38 par David1195

» » Rendre l'image du header cliquable
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 18:37 par David1195

» » Personnaliser la fenêtre de Connexion
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 18:35 par David1195

» » Mettre le profil à droite dans les messages
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 18:31 par David1195

» » Les dernières informations de Forumactif
[phpBB3] bare de navigation Clock-10Mer 3 Juil 2019 - 17:34 par Splash

» » [Edge] Modifier la fenêtre connexion rapide
[phpBB3] bare de navigation Clock-10Jeu 20 Juin 2019 - 20:00 par Splash

» » Le coucou du jour
[phpBB3] bare de navigation Clock-10Jeu 20 Juin 2019 - 17:11 par chrisnvidia

» » Autres hébergeurs d'images
[phpBB3] bare de navigation Clock-10Jeu 20 Juin 2019 - 16:44 par David1195

» » Modifier l'affichage "Sujets" et "Messages" sur l'index
[phpBB3] bare de navigation Clock-10Jeu 20 Juin 2019 - 16:39 par David1195

» » Bloc de connexion
[phpBB3] bare de navigation Clock-10Jeu 20 Juin 2019 - 16:32 par chrisnvidia

» » Problèmes sur Forumactif depuis le 16 juin 2019
[phpBB3] bare de navigation Clock-10Mer 19 Juin 2019 - 11:29 par Splash

» » [Edge] Mise à jour FAE v1.2.12
[phpBB3] bare de navigation Clock-10Lun 17 Juin 2019 - 21:42 par Splash

» » Pas moyen d'aller dans le panneau d'administration....
[phpBB3] bare de navigation Clock-10Lun 17 Juin 2019 - 13:45 par Diane M

» » Comment écrire Premier et Deuxième ainsi que Degré en exposant
[phpBB3] bare de navigation Clock-10Jeu 6 Juin 2019 - 13:55 par David1195

[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