Contao-Camp 2024
Ergebnis 1 bis 29 von 29

Thema: Docked Navigtion

  1. #1
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard Docked Navigtion

    Moin,
    aufgrund der hohen Nachfrage zu dem Thema, habe ich angefangen dazu ein Tutorial zu schreiben.
    Es behandelt das Thema einer am Fensterrand angedockten Navigation, wenn diese durch scrollen den sichtbaren Bereich verlässt.

    Später wird noch ergänzt, wie man die Links auf eine OnePage Seite auf aktiv stellt, wenn man in aktiven Bereich gescrollt hat.
    Das ganze ist fertig zu sehen unter stefanmelz.de

    Edit:
    Der verlorenen Link:
    http://de.contaowiki.org/Docked_Navigation
    Geändert von melzebub (11.09.2012 um 10:02 Uhr)
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  2. #2
    AG CMS-Garden
    Contao-Urgestein
    Avatar von lindesbs
    Registriert seit
    05.06.2009.
    Ort
    Oer-Erkenschwick
    Beiträge
    4.154
    Partner-ID
    keine
    User beschenken
    Wunschliste

    Standard

    Finde ich klasse !
    Wann kommen die ersten Teile deines Tutorials ?
    Schreibst Du es bitte auch ins Wiki ?
    von Willi Voltz aus PR 500: Henry George sagte einmal: »Kultur ist Zusammenarbeit.«


    Contao-Hosting: begeisterter Uberspace-Nutzer

  3. #3
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    wunderbar! Auf deine tutorials bin ich sehr gespannt.. finde die Technik sehr interessant! wir warten
    Geändert von ways2web (11.09.2012 um 09:44 Uhr)

  4. #4
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Huch, Link vergessen. Ist ja schon drin:

    http://de.contaowiki.org/Docked_Navigation
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  5. #5
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste

    Standard

    Oh wusste garnicht das solch Kleinigkeiten so große Begeisterung finden. Sowas hab ich vor ~2 Jahren mal gebastelt und auch sonst hab ich wohl viele kleine moo_ templates die das eine oder andere Gimmick bereitstellen. Bräuchte nur mal jemand der das Zeug veröffentlicht
    Anerkennung motiviert: Amazon-Wunschliste && TANSTAAFL
    Kontakt: http://www.4wardmedia.de

  6. #6
    Contao-Urgestein Avatar von ways2web
    Registriert seit
    23.03.2010.
    Ort
    Berlin
    Beiträge
    1.698
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Psi Beitrag anzeigen
    Oh wusste garnicht das solch Kleinigkeiten so große Begeisterung finden. Sowas hab ich vor ~2 Jahren mal gebastelt und auch sonst hab ich wohl viele kleine moo_ templates die das eine oder andere Gimmick bereitstellen. Bräuchte nur mal jemand der das Zeug veröffentlicht
    immer raus damit Psi, nicht jeder kann gut mit moo&co umgehen.. da sind angepasste templates oder Anleitungen für solche dinge in contao immer klasse! Nicht nur weil man es verwenden kann...sondern es hilft auch zu verstehen um dann eventuell selbst mehr Beitrag leisten zu können (ja, ok ich denke da natürlich an mich)
    hab deine moo-collection natürlich schon unter der Lupe

    ich finde die docked_navigation echt klasse..

    gruss
    ways

  7. #7
    AG Core-Entwicklung Avatar von Psi
    Registriert seit
    19.06.2009.
    Ort
    Mittelfranken
    Beiträge
    930
    Partner-ID
    5583
    User beschenken
    Wunschliste
    Anerkennung motiviert: Amazon-Wunschliste && TANSTAAFL
    Kontakt: http://www.4wardmedia.de

  8. #8
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    334

    Standard Tolle Idee und Danke für das Tutorial!

    ...aber leider will es bei mir nich klappen.
    Was mache ich bloß falsch?
    Seite angelegt, CSS, dazu, Script eingebungeden, nix...
    Meine Seite hat folgende Struktur. Script als function.js eingebunden.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="function.js"></script>
    
    <style type="text/css">
    .scrolled {
    	position:fixed;
    	top:0;
    	width:100%;
    }
    #dienste {
    	background-color: #FCF;
    	height: 200px;
    }
    #profil {
    	background-color: #9CF;
    	height: 200px;
    }
    #arbeiten {
    	background-color: #CCF;
    	height: 200px;
    }
    </style>
    </head>
    
    <body>
    	<div id="navi">
         <ul>
    	<li class="dienste"><a href="#top">Dienstleistungen</a></li>
    	<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
    	<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
    	</ul>
           </div>
          <div id="dienste">
          dfljiengüi</div>
          <div id="arbeiten">
          #fjgüspginer</div>
          <div id="profil">
          fanwuüwofuncüwe</div>
    </body>
    </html>
    Was fehlt?

  9. #9
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Haste du mal da js dazu? Kriegt die Navi beim scrollen denn die neue CSS Klasse?
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  10. #10
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    334

    Standard

    Hallo,

    hab's gestern Abend nochmal im Schnelldurchlauf zusammen gesetzt.
    Funktioniert, klasse!!!
    Das einzige was mich noch stört: Sobald die Navi oben am Browserfenster anstößt, ruckelt es ein paar mal...
    Ich vermute, das liegt am Inhalt des <div>.
    Falls ich es nicht weg bekomme , frag ich nochmal nach.

    Vielen Dank.

    <privat> Hast ein Bier im Schalli verdient! ;-)</privat>

  11. #11
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Hm, ne das wahrscheinlich, weil die Navi bei position fixed aus dem html fluss rausgerissen wird und der nachfolgende inhalt dann hochspringt. Theoretisch musst du dem nachfolgenden inhalt beim wechsel der navigationsklasse einen margin-top in höhe der Navigationselementhöhe zugeben. Also wenn die Navi 130px hoch ist, muss zusätzlich zum klassenwechsel noch ein margin-top: 130px zum nächsten element in der hirarchie hinzugefügt werden.

    Baue ich irgendwann noch ins wiki dazu.
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  12. #12
    Contao-Fan
    Registriert seit
    28.01.2010.
    Beiträge
    334

    Standard

    ...yo, das macht Sinn.

  13. #13
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von melzebub Beitrag anzeigen
    Hm, ne das wahrscheinlich, weil die Navi bei position fixed aus dem html fluss rausgerissen wird und der nachfolgende inhalt dann hochspringt. Theoretisch musst du dem nachfolgenden inhalt beim wechsel der navigationsklasse einen margin-top in höhe der Navigationselementhöhe zugeben. Also wenn die Navi 130px hoch ist, muss zusätzlich zum klassenwechsel noch ein margin-top: 130px zum nächsten element in der hirarchie hinzugefügt werden.

    Baue ich irgendwann noch ins wiki dazu.
    Habe die Lösung dazu mal ins Wiki geschrieben.
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  14. #14
    Contao-Nutzer Avatar von stephangunnar
    Registriert seit
    12.11.2009.
    Ort
    Wiesbaden
    Beiträge
    187

    Standard

    Zitat Zitat von melzebub Beitrag anzeigen
    Habe die Lösung dazu mal ins Wiki geschrieben.
    Genau daran hänge ich jetzt, da ich mich wahrscheinlich mit Javascript nicht gut genug auskenne. Ich habe erst den Code aus dem Wiki Artikel genommen, und dann den direkt von deiner Webseite (siehe nachfolgenden Code). In dem Code habe ich nur die Klassen geändert, die bei mir "mod_customnav" und "container" heißen.

    Wie Ihr seht auf http://2013.das6040.de/ legt sich beim Scrollen der "container" über den "mod_customnav". Wie kann ich das verhindern?

    Code:
    window.addEvent('domready',function(){
    
        /*navi*/
        var navi        = $('navi');
        var container     = $('container');
        var arbeiten    = $('arbeiten');
        var profil      = $('profil');
    
        var windowcoords    = $(window).getCoordinates();
        var navicoords      = navi.getCoordinates();
        var containercoords   = container.getCoordinates();
        var arbeitencoords  = arbeiten.getCoordinates();
        var profilcoords    = profil.getCoordinates();
    
        //std.
        $$('li.container a').addClass('button');
    
        window.addEvent('scroll',function(){
            var scroll = this.getScroll();
    
    
            //navidocking
            if((scroll.y) > navicoords.top)
            {
                var navpos  = navi.addClass('mod_customnav');
                container.set('style','margin-top:'+navicoords.height+'px');
                //anti ios :)
                $$('.ios #container').set('style','margin-top:0');
            }
            else
            {
                var navpos = navi.removeClass('mod_customnav');
                container.set('style','margin-top:0');
            }
    
            //check position for matching with active status
            if((scroll.y + -navicoords.height+120) > containercoords.top)
            {
                $$('#navi a.button').removeClass('button');
                $$('li.arbeiten a').addClass('button');
            }
            else
            {
                $$('#navi a.button').removeClass('button');
                $$('li.container a').addClass('button');
            }
    
            if ((scroll.y+windowcoords.height-120) > profilcoords.top)
            {
                $$('#navi a.button').removeClass('button');
                $$('li.profil a').addClass('button');
            }
        });
    
        var mySmoothScroll = new Fx.SmoothScroll({
            links: 'a',
            wheelStops: false,
            offset: {
                x: 0,
                y: -navicoords.height
            }
        });
    
    
    })
    Meine aktuellen Projekte :
    http://sadhya.stephanmichel.de Contao Core (3.5.X) mit Contao Bootstrap (1.0.0)
    http://das6040.de Contao Core (3.5.X) mit Contao Bootstrap (1.0.0)

  15. #15
    Contao-Nutzer Avatar von stephangunnar
    Registriert seit
    12.11.2009.
    Ort
    Wiesbaden
    Beiträge
    187

    Standard

    Ich habe gerade selber eine hoffentlich saubere Lösung gefunden, indem ich der Klasse

    Code:
    .mod_customnav {
    z-index:10000;
    }
    mitgegeben habe, so ist sie immer im Vordergrund. Weitere Erklärung zu z-index, siehe http://de.selfhtml.org/css/eigenscha...ng.htm#z_index

    Würdet Ihr das auch so machen, oder gibt es noch eine bessere Lösung?
    Meine aktuellen Projekte :
    http://sadhya.stephanmichel.de Contao Core (3.5.X) mit Contao Bootstrap (1.0.0)
    http://das6040.de Contao Core (3.5.X) mit Contao Bootstrap (1.0.0)

  16. #16
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Hi, ja das kannst du so machen. Um den Z-Index zu benutzen musst du aber immer noch eine position Angabe machen. Also position:relative zum Beispiel.
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  17. #17
    Contao-Nutzer Avatar von sebi
    Registriert seit
    17.03.2012.
    Ort
    Kiel
    Beiträge
    154

    Standard

    Hallo Stefan,

    danke für diese super Anleitung, gefällt mir sehr!
    Konnte es auch auf mein Projekt umsetzen.

    Allerdings gibt es bei mir noch einen kleinen Fehler:
    Wenn ich die Seite lade und noch nicht gescrollt wurde und ich einen Link anklicke wird nicht smooth gescrollt, sondern hingesprungen (wie das so ein normaler Anchor halt macht). Die Navigation wird dann auch nicht oben angedockt und ist weg. Wenn ich dann scrolle erscheind die Navigation wieder und ist dann angedockt, also alles gut.

    Auf deiner Seite wird immer smooth gescrollt, auch beim ersten Seitenaufruf. Wie hast du das gemacht?

    Besten, vorweihnachtlichen Gruß,
    Sebi

    [Edit]
    PS: habe jetzt eine dirty Lösung gefunden, habe eine Seite als Interne Weiterleitung vor der eigentlichen Seite eingefügt, die auf die eigentliche Seite leitet. Dadurch klappt es auch beim ersten Aufruf... Vielleicht weißt du aber eine bessere Lösung.
    Geändert von sebi (21.12.2012 um 15:44 Uhr)

  18. #18
    Contao-Urgestein
    Registriert seit
    07.04.2010.
    Ort
    Stuttgart
    Beiträge
    2.733
    User beschenken
    Wunschliste

    Standard

    Ich habe da auch mal was kleines gebastelt um so etwas aus Artikeln automatisiert zu erstellen.
    Die History-Api ist leider noch nicht eingebaut, aber vielleicht hilft es ja trotzdem wem.

    https://github.com/psren/contao-magicArticleList

    Wenn ich euch helfen konnte könnt ihr euch gerne mal
    meine Amazon Wunschliste anschauen. Dankeschön.

  19. #19
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    der sagt mir bei dem JS im Wiki immer:

    Code:
    Uncaught TypeError: Object [object Window] has no method 'addEvent'
    wie darf ich das verstehen?

  20. #20
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    ohh, das lag wohl daran das ich mootools nachdem es in dem javascript bereich im Layout nicht funktioniert hatte wieder deaktivert hatte.

  21. #21
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    jetzt musste ich JQuery mit einbinden und hab das gleiche Problem wieder. Was kann ich machen das dies mit JQuery läuft außer einen anderen Slider zu verwenden?

  22. #22
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    nur für einen slider jQuery? oder nur für die spielerei mootools?
    egal wie rum, beides unnötig .

    entweder anderen slider, oder die docked Geschichte auf jQuery umbauen oder mit noconflict() arbeiten.
    vielleicht reichts auch, wenn du in dem js für die navigation alle $ durch document.id ersetzt. Aber nicht die $$.

    Gruß
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  23. #23
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    document.id hat ausgereicht vielen dank.
    mootools slider müsste ich leider erst bauen, da die fertigen contao erweiterungne leider alle nicht responsive sind, zumindest zur aktuellen contao version.

    ich hab 0 Ahnung von JQuery denkst du es lohnt sich für mich dies zu lernen und umzuschreiben um die paar kb zu sparen?

  24. #24
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    meld dich mal bei uns. wir haben da was (slider)
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  25. #25
    Contao-Fan
    Registriert seit
    22.12.2012.
    Beiträge
    325

    Standard

    wie meinst du das?

  26. #26
    Contao-Nutzer
    Registriert seit
    17.06.2014.
    Beiträge
    6

    Frage

    Hi!

    Danke für das Tutorial.

    Habs bei meiner Seite auch eingebaut.
    Eine Frage hätte ich noch:
    Wenn die Seite "drei"-geteilt ist und im Container in der Mitte der Text steht, rechts das "Docked Navigation"-Menü mitfährt, wie kann ich links auch so etwas mitfahren lassen?
    Welche Änderungen müsste ich am Skript durchführen?

    Hab versucht einen weiteren div-Container zu nutzen, aber leider erfolglos. Vielleicht könntest Du mir da weiterhelfen. Thx.

  27. #27
    Contao-Nutzer
    Registriert seit
    23.03.2017.
    Beiträge
    1

    Standard

    Hallo

    Gleich vorneweg ein dickes Sorry für meine Leichenschändung. Aber bevor ich einen neuen Thread erstelle, lasse ich lieber diesen Thread zu neuem Leben erwecken.

    Ich bin neu hier und auch neu mit Cantao CMS unterwegs.
    Habe vorher Jahrelang eigene HTML/CSS Webseiten geschrieben und irgendwann auf Wordpress umgestiegen.
    Wordpress war mir aber zuviel herumgewurschtel und hat mich einfach nicht überzeugt.

    Nun, ich bin sehr interessiert an dieser Möglichkeit für fixierte Headers.

    Gerne möchte ich aber auch ein Zwei Zeiler Menü haben falls Notwendig.
    Zbsp

    Home

    Anker 1 - Anker 2 - Anker 3

    und falls mal ein Untermenü keinen Anker benötigt wie Kontakt (Bestehend aus einem Satz und einem Kontaktformular) Dann bleibt die 2. Zeile entweder leer oder verschwindet.


    Ist dies Realisierbar? Leider hat Melzebub auf seiner Webseite: http://de.contaowiki.org/Docked_Navigation
    Nichts mehr weiter geschrieben zum Thema Anker.


    Ich könnte auch einfach 150€ investieren für ein fertiges Template dass genau meinen Vorstellungen entspricht. Aber selber erstellen macht halt mehr spass und fördert den Lerneffekt.


    Herzlichen Dank für Antworten.


    LG Rainer

  28. #28
    Contao-Fan Avatar von melzebub
    Registriert seit
    21.05.2010.
    Ort
    Lüneburg
    Beiträge
    292
    User beschenken
    Wunschliste

    Standard

    Zwar alter Kram. Aber mittlerweile einfach per CSS position:sticky und top:0 zu lösen .
    Contao Webentwickler / Webdesigner aus Lüneburg - slash-works.de
    kein Support per PN. Fragen gehören ins Forum.

  29. #29
    Contao-Nutzer Avatar von hinzke
    Registriert seit
    05.02.2014.
    Beiträge
    175
    Partner-ID
    10356
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Nices Tutorial

    Wäre vielleicht für die nicht so versierten User das:

    HTML-Code:
    <ul>
    	<li class="dienste"><a href="#top">Dienstleistungen</a></li>
    	<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
    	<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
    </ul>
    in das zu ändern:

    HTML-Code:
    <div id="navi">
    <ul>
    	<li class="dienste"><a href="#top">Dienstleistungen</a></li>
    	<li class="arbeiten"><a href="#arbeiten">Arbeitsbeispiele</a></li>
    	<li class="profil"><a href="#profil">Profil und Kontakt</a></li>
    </ul>
    </div>

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •