1. Hallo Gast, um hier Zugriff auf die Ressourcen zu erhalten, musst Du Dich zuvor als Inhaber einer Xenforo-Lizenz ausweisen. Die dazu nötigen Schritte kannst du hier schnell durchführen: https://xen-hilfe.de/account/xenforo-license

Floating Navigation im XenForo default Style 1.0.1

Kleines Add-on mit Anleitung für eine floating Navigation im XenForo Standard Style

  1. otto
    Kompatible XF Versionen:
    • 1.4
    • 1.5
    Sichtbares Branding:
    Nein
    Link zum Add-on:
    https://xenforo.com/community/threads/floating-navigation-bar.19295/
    Lizenz:
    Dieses Material steht unter der Creative-Commons-Lizenz Namensnennung - Keine Bearbeitungen 4.0 International. Um eine Kopie dieser Lizenz zu sehen, besuchen Sie http://creativecommons.org/licenses/by-nd/4.0/.
    Basierend auf dieser Anleitung: https://xenforo.com/community/threads/floating-navigation-bar.19295/ von Cezz.

    Beschreibung
    Das Addon fügt dem Standard Style deine XenForo eine sogenannte "floating navigation" hinzu. Dabei wird die Navigation beim herunter scrollen dauerhaft am oberem Bildschirmrand eingeblendet so daß man stets Zugriff darauf hat ohne nach oben scrollen zu müssen.
    Unterhalb einer Bildschirmbreite von 1024 Pixel wird die floating Navigation automatisch ausgeblendet, da ich bei so kleinen Displays eher von Smartphones oder Tablets mit Touch Display ausgehe. Diese Funktion kann jedoch leicht entfernt werden, siehe Hinweise.
    Diese Floating Navigation ist leicht auch an deine Bedürfnisse anpassbar. :)

    Installation
    Ganz einfach:
    1. Packet herunter laden und auf dem PC entpacken
    2. die enthaltene XML Datei als Add-on im XenForo ACP installieren - fertig
    Hinweise
    1 - Wenn du die Schriftgrößen oder die Höhen der Navigation geändert hast, dann musst du lediglich diesen Parameter anpassen, wobei größer negative Werte die Navigation nach unten und kleinere nach oben rutschen lassen:

    Template float_navigation
    Code:
                $('#header').stop().animate({'opacity':'1'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight - 24'}px','z-index':'60'}):


    2 - Automatische Ausblendung der floating Navigation unterhalb 1024 Pixel Bildschirmbreite deaktivieren:

    Ersetze das float_navigation Template mit diesem hier:
    Code:
    <xen:require css="float_navigation.css" />
    <script type="text/javascript">
    $(function() {
         $(window).scroll(function(){
             ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) ?
                 $('#header').stop().animate({'opacity':'1'},400).css({'position':'fixed','top':'-{xen:calc '@headerLogoHeight + @headerTabHeight - 24'}px','z-index':'60'}):
                 $('#header').stop().animate({'opacity':'1'},400).css({'position':'absolute','top':'0px'});
         });
         $('#header').hover(
             function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);},
             function(){ if ($(window).scrollTop() > {xen:calc '@headerLogoHeight + (@headerTabHeight * 2)'}) $(this).stop().animate({'opacity':'1'},400);}
         );
    });
    </script>

    Demo
    https://xen-hilfe.de (Style "Modify" auswählen)

    Wenn du noch Fragen hast - stell sie, ich werde versuchen sie zu beantworten. :)
    Mr.Gibbs und Terror gefällt das.
OK Mehr Informationen

Diese Seite verwendet Cookies. Mit Deinem Klick auf OK, stimmst Du dem setzen von Cookies zu. Andernfalls werden keine gesetzt, was die Funktionalität einschränkt.