Data Attribute einem Menüpunkt zuweisen

    Hallo zusammen,


    ich erstelle gerade wieder eine Seite mit UIKIT und bin fast fertig. Ich habe auf meiner Home-Seite ganz unten eine Galerie (Immer nur 16 Bilder). Ich will diese nicht auf eine unterseite machen und habe daher im Menü einen "Externen link" mit einem Anker versehen "#galerie". Das Funktioniert auch. Bei Klick springt die Seite runter zur Galerie. Im UIKIT gibt es die Funktion Smoothscroll. Diese würde ich gerne Nutzen und dem Link ein Data-Attribute hinzufügen. Das gibt die Standardeinstellung aber nicht her. Lediglich ein Titel-Attribute kann hinterlegt werden. Hat ggf. jemand eine Idee wie ich das umsetzen kann?


    Im Voraus besten Dank!
    Loschdi

  • Zum hilfreichsten Beitrag springen

    Hallo,


    das geht am einfachsten über Javascript. Trage in deine theme.js folgendes ein:


    JavaScript
    jQuery(function($) {
// nach var config = ...
    $('a.toAnchor').each(function(){
        $(this).attr('data-uk-smooth-scroll');
    });
});


    Sobald du jetzt einem LINK die Klasse 'toAnchor' gibst wird das Data-Attribut eingefügt.
    Im Menü machst du das bei Linktyp -> CSS-Style für Link.


    Gruß

    Danke für den Tipp. Habe es umgesetzt. Link bekommt die korrekte Klasse. Das habe ich überprüft. Script habe ich einmal in einer externen JS-Datei laden lassen und alternativ direkt als Script im Head getestet. Beides klappt nicht. Springt direkt zum Container. Seite ist noch Lokal. Sonst hätte ich den Link gepostet. Rechtschreibung habe ich auch schon kontrolliert. Eine Idee was ich noch testen könnte? In der Console vom Firebug zeigt er auch keinen Fehler?


    *Update*
    Beim nochmal lesen ist mir aufgefallen das im JS von dir "nach var" drin steht. Ich hatte keine theme.js. Muss ich daher nochmal etwas beachten?

    Vielen Dank! Das wars. Wenn ich JS sehe ist mir eigentlich immer klar was es bewirken soll. Eigentlich sieht es auch einfach aus. Muss mich glaube ich doch mal damit beschäftigen. Damit ist man noch viel flexibler beim Layouten! Langsam sind HTML und CSS einfach nicht mehr ausreichend ;)