Lexi Help
Die neuesten Themen
» [Update] Neues Theme der mobilen Version V2
von Tierfreund-97 Gestern um 23:14

» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Gestern um 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Gestern um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Do 29 Sep 2016 - 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

Partner
free forum

[Tutorial - alle Versionen] Die Navigation fixieren

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial - alle Versionen] Die Navigation fixieren

Beitrag von Bigtuber am Mi 11 Mai 2016 - 14:14

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 Thema der Navigation installieren



Zuerst musst du ein wenig CSS zu deinem Stylesheet hinzufügen, um das gewünschte Thema 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 Thema:
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 Thema:
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 Wink
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 Bigtuber57 vollständig übersetzt.

Bigtuber
Moderator
Moderator

Männlich Beiträge : 386
keine
Anmeldedatum : 10.08.15
Chrome

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten