MagicLine Menü

Hallo,

ich würde gerne folgendes script für mein Menü verwenden.
http://css-tricks.com/examples/MagicLine/
Ich schaffe es gerade nur irgendwie nicht..

Könnte mir hier jemand helfen? Arbeite noch nicht so lange mit Contao und bin mir deshalb nicht sicher wie ich am besten vorgehen sollte.

Hallo Bastian,

als Tipp schau dir das tolle To-Do von Joe an: http://ck2013.may17.de/home.html

was genau meinst du da? das einbinden? mir ist durchaus klar wie man js einbindet.
Liege ich richtig in der Annahme das ich das Menü Template verändern muss damit das ganze funktioniert?

Da die "magic line" als zusätzliches Listenelement gebraucht wird, vermutlich schon.

danke genau das ist nämlich mein Problem ^^
habe das auch schon mal probiert aber wie gesagt arbeite ich noch nicht so lange mit Contao und mit PHP bin ich leider auch noch nicht so vertraut.

kann mir vielleicht jemand erklären wie ich das Problem in den Griff bekomme. (vielleicht kennt jemand auch ein anderes Script welches einen ähnlichen Effekt liefert)
würde mich aber trotzdem über eine kurze Einweisung freuen.

Naja das hat ja nichts mit Contao oder PHP an sich zu tun.
Du musst eigentlich nur das Javascript auf deine Bedürfnisse anpassen.

nunja .. in einer noncontao version funktioniert es ja schon.. mein problem ist nur wie binde ich es gültig in das template ein?

Klar du hast nun zwei Wege. Entweder du passt das Template an oder das Javascript. Das anpassen das Javascriptes macht wesentlich mehr Sinn da du dafür das Template nicht anpassen musst.

Hier mal ein kurzes Beispiel:

1. Vergib im Backend/Themes/Modules/DeinNavigationsModul die id meinenav

2. Im Script passt du jetzt die Zugriffe wie folgt an:

HTML-Code:

---


    <script>


        !(function($) {

            "use strict";

            // quick domready für jQuery

            $(function() {

                var $el, leftPos, newWidth;

                // Hier erstzen wir einfach den element query von #example-one durch #meinenav ul
                $("#meinenav ul").append("<li id='magic-line'></li>");

                /* Cache it */
                var $magicLine = $("#magic-line");

                $magicLine
                    // Hier tauschen wir . durch li.active aus
                        .width($("li.active").width())
                       
                        // Da Contao bei activen Elementen kein a tag verwendet sondern span müssen wir dies ebenfalls anpassen
                        .css("left", $("li.active span").position().left)
                        .data("origLeft", $magicLine.position().left)
                        .data("origWidth", $magicLine.width());
               
                // Auch hier müssen wir den query anpassen
                $("#meinenav ul a").hover(function() {
                    $el = $(this);
                    leftPos = $el.position().left;
                    newWidth = $el.parent().width();

                    $magicLine.stop().animate({
                        left: leftPos,
                        width: newWidth
                    });
                }, function() {
                    $magicLine.stop().animate({
                        left: $magicLine.data("origLeft"),
                        width: $magicLine.data("origWidth")
                    });
                });

            })

        })(jQuery);

    </script>

---

3. Jetzt musst du nur noch das Script z.b. über das Seitenlayout als j_ Datei einbinden.

Ich habe das jetzt nicht getestet sondern nur schnell überflogen aber ich denke das vorgehen ist recht klar.

Danke! Darauf hätte ich irgendwie auch kommen können ^^ naja war so versteift darauf das ich das template ändern muss das ich andere lösungswege außer acht gelassen habe...