Ankerlink-Parameter in Adresszeile ausblenden?

[GeneralMops]

Hallo allerseits,

ich habe eine Frage, die sich ein Stück weit um Responsive Webdesign dreht aber im Kern vermutlich eher unabhängig davon ist. Nun zur Sache...

Prinzipiell möchte ich meine Website gern responsiv aufbauen. Zu diesem Zweck habe ich Bootstrap (3.3.7) verwendet. Das klappt auch gut. Außerdem verwende ich auch die DJ-MediaTools. Hierbei handelt es sich um ein Joomla-Plugin, um schicke Diashows, Galerien usw. darzustellen.

Und hier beginnen die Probleme: Eins von beiden funktioniert wunderbar - also entweder die MediaTools oder Bootstrap. Beides zusammen kommt sich in die Quere. Das Problem sind Javascriptressourcen. Ich habe eine ganze Weile daran herumprobiert, um einen "Scriptkonsens" zu finden. Doch kürzlich gab ich es auf und suchte stattdessen nach Alternativen. Soviel zur Vorgeschichte. 😉

Bei meinen Recherchen stieß ich auf den CSS-Klassen-Selektor :target, der mir wie gerufen schien, sollte man damit doch ein responsives Navigationsmenü ganz ohne Javascript realisieren können. Hierzu gibt es auch ein interessantes Beispiel (Link: https://dbushell.com/Responsive-Off-Canvas-Menu/step1.html). Das funktioniert auch hervorragend. Mit einem deutlichen Haken in der MOBILE-Ansicht (bzw. schmalem Browserfenster): Sobald man das Menü aktiviert, löst man einen Ankerlink aus (der öffnet das Menü gleichzeitig). Und damit wird der Ankerlink als Parameter an die originale URL (siehe Adresszeile im Browser) angehängt.

Technisch gesehen ist das natürlich alles korrekt. Aber es ist unkomfortabel. Warum? Wenn jemand draufklickt oder "toucht" und anschließend ein Bookmark setzt, wird der Ankerparameter ebenfalls mit gebookmarked, was irgendwie doof ist.

Meine Frage an euch: Wie kann ich den Ankerlink (als Parameter) von der Anzeige in der Adresszeile (Browseranzeige: URL) ausschließen? Gehen muss das irgendwie, das habe ich hier (http://www.nichols.edu/) gesehen. Allem Anschein nach wird dort ein recht ähnliches Verfahren (mittels :target) verwendet. Wenn man dort aber auf das Menü klickt wird kein Ankerlinkparameter an die URL angefügt. Wie geht das? Ich durchforste die zuletzt verlinkte Website bereits, konnte es aber noch nicht herausfinden. Vielleicht habt Ihr ja eine Idee?

Cheers, Mops

[Julius]

Hallo GeneralMops,

Meine Frage an euch: Wie kann ich den Ankerlink (als Parameter) von der Anzeige in der Adresszeile (Browseranzeige: URL) ausschließen?

Gar nicht. Wo kämen wir denn hin, wenn jeder die URL in der Adressleiste des Browsers manipulieren könnte 😀

Gehen muss das irgendwie, das habe ich hier (http://www.nichols.edu/) gesehen.

Dort kommt ein anderes Verfahren zum Tragen: Das Menü wird mit JavaScript ausgeklappt, daher siehst du keinen Fragment-Identifizierer in der URL. Wenn du JavaScript abschaltest, hingegen schon, weil dann :target als Fallback greift (die entsprechende Stelle hattest du wohl im Quelltext gefunden).

Dieses Vorgehen nennt man Progressive enhancement die Grundfunktionalität des Menüs ist auch ohne JavaScript (ja sogar ohne CSS) gewährleistet, der Komfort kommt durch den Einsatz von JS (kein Fragment-Identifizierer in der URL).

Gruß
Julius

[GeneralMops]

Ahja... danke für die Aufklärung.

[Auge]

Hallo

Sobald man das Menü aktiviert, löst man einen Ankerlink aus (der öffnet das Menü gleichzeitig). Und damit wird der Ankerlink als Parameter an die originale URL (siehe Adresszeile im Browser) angehängt.

Technisch gesehen ist das natürlich alles korrekt. Aber es ist unkomfortabel. Warum? Wenn jemand draufklickt oder "toucht" und anschließend ein Bookmark setzt, wird der Ankerparameter ebenfalls mit gebookmarked, was irgendwie doof ist.

Ob dieses Verhalten doof ist, kommt auf den konkreten Fall an. Bei einer „normalen“ seiteninternen Navigation ermöglicht das Fragment/der Hash am Ende der URL das explizite Verlinken von Seitenabschnitten. Das ist im Normalfall so gewollt.

Bei einer Navigation, die mit einem Fragment auf- bzw. zugeklappt wird, sieht das anders aus. Das Menü muss bei einem Seitenaufruf aus einer weitergegebenen URL heraus im Normalfall nicht geöffnet werden. Bei einer von mir in eine Seite eingebaute Navigation nach diesem System, in der ausschließlich zu anderen Seiten verlinkt wird, habe ich die folgende, JS-basierte Lösung eingebaut.

Der Gedankengang war folgender: Wird aus der Navigation heraus eine neue Seite aufgerufen, bin ich das Fragment zum öffnen der Navigation los. Ich brauche also nur eine Lösung für den Fall, dass die Navigation ohne Seitenaufruf geschlossen wird. Dazu habe ich am Ende der Navigation einen passenden Link mit dem Ziel #top eingebaut. Dadurch ändert sich der Hash, was ich mit einem Eventlistener, der eine Funktion aufruft, prüfe. Heißt der Hash „#top“, wird er aus der URL entfernt.

function removeHash() {
	var locHash = window.location.hash;
	if (locHash === '#top') {
		history.replaceState("", document.title, window.location.pathname + window.location.search);
	}
}

window.addEventListener("hashchange", removeHash);

Das Fragment/der Hash zum Aufklappen der Navigation wird also durch den Linkaufruf mit „#top“ überschrieben und „#top“ selbst wird aus der URL entfernt. Das ist eine auch nur mit JS funktionierende Lösung für ein mMn allerdings auch nur kosmetisches Problem.

Tschö, Auge

[GeneralMops]

Hallo Auge,

vielen Dank für deine Überlegungen. Irgendwo hatte ich mal bei Stackoverflow gelesen, dass es Probleme mit der history-Funktion geben kann. Weiß aber leider nicht mehr wo bzw. was genau das war... Deshalb habe ich einen Tipp bekommen und jetzt Folgendes gemacht: Zunächst einmal ist das ganze als Fallbackmethode konzipiert, soll heißen, wenn JS nicht aktiviert ist, greift die Fallbacklösung mittels normalem Ankerlink-Parameter (von dir als "Hash" bezeichnet). Sofern JS aktiviert ist, verwende ich nun folgendes jQuery-Script:

$('html').removeClass('no-js');
$(document).ready(function() {
  $('.nav-btn').click(function(e) {
    $(this).text($(this).text() == 'Menue' ? 'Schliessen' : 'Menue');
    $('#nav').toggleClass('menu_active');
	e.preventDefault();
  });
  $('.menu a').click(function() {
    $('#nav').removeClass('menu_active');
    $('.nav-btn').text('Menue');
  });
});

Das funktioniert super. 😉

Cheers, Mops

[Auge]

Hallo

vielen Dank für deine Überlegungen. Irgendwo hatte ich mal bei Stackoverflow gelesen, dass es Probleme mit der history-Funktion geben kann. Weiß aber leider nicht mehr wo bzw. was genau das war...

Ich vermute, dass eine weitere Frage „wann das war“ lautet. Laut caniuse.com wird die Funktion seit einigen Jahren breit unterstützt. Abseits des Opera Mini wurden die letzten Browser, die das nicht unterstützten, 2011 und 2012 veröffentlicht und die beiden unter „Known issues“ aufgeführten Punkte sollten auf deinen Fall auch nicht zutreffen.

Deshalb habe ich … jetzt Folgendes gemacht: …

Wenn du denn eine andere funktionierende Lösung hast … aber vielleicht hilft es ja jemand Anderem.

Tschö, Auge