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.
MagicLine Menü
Zitieren
Lesezeichen