[CSS] Dynamisches Inhaltsverzeichnis

Wir sammeln alle Infos der Bonusepisode von Pokémon Karmesin und Purpur für euch!

Zu der Infoseite von „Die Mo-Mo-Manie“

    Hallo,


    Ich arbeite gerade an einer Homepage für ein Projekt von mir.
    Das Design selbst geht soweit eigentlich gut voran (und würde auch schnell fertig sein, würd ich mich mal ordentlich hinsetzen, um es fertig zu machen), aber ich möchte ein paar "Spielereien" einbinden und bei einer davon bin ich mir nicht sicher, wie ich es bewerkstelligen soll.


    Es geht darum, dass ich eine Tutorialseite mache und die einzelnen Kapitel in den Tutorials in mehrere Teile unterteilt sind.
    Jetzt möchte ich dem User der Seite eine Möglichkeit geben zum einen immer eine Übersicht zu haben, in welchem Teil er ist, zum anderen auch direkt in den nächsten Teil zu springen. Ein Kapitel soll aber eine HTM Seite sein, es geht also um das Springen und das Erkennen des aktuellen Punktes in dieser HTML Seite.


    Ich hab mir das in etwa so vorgestellt:


    Andere Vorschläge, die das Problem lösen würden, sind aber auch willkommen.


    Während ich mit Designs und dergleichen eigentlich recht viel Erfahrung habe, hab ich bisher leider kaum mit dynamischen Elementen und Abfragen gearbeitet und weiß gar nicht, wie ich daran gehen soll ^^"


    Hilfe wäre willkommen.

    da wirst du wohl auf JS zurück greifen müssen in dem du die Scrollposition ausliest (wenn ich es richtig verstanden hab und du vorhast alle Kapitel in eine Seite zu packen)


    das hier könnte helfen, hab es jetzt aber auch nur kurz überflogen:
    http://www.ajaxschmiede.de/jav…n-in-javascript-auslesen/


    Den Pfeil/die Markierung kannst du dann auch über JS ändern, die Eigenschaft innerHTML wäre da eine gute Möglichkeit und die Verlinkung könntest du mit Ankern lösen, falls du das nicht schon geregelt hast.


    Ich hoffe das konnte dir etwas weiterhelfen...

    CSS
    position: fixed;


    als CSS-Eigenschaft sollte da weiter helfen, wenn du es immer an der Seite kleben haben willst und mit wandern soll (float damit es erst mal an die reste Seite geklebt wird)

    ich würde mir an deiner Stelle jquery anschaun, da hast du für das was du vorhast relativ gute Möglichkeiten und es macht das arbeiten mit javascript ein bisschen komfortabler. Die Verlinkungen in deinem html inhalt kannst du gut <a> anchor tags lösen, denen du einfach eine id zuweist, dann kannst du diese als Sprungmarken innerhalb der Seite verwenden, oder falls du jquery verwendest schau dir mal die scroll properties und die animate funktion an, damit kannst du relativ leicht einen netten scroll effekt produzieren.
    Ich weiß nicht inwieweit du mit javascript überhaupt vertraut bist, nur mit html und css wirst du zumindest das öffnen der menüleiste bei bedarf nicht hinbekommen.
    Die Tutorials unter jquery "how to get started with jquery" sind allerdings relativ leicht verständlich.
    Position fixed kannst du machen, es funktioniert nur in einigen älteren oder exotischen browsern nicht. position:absolute sollte aber auch gehen, solang deine Seite an sich keinen übergroßen Inhaltsbereich hat.
    Das Fenster mit dem Inhaltsverzeichnis machst du am als <div> und bettest darin eine <ul> ein. Das Ding kannst du per css

    Code
    display:none


    setzen damit es nicht direkt angezeigt wird und dann bei Bedarf auf Knopfdruck sichtbar machen. (die jquery funktion fadein ist dafür z.B. ganz nett).


    ich hoffe das hilft dir etwas

    Zitat von Trazyn

    ich hoffe das hilft dir etwas


    Ja, das Hilft tatsächlich. Auf die Sache mit den Ankern komme ich nie. *lol* Ich weiß, es ist dumm, aber ich vergesse ständig, dass es diese Funktion gibt.


    Jquery ist eine Idee. Habe bisher zwar nur mit JScript gearbeitet, aber query sollte nicht so anders sein...


    Großen Dank!