# Funktion
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
ansatz
code
funktioniert beispiel
haufe
haus
http
liste
magazin
navigation
normalen ankern
oleander
problem
realisieren
riese
rolle
stern
tab
target
teil
url
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das nennt man Anker, #allgemein springt zum Beispiel zu dem Teil der Seite, wo du stehen hast:
<a name="allgemein"></a>
LG cookies -
Und wie geht das ganze mit, dass alles verdeckt ist, und erst der teil auftaucht, wenn man zB #haus klickt, dass ich dann id="haus" sichtbar macht ?
-
Es gibt verschiedene Anstöße so was zu realisieren. Wie das bei lima-city gemacht ist, weiß ich nicht genau, da das hier alles ein riesen großer Haufen Code ist...
Eine Möglichkeit wäre mit JavaScript und ggf. einem Framework wie den mootools zu arbeiten.
Dort setzt z.B. dieses Script an: http://stilbuero.de/jquery/tabs/#fragment-3
Allerdings wird mit NoScipt bei solchen Scripten schnell klar, wo das Problem liegt: Sie zeigen einfach nur eine Liste mit normalen Ankern an. Man kann zwar ohne Probleme die Seite noch erkennen, aber schnell ist ein Design durch so was zerstört und die usabillity lässt auch noch.
Schöner dagegen sind Lösungen, die auf reinem CSS und HTML aufbauen. Diese können z.B. auch Halbtextbrowser wie Dillo ohne Probleme anzeigen und können z.B. auch in HTML Mails benutzt werden, falls denn das gewünscht ist.
Ein interessant gelöster Ansatz findet sich hier.
Immer daran denken: Die Seite immer mal wieder in einem Textbrowser wie lynx anschauen und ggf. einen Screenreader zur Hilfe nehmen und den Aufbau überprüfen, ob alles noch schön geordert und somit möglichst barrierefrei ist.
lg
Oleander
Weiterführende Lektüre:
http://www.drweb.de/magazin/tab-interface-scripts/
http://www.hongkiat.com/blog/50-nice-clean-css-tab-based-navigation-scripts/
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
