:active Menüpunkte in der mobilen Ansicht

Nein eben nicht, das hatte ich ja schon erwähnt. Nimm das Entwicklertool Deines Browser an die Hand und schau Dir den Dokumentenaufbau an.

Es sind zwei Navis...

ganz in Ordnung ist das aber auch noch nicht. Wenn ich in der Deskop Ansicht auf deine Links klicke wird für ein Bruchteil das Mobilemenü geladen bevor er das Deskop Menü laden tut.

Im anderen Forum hatten wir auch mal probleme mit den skel Script ,das hatte da auch immer Fehler gemacht. Der Script Anbieter hatte wohl auch seid 3 Jahren keine Update mehr gemacht.

Aber das wahr nur nee Info am Rande die jetzt nicht mit dein Jetztiges Problem zu tun hat. Obwohl ja ein Menü reichen könnte

Zitat von stupsi01

Okay. Vielen Dank für eure Antworten. Wäre es denn als Alternative möglich, den style im HTML fix zu vergeben, sodass kein CSS und Script nötig ist?

Ohne css und js willst du den Code ändern ??

Wie willst du dann was ändern ? Nur mit html geht das wohl nicht.

Mit js ginge das relative schnell aber ohne und nur mit css müsste ich selber erst testen und kucken ,aber das ist zu warm . Mein Cpu zeigt schon 85 Grad an .Ist das zu viel ?

Bei der Desktop-Navi wird eine Server seitige Scriptsprache - vermutlich PHP . dafür sorgen, dass das entsprechende Item class="active" bekommt.

Das musst Du nur auf die mobile Navi adaptieren. Wie genau kann ich Dir nicht sagen, weil ich den PHP-Code nicht kenne.

Hallo und "Entschuldigung!" in die Runde. Ich weiß, man macht eigentlich keine Threads nach so langer Zeit wieder auf, aber lustigerweise nutze ich auch ein responsive Template basierend auf skel und bin seit Jahren sehr zufrieden damit.

Und ich steh auch schon seit geraumer Zeit an eben diesem Punkt, wie man im "collapsed menu", also dann wenn der media screen klein ist (das sog. "Burgermenü"), den aktuellen Menüpunkt hervorheben könnte. Ich hätte es zwar nicht rot sondern lieber in fett, aber es ist genau das selbe Problem. Entsprechend groß war meine Überraschung und Freude, diesen Thread gefunden zu haben!

Ich war mit meinen Nachforschungen schon so weit, dass ich die (vermutlich) richtige Stelle in skel-layers.js gefunden habe (bei mir ab Zeile 1900):

/**
* Builds a nav list using links from an existing nav.
* @arg1 {string} Existing nav's ID.
*/
case 'navList':
[...]

Doch ich musste aufgeben, da meine JS Skills zu mager sind und ich nicht wüsste, wie man in Abhängigkeit einer vorhandenen CSS class wie bspw. "current" oder "active", hier die entspr. Hervorhebungen reinkodiert. Auch meine Mail-Anfragen beim Autor (AJ) blieben erfolglos, da er sich um dieses alte Tool nicht mehr kümmert.

Mehr noch: Ich bin aktuell auf der Suche nach Tweaks, wie man diese NavList aufbauen könnte, so dass sämtliche sub und subsub usw. Menüs erst mal collapsed sind und nur beim drauftippen ausklappen. Derzeit werden nämlich sämtliche Menüpunkt inkl. aller Unterpunkte eingeblendet, was bei umfangreichen Menüs schnell unübersichtlich wird. (Bei breiten screens funktioniert es bei mir bestens, das Template nutzt dafür dropotron...)

Wenn ihr also noch Lust habt, Hirnschmalz in so alten Code und in so einen alten Thread zu stecken, wäre ich hochauf begeistert und dankbar!

VG
Christian

Hallo Christian,

keine Ahnung von diesem Skel aber ich habe da ein Javascript in der Schublade, das mit wenigen Zeilen den aktiven Link in der Nav hervor hebt:

        const url = document.location.href;
        document.querySelectorAll('#navigation li a').forEach(item => {
            if (url.includes(item.href)) {
                item.classList.add('active');
            }
        });

Möglicher Weise geht es damit schneller als es in Skel heraus zu suchen.

Danke Sempervivum.

Aber hilf mir mal bitte auf die Sprünge: Mit deinem Code werden doch alle list items, die ein href tag haben, der class "active" zugeordnet und somit alle hervorgehoben, nicht nur jenes Menü, in dem ich mich gerade befinde, oder?

Nein, ein wenig anders herum, ich erkläre es im Code:

        // Die URL, die der Browser gerade anzeigt:
        const url = document.location.href;
        // Über alle a-Tags, die in der Navigation liegen
        document.querySelectorAll('#navigation li a').forEach(item => {
            // item.href ist die URL in diesem a-Tag
            // Wir prüfen, ob diese in der URL, die gerade angezeigt wird,
            // enthalten ist:
            if (url.includes(item.href)) {
                // Das a-Tag gehört zu der angezeigten Seite,
                // wir fügen die Klasse "active" hinzu,
                // damit wir es mit CSS hervor heben können:
                item.classList.add('active');
            }
        });

Dann kannst Du mit CSS das Element hervor heben:

a.active {
    font-weight: bold;
}

Danke! Probier ich aus, sobald ich Zeit habe...