Problème avec le tuto "Ajouter une barre de navigation flottante"

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

Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Dim 3 Sep 2017 - 18:19

Bonjour Clin d'oeil
J'ai ajouté ce tuto sur mon forum Visage souriant :
http://forum.forumactif.com/t381565-ajouter-une-barre-de-navigation-flottante

Après avoir modifié les paramètres du script, j'obtiens ceci Visage tirant la lan :


Les liens n'apparaissent pas Visage amusé

Par contre, si je modifie cette partie :
Shadow a écrit: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. 

Les images apparaissent correctement Visage souriant :


Mais je voudrais garder seulement les textes Yeux au ciel

Le CSS pour l'instant Visage souriant :
Code:
/**Ajouter une barre de navigation flottante début*/
/* 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('https://i.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('https://i.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;
}
/**Ajouter une barre de navigation flottante fin*/


Le javascript pour le moment Visage souriant :
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 : ".bodyline > table + table",
   
customNav : '',
   
    keepDefault : false, // keep the default navlinks
    collapsible : false, // 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();
        });
      });
    }
  });
}());

Merci d'avance Clin d'oeil
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Lun 4 Sep 2017 - 17:15

Désolé pour le double post Clié d'oeil langue t
Mais je sais que je peux ajouter les boutons dans le "customNav" mais je ne sais pas comment faire pour que le bouton connexion ne s'affiche que lorsque l'utilisateur n'est pas connecté par exemple Visage souriant
Merci d'avance Visage amusé
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Mer 6 Sep 2017 - 13:12

Et un up Wink
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par HiroKimura le Jeu 7 Sep 2017 - 15:51

Salut Mat,
Je t'avoue que je ne suis pas vraiment bon en dépannage de codes, donc je ne peux pas t'aider.
Cependant, j'ai moi même installé une barre de navigation flottante que tu peux trouver ici : http://faeristest.forumactif.com/ - http://prntscr.com/gi8xy5 si tu veux je peux te donner les codes de ma barre ainsi que mon css afin que tu puisses la personnaliser comme bon te semble.
Dans ma barre les liens sont visibles selon le statut de l'utilisateur, tu peux ajouter via l'option prévue dans le panneau d'admin et configurer les paramètres relatifs à chaque lien.
Si ca te branche, n'hésite pas ^^
avatar

HiroKimura
Nouveau membre

Messages : 23
Inscrit(e) le : 09/08/2017

http://faeris.forumactif.com/
HiroKimura a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Jeu 7 Sep 2017 - 16:26

Salut HiroKimura Clin d'oeil
Déjà un grand merci pour ta réponse Visage souriant
Effectivement, je vois que tu as les liens qui s'affichent en fonction de ton statut Lunettes de soleil
Oui, je veux bien avoir les codes que tu as utilisés pour ta barre de navigation "flottante" Visage souriant

Merci d'avance Visage souriant
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.
  • 0

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par HiroKimura le Jeu 7 Sep 2017 - 16:41

Alors voici comment tu peux l'installer ^^
(Si tu as modifié ton template overall_header, remets le à sa valeur initiale. Par contre, pense à sauvegarder les autres modifications que tu as faite si tu en as ^^)
Dans ton template overall_header tu vas rechercher ceci :
Code:
<table cellspacing="0" cellpadding="0" border="0" align="{MENU_POSITION}">
                    <tr>
                        <td align="{MENU_POSITION}"{MENU_NOWRAP}>{GENERATED_NAV_BAR}</td>
                    </tr>
                </table>
Et supprime le ^^
Tu vas ensuite chercher cette ligne :
Code:
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
Et juste après, ajoute ceci :
Code:
 <div class="navig" align="{MENU_POSITION}">{GENERATED_NAV_BAR}</div>

Dans le CSS :
Code:
.navig /*la barre */{
    position: fixed!important; /*On laisse la barre fixée pour qu'elle te suive partout*/
    top: 0px!important; /*On la colle tout en haut*/
    width: 100%; /*Elle prend toute la largeur de l'écran sur toutes les résolutions, à changer à ton goût*/
  height:34px; /*la hauteur à changer à ton goût aussi*/
  background-color:#2b2b2b; /*Couleur noire de fond*/
  border-bottom:2px dashed grey; /*Bordure en dessous*/
  box-shadow:2px 2px 2px black; /*Une ombre au bloc*/
    }
    a.mainmenu img /*je cible les images de la barre*/{
    display: none; /*Ici c'est pour masquer les image des menus que je ne veux pas activer pour qu'elles ne laissent aucun espace vide indésirable*/
    }
    a.mainmenu /* Les liens de ta barre*/ {
    margin: 5px; /*Décalage avec le bloc de ta barre*/
    font-family: Arial; /*Parce que c'est beau l'arial xD*/
    font-size: 18px; /*A changer pour changer la taille de ta police*/
    v-align:center; /*Alignement vertical centré*/
    display:inline-block; /*Je veux que mon texte puisse avoir des propriétés de bloc tout en ayant l'alignement d'un texte*/
  padding-left:10px; /*Décalage gauche de 10 pixels*/
  padding-right:10px; /*Décalage droit de 10 pixels*/
  border-left:2px solid grey; /* Une bordure à gauche */
  border-right: 2px solid grey; /*Une bordure à droite */
    }
a.mainmenu:hover /*Quand on survole un lien de ta barre*/
{
  background-color:#002266 !important; /*changement de couleur de fond*/
  color:#00ffff !important; /*changement de couleur de  texte*/
}

Voilà, pas besoin de JS le CSS suffit, n'oublie pas de bien valider ton template, et dans les options du panneau d'admin dans affichage / entête et navigation enlève manuellement les images de chaque lien. Tu peux ensuite depuis ce même menu du PA ajouter les liens que tu veux pour personnaliser ta barre à ta convenance pour admins modérateurs membres et invités ^^

Si tu as un soucis n'hésite pas ^^
avatar

HiroKimura
Nouveau membre

Messages : 23
Inscrit(e) le : 09/08/2017

http://faeris.forumactif.com/
HiroKimura a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Dim 10 Sep 2017 - 12:11

Merci Clin d'oeil
Mais le problème c'est je ne peux pas garder les images de la barre de navigation de base Visage amusé
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Mat le Mar 12 Sep 2017 - 13:42

Et un up Wink
avatar

Mat
*****

Messages : 759
Inscrit(e) le : 05/09/2015

https://www.fidjix.com/
Mat a été remercié(e) par l'auteur de ce sujet.

Re: Problème avec le tuto "Ajouter une barre de navigation flottante"

Message par Chacha le Mer 20 Sep 2017 - 9:51

Bonjour,

Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement !

Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.
avatar

Chacha
Modéractif
Modéractif

Masculin
Messages : 54601
Inscrit(e) le : 21/08/2010

http://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

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


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