[Tutorial - alle Versionen] Die Navigation fixieren

---

Dieser Trick wird dir helfen, deine Navigation zu "fixieren". Was ist eine fixierte Navigation?
Es ist eine Navigation, die sich auf den oberen Teil deines Bildschirmes fixiert, wenn du die normale Navigation nicht mehr sehen kannst, da du schon zu weit runtergescrollt hast.
Das Navigieren von deinem Forum wird dadurch deutlich schneller gemacht, weil du nicht immer hochscrollen musst, um die Navigation benutzen zu können.



Dieses Plugin kann für jede Forum-Version benutzt werden, jedoch läuft das Plugin mit PunBB und phpBB3 am besten.



1. Das Design der Navigation installieren

---

Zuerst musst du ein wenig CSS zu deinem Stylesheet hinzufügen, um das gewünschte Design deiner fixierten Navigation zu erhalten.
Gehe zu Administrations-Bereich > Anzeige > Farben > CSS Stylesheet, dann wähle eine von den unten vorgegebenen Themen, kopiere sie und füge diese dann anschließend in deinem Stylesheet ein.

Helles Design:

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;
        }

Dunkles Design:

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;
        }

Selbstverständlich kannst du diese CSS-Codes nach deinem Geschmack und Forum-Style anpassen.
Hinweis: Die Navigation ist auf 30px in der Höhe fixiert ( height:30px; ), du kannst dieses Limit erhöhen oder einfach entfernen, falls deine Navigation-Links wegraffen.



2. Das Javascript installieren

---

Um die fixierte Navigation zu installieren, gehe zu Administrations-Bereich > Module > Javascript Codes Verwaltung und erstelle ein neues Script.

Titel: Fixierte Navigation
Platzierung: Auf allen Seiten

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 BY 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) {
              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
            
              // toolbar modifications
              $(function() {
                // 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();
                });
              });
            }
          });
        }());

Wenn du fertig bist, speichere das Script ab und deine Navbar sollte nun an dem oberen Teil deines Bildschirmes haften, wenn du die normale Navigation nicht mehr sehen kannst.
Dieses Script ist für phpBB3 eingerichtet, bitte schaue dir den nächsten Bereich des Tutorials an.



3. Modifikationen

---

Dieses Plugin hat 5 Einstellungen, welche am oberen Teil des Scipts veränderbar sind.
Ich werde jede einzelne Einstellung erläutern, damit du weisst, was du alles verändern kannst.

targetNode: Mit dieser Einstellung kannst du die fixierte Navigation für die verschiedenen Forum-Versionen gültig machen.
Abhängig von deiner Forum-Version, solltest du #page-header .navlinks mit Folgendem ersetzen:

phpBB2: .bodyline > table + table
phpBB3: Lasse es so, wie es ist
PunBB: #pun-navlinks
Inivsion: #submenu


customNav: Hier kannst du zusätzliche Links für die fixierte Navigation hinzufügen.
Du möchtest zum Beispiel einen Oben/Unten-Button hinzufügen? Kein Problem, dies würde dann wie folgt ausssehen:

Code:

customNav : '<a class="mainmenu" href="#top">Top</a><a class="mainmenu" href="#bottom">Bottom</a>',

Vergesse nicht, class="mainmenu" einzubeziehen, da dies den Style von den Links widerspiegelt.


keepDefault: Diese Option erlaubt es dir zu entscheiden, ob du alle voreingestellten Links in der Navigation beibehalten möchtest.
Wenn du diese Option auf false stellst, wird nicht ein einziger von den voreingestellten Links beibehalten. Dann kannst du nämlich die zuvor erwähnte Einstellung sehr gut benutzen.


collapsible: Diese Einstellung erlaubt es dir zu entscheiden, ob der Umschalt-Button angezeigt werden soll oder nicht.
Wenn du diese Einstellung auf false stellst, wird der Umschalt-Button versteckt.


offsets: Diese Option enthält zwei Objekte, die zur Positionierung der fixierten Navbar beitragen.

tbVisible: Versätze, wenn die Toolbar sichtbar ist.
tbHidden: Versätze, wenn die Toolbar versteckt ist.

In diesen zwei Objekten sind zwei Eigenschaften zu finden:

top: Definiert den Top-Versatz von der Toolbar. (z.B. wird 30px vom oberen Teil des Bildschirmes angezeigt)
bottom: Definiert die Lücke, ab wann die fixierte Navigation zu sehen ist. Die Toolbar beträgt 30px vom oberen Teil des Bildschirmes, also haben wir einen Versatz von 30px eingestellt.


toggles: Dies definiert den Top-Versatz vom Umschalt-Button. Wenn die Toolbar aktiviert ist, steht der Button 30px vom oberen Teil des Bildschirmes.

Das wär's von den Einstellungen her, aber wenn ihr irgendwelche Fragen habt, dann zögert nicht uns zu fragen.

------------------------------------
Dieses Tutorial wurde von Ange Tuteur geschrieben und von Bigtuber übersetzt.