Alle Menü-Hover gleichzeitig aktiv

Zu gekauften Themes können wir dir hier nicht weiterhelfen, weil sie uns nicht für Tests zur Verfügung stehen. Wie lautet denn die URL der Links auf deinem Onepager?

Mir ging es eigentlich auch mehr darum, dass du dir nochmal die Links anschaust.
Ob „nur die ID eingetragen“ die optimale Lösung ist? Vermutlich hast du Datenschutzterklärung und Impressum auf eigenen Seiten, von denen dann das Hauptmenü nicht funktioniert.

Und nun?

WordPress fügt dem Menüeintrag einer aktuell angezeigten Seite eine CSS-Klasse current-menu-item hinzu, wobei nicht unterschieden wird zwischen https://example.com/about-us, htts://example.com/about-us#section-one und htts://example.com/about-us#footer – alle drei bekommen die CSS-Klasse current-menu-item zugewiesen und werden je nach CSS-Regeln optisch hervorgehoben.

Wenn du möchtest, dass nur der Link des zuletzt aufgerufenen Ankers hervorgehoben wird, musst du dem Menüeintrag beim Anklicken eine eigene CSS-Klasse zufügen. Ich habe das auf meiner Seite mit jQuery gelöst:

jQuery( document ).ready( function( $ ) {
	// On Click
	$( 'a[href*="#"]' ).on( 'click', function( e ){
		const linktHref = this.href.split( '#' );
		const href = $( '#' + linktHref[1] );

		toggleClass( this );

		/*
		 * Smooth scroll animation
		 */
		$( 'html, body' ).animate( {
			scrollTop: $( href ).offset().top
		}, 'slow', 'linear' );
		e.preventDefault();
	} );

	// Scroll Animation
	$( function () {
		// Set our scroll state after dom ready
		$( window ).scroll();
	} );

	$( window ).scroll( function() {
		// Get the current vertical position of the scroll bar
		const position = $( this ).scrollTop();
		const offset = 150;

		$( '#top-menu a[href*="#"]' ).each( function () {
			const menuItem = this.href.split( '#' );
			const menuHref = '#' + menuItem[1];
			const target = $( menuHref ).offset().top;
			if ( position >= target - offset ) toggleClass( this );
		} );
	});

	/*
	 * Remove class .active from links,
	 * than reapply to clicked menu item
	 */
	function toggleClass( node ) {
		$( '#top-menu a[href*="#"]' ).removeClass( 'active' );
		$( node ).addClass( 'active' );
	}

} );

Hallo Sigi,

ich habe das jetzt mit ein paar kleinen Änderungen in ein Plugin gepackt, dass du dir hier herunterladen kannst:

https://github.com/pixolin/onepager-highlight/archive/master.zip

Bitte lies dir vor Installation die Anleitung durch. Evtl. willst du in Design > Customizer > Zusätzliches CSS noch hinzufügen:

.main-navigation li.current-menu-initial.current-menu-item a {
    background: none;
    color: #444444;
}

In diesem Fall der Link „Testseite“. Dadurch wird nun die Schrift des Linkes „Testseite“, aber auch die zu den beiden Ankern, also „Testsprung“ und „Testsprung1“ rot angezeigt.

Richtig, es werden ja auch alle drei Links aktuell angezeigt. Wenn du das nicht möchtest, setzt du die Farbe auf den Farbwert der übrigen Menüeinträge:

.main-navigation li.current-menu-initial.current-menu-item a {
    background: none;
    color: #444444;
}

Richtig wäre aber hier, das nur „Testseite“ in roter Schrift angezeigt werden darf.
Das ist ein zusätzliches Feature, das ich noch einfügen kann. Muss mal schauen, wann ich dazu komme.

Dein Theme verwendet außerdem eine Style-Regel für .current-page-item, um den Link https://example.com/testseite (also ohne Anker) farbig zu hinterlegen. Das müsstest du mit einer eigenen CSS-Regel aufheben:

.main-navigation ul li.current_page_item a {
  background: none;
  color: #444444
}

(Fügst du statt dessen einen individuellen Link https://example.com/testseite# ein, brauchst du keine zusätzliche CSS-Regel. Ich verstehe aber auch nicht ganz den Sinn, zusätzlich zu den Links der Seitenabschnitte auch noch den Link zur Seite einzufügen.)

Wenn wir es jetzt „richtig“ machen wollen, fügst du unter Issues noch eine kurze Problem-Beschreibung ein, z.B. „Bei Aufruf der Seite soll nur der erste Link mit Status .current-menu-item hervorgehoben werden.“ … nur wenn du magst. 🙂

Wenn du eine Seite mit der Titelform (Slug) testseite hast und auf einen Anker start verlinken möchtest, ist der richtige Link
https://example.com/testseite#start

Wenn du auf den Anfang der Seite verlinken möchtest, kannst du auch einen leeren Anker verwenden:
https://example.com/testseite#

(Nachtrag: Je nach Permalink-Einstellungen ändert WordPress den Link in z.B. https://example.com/testseite/#start – das war mir bisher nicht bewusst, macht aber Sinn.)

Ich schau mir das andere Problem noch an, vielen Dank für den „Issue-Report“ auf GitHub. Wenn’s fertig ist, melde ich mich hier im Forum.

• Diese Antwort wurde geändert vor 5 Jahren, 7 Monaten von Bego Mario Garde. Grund: Nachtrag