{"id":169,"date":"2010-08-26T19:37:06","date_gmt":"2010-08-26T17:37:06","guid":{"rendered":"http:\/\/www.media-deluxe.de\/blog\/?p=169"},"modified":"2016-04-20T06:19:15","modified_gmt":"2016-04-20T04:19:15","slug":"website-navigation-und-css-das-current-problem","status":"publish","type":"post","link":"https:\/\/www.media-deluxe.de\/blog\/2010\/08\/website-navigation-und-css-das-current-problem\/","title":{"rendered":"Website-Navigation und CSS: Das „Current-Problem“"},"content":{"rendered":"

Die Navigationsdarstellung von Websites profitiert oft davon, wenn die jeweils sichtbare Webseite im Navigationskontext angezeigt und visuell mitgeteilt wird, dass man sich auf ihr befindet:<\/p>\n

\"\"<\/p>\n

Da weder HTML noch CSS f\u00fcr diese Usability-Aufgabe eine standardisierte L\u00f6sung anbieten, hat sich bei Webdesignern eingeb\u00fcrgert, den Link der jeweils sichtbaren Seite mit der CSS ID „current“ zu versehen und in der CSS-Deklaration a#current besondere Farb- und Hover-Eigenschaften zuzuweisen. Problematisch dabei ist, dass die Auszeichnung des Links in automatischer Form nicht ganz einfach zu realisieren ist oder sie – aufw\u00e4ndig und fehlertr\u00e4chtig – h\u00e4ndisch erfolgen muss. Es existieren mehrere L\u00f6sungsans\u00e4tze f\u00fcr das Problem, mittels Javascript, Includes oder PHP, alle mit mehr oder weniger gro\u00dfen Nachteilen und oft recht gro\u00dfem Overhead. <\/p>\n

Ein weiterer L\u00f6sungsvorschlag<\/h3>\n

F\u00fcr das CMS eines meiner Kunden waren alle mir bekannten L\u00f6sungen unbrauchbar, und ich musste neue Wege suchen. Die dort nun realisierte L\u00f6sung skizziere ich hier; ich kann mir vorstellen, dass sie f\u00fcr viele Konstellationen die einfachste L\u00f6sung darstellt.<\/p>\n

1. Jede Webseite erh\u00e4lt eine eindeutige Identifikationsnummer<\/strong><\/p>\n

Je nach technischem Kontext bieten sich hierf\u00fcr beispielsweise fortlaufende Nummern an, das Erstellungsdatum, Pfad plus Dateinamen, jeweils eventuell als Hash bzw. als Kurz-URL. Diese Zuordnung der Identifikationsnummer kann manuell erfolgen oder dynamisch; in vielen Content Management Systemen lassen sich solche Nummern mit PHP \u00fcber vordefinierte Variablen aus der Datenbank holen, bei manchen CMS ist bereits der Dateiname eindeutig und kann als ID verwendet werden.<\/p>\n

2. Aus der Identifikationsnummer wird ein ID-Selektor<\/strong><\/p>\n

Diese CSS-Deklaration erfolgt in Form eines eingebetteten Stylesheets im Head-Bereich der Seite. Der ID-Selektor beschreibt die optische Ver\u00e4nderung, die der „current“ Link erhalten soll. Hier ein Beispiel f\u00fcr die Webseite mit der Identifikationsnummer nr002:<\/p>\n

<style type=“text\/css“><!– a#nr002 {color:#999;} \/\/–><\/style><\/p><\/blockquote>\n

3. Links werden mit den korrespondierenden ID-Selektoren versehen<\/strong><\/p>\n

<a id=“nr001″ href=“hosen.html“>Hosen<\/a>
\n<a id=“nr002″ href=“buecher.html“>B\u00fccher<\/a>
\n<a id=“nr003″ href=“tassen.html“>Tassen<\/a>
\n…<\/p><\/blockquote>\n

Zusammenfassung<\/h3>\n

Generell werden also bei dieser Methode Links mit eindeutigen Identifikationsnummern als IDs gekennzeichnet (z.B. <a id=“nr002″ …). Da diese Links nicht mehr weiter ver\u00e4ndert werden m\u00fcssen (kein id=“current“), k\u00f6nnen sie ohne Probleme durch das CMS erzeugt werden. Eine CSS-Deklaration (internes Stylesheet im Head) erfolgt nur im aktuellen Dokument f\u00fcr die ID des jeweiligen Dokuments (z.B. a#nr002 { color: #999; }). Es erfolgt keine zus\u00e4tzliche Deklaration der ID-Selektoren in externen Stylesheets, und die jeweils nicht als „current“ darzustellenden IDs sind nicht deklariert.<\/p>\n","protected":false},"excerpt":{"rendered":"

Die Navigationsdarstellung von Websites profitiert oft davon, wenn die jeweils sichtbare Webseite im Navigationskontext angezeigt und visuell mitgeteilt wird, dass man sich auf ihr befindet: Da weder HTML noch CSS f\u00fcr diese Usability-Aufgabe eine standardisierte L\u00f6sung anbieten, hat sich bei … Weiter…<\/a><\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,4],"tags":[69,28,23,24,27,160,25,68],"class_list":["post-169","post","type-post","status-publish","format-standard","hentry","category-usability","category-webdesign","tag-anleitung","tag-cascading-style-sheets","tag-css","tag-current","tag-ergonomie","tag-how-to","tag-html","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/comments?post=169"}],"version-history":[{"count":1,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions"}],"predecessor-version":[{"id":3935,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/posts\/169\/revisions\/3935"}],"wp:attachment":[{"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/media?parent=169"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/categories?post=169"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.media-deluxe.de\/blog\/wp-json\/wp\/v2\/tags?post=169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}