Navigation wie bei docs.contao.org (gitbook)

**ok99** · 09.03.2017, 15:20

Hallo!
Dies ist nicht direkt eine Contao-Frage, aber vielleicht könnt ihr mir ja trotzdem helfen?

Ich möchte gerne eine Navigation haben, wie sie bspw. unter https://docs.contao.org/books/manual/3.5/de/ benutzt wird. Ich möchte aber kein komplettes Gitbook aufsetzen.
Mir geht es darum, dass ich auf der linken Seite eine feststehende (fixed) vertikale Navigation habe, die schon mal so lang sein kann, dass man scrollen muss.
Nun möchte ich, dass wenn man ziemlich weit unten in der Navigation ist und auf einen Link klickt, die jeweilige Seite geladen wird, die Navigation aber an dieser Stelle stehen bleibt. (Quasi wie früher bei einen Frameset).
Zur Zeit ist es so, dass bei einem Klick die komplette Seite geladen wird und die Navigation natürlich wieder von oben anfängt, man also wieder runter scrollen muss, um den eben angeklickten Navigationspunkt zu finden.
Ich hoffe ihr versteht mein Anliegen und könnt mir evtl. den entscheidenden Tipp geben. Gibt es da vielleicht ein Script oder eine andere Technik?

Ich habe schon gegoogelt wie ein Weltmeister, aber nichts gefunden .....

Vielen Dank vorab!

**Spooky** · 09.03.2017, 16:13

Naja, du musst die Inhalte halt einfach per AJAX laden lassen bspw.

**folkfreund** · 09.03.2017, 17:43

Falls du die Contao-Navi nicht auf Ajax umbauen willst (was vielleicht gar nicht soooo kompliziert ist), dann könntest du auch die Navigation per Javascript beim Laden der Seite so scrollen, dass der aktive Punkt im sichtbaren Bereich liegt. Eine ähnliche Scrollfunktion kommt ja bei OPWs zum Einsatz, nur dass dort der Inhalt gescrollt wird.

**ok99** · 17.03.2017, 11:00

Gute Ideen, aber ich stehe da noch etwas auf dem Schlauch, was die Umsetzung betrifft.

Hättet ihr da noch ein konkreten Anhaltspunkt? Link auf ein Beispiel, Tutorial oder Ähnliches?

Mir feht das richtige Stichwort, um fündig zu werden......

**folkfreund** · 17.03.2017, 20:45

Für meine Idee hier mal der Beispiel-Code:
HTML:

HTML-Code:

<div id="page">
 <div id="toc">
  <ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 4</li><li>Item 5</li>
    <li>Item 6</li><li>Item 7</li><li>Item 8</li><li>Item 9</li><li>Item 10</li>
    <li>Item 11</li><li>Item 12</li><li>Item 13</li><li>Item 14</li><li>Item 15</li>
    <li>Item 16</li><li>Item 17</li><li>Item 18</li><li>Item 19</li><li>Item 20</li>
    <li>Item 21</li><li>Item 22</li><li>Item 23</li><li>Item 24</li><li>Item 25</li>
    <li>Item 26</li><li>Item 27</li><li>Item 28</li><li>Item 29</li><li>Item 30</li>
    <li>Item 31</li><li>Item 32</li><li>Item 33</li><li>Item 34</li><li>Item 35</li>
    <li>Item 36</li><li>Item 37</li><li>Item 38</li><li>Item 39</li><li>Item 40</li>
    <li>Item 41</li><li>Item 42</li><li>Item 43</li><li>Item 44</li><li>Item 45</li>
    <li>Item 46</li><li>Item 47</li><li>Item 48</li><li>Item 49</li><li>Item 50</li>
    <li>Item 51</li><li>Item 52</li><li>Item 53</li><li>Item 54</li><li>Item 55</li>
    <li>Item 56</li><li>Item 57</li><li>Item 58</li><li>Item 59</li><li>Item 60</li>
    <li>Item 61</li><li>Item 62</li><li>Item 63</li><li>Item 64</li><li>Item 65</li>
    <li>Item 76</li><li>Item 77</li><li>Item 78</li><li>Item 79</li><li>Item 80</li>
    <li>Item 81</li><li>Item 82</li><li>Item 83</li><li>Item 84</li><li>Item 85</li>
    <li>Item 86</li><li>Item 87</li><li>Item 88</li><li>Item 89</li>
    <li class="active">Item 90</li>
    <li>Item 91</li><li>Item 92</li><li>Item 93</li><li>Item 94</li><li>Item 95</li>
    <li>Item 96</li><li>Item 97</li><li>Item 98</li><li>Item 99</li>
  </ul>
 </div>
 <div id="content">
  <p>
    Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
  </p>
  <p>
    Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten - man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks
  </p>
 </div>
</div>

CSS:

Code:

#page {
  position: relative;
  width: 100%;
  height: 100%;
}
#toc {
  background-color:#aaa;
  width: 200px;
  overflow-y: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}
#content {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 230px;
}
.active {
  color: #FF0;
}

Javascript:

Code:

$(document).ready(function() {
  var target = $( "#toc .active")
  $('#toc').animate({
    'scrollTop': $(target).offset().top
  }, 900);
});

Der Javascript-Code selektiert das aktive Element in der Navigation und scrollt dann das Inhaltsverzeichnis dahin.

Falls der Aufbau deiner Seite allerdings anders aussieht, dann musst du das entsprechend anpassen.

Viel Erfolg,
folkfreund