1 4 15 62 0 0 0

Mittels PHP, JavaScript und CSS eine weitere Navigation bauen

Ich komme nicht umhin, doch noch eine Navigation vorzustellen.
Die Hauptnavigation, wie ich aus dem selfhtml.wiki entnommen, bedarf einer ruhigen Cursorbewegung. Schnell ist man aus dem sensitiven Bereich gerutscht und muss neu ansetzen. Darauf bin ich bereits eingegangen. Der unschlagbare Vorteil ist: mit einem Klick ist man auch in der tiefsten Ebene. Da kommt keiner mehr, der sagen kann: mehr als drei Klicks zu irgend einem Inhalt ist „missbilligt“. Boah, da ist nur noch einer.

Nun denn, bis zu drei Klicks bedarf diese Naviagation und kommt erst einmal sehr herkömmlich daher. Die Übersichtlichkeit sollte aber keine Wünsche übrig lassen. Es wird nur angezeigt, was sich in einer Schicht befindet. Wenn ich sowas nicht mögen würde, käme es hier auch nicht vor!

Mit dem Formular wird erreicht, dass in eine alternative Navigation umgeschaltet wird. Mit Bestätigung durch den Submit-Button wird die Wahl ausgelöst. Natürlich nur wenn „an“ gewählt wird. Es wird auf der Hauptseite, der main.php das alternierende <nav id="altinav"> Element aktiv. Hier muss bestätigt werden, dass dies tatsächlich gewünscht wird und ob sich das Element nach jeder Verweisaktion an den Ursprungsort wieder begibt oder nicht. Die nochmalige Bestätigung stellt eine Hilfskrücke dar, die daherkommt wie Windows XP. Will man den Rechner ausschalten, wird man nochmal gefragt, ob man ausschalten will. „Bist Du doof! Ich werd doch noch wissen, was ich will.
Ich habe das aber nicht besser hinbekommen. Außerdem muss aus der alternativen Navigation auch wieder zurückgeschaltet werden können. Ich bin gerettet!
Nun zur Checkbox „Navi festhalten“ oder „Navi springt zurück“. Das <nav id="altinav"> Element kann neudeutsch gedraggt, also verschoben werden, weil es sonst über Inhalten liegt. Damit schneide ich wieder das Thema iFrame an, da die x-/y-Koordinaten an das Elternfenster geschickt werden und von dort wieder abgerufen werden können nach einer Linkbetätigung - wenn man will! Aber ich glaube, das nervt, wenn die Navigation immer wieder über Inhalte springt.
Damit stellt die Abfrage eine Demonstration dar, was passieren kann, wenn man nicht auf ein Elternfenster zurückgreifen kann.

Ja und noch etwas: Beide Navigationen können nicht so recht miteinander. In der Hauptnavigation erscheint denn auch der Hinweis dazu. Die Werte in den URL-Anhängen müssen etwas anders gestaltet sein. Also werden die Startbedingungen wieder gesetzt und zwar bei jeder „Bestätigen“-Aktion.
Zur Erklärung kommt nur die alternative Navigation nebst Verschiebbarkeit und nicht ein Umschalten. Wer will schon ernsthaft mit zwei Navigationen arbeiten!
Schluss der Laberei, sonst wird das hier noch Prosa!

Alles beginnt wieder mit dem Sammeln von Daten - wie beschrieben in PHP Auto-Verweise Linkbildung. Was sich unterscheidet, kommt hier. Es ist nicht viel, aber entscheidend.

Zum Vergleich des bereits Beschriebenen:

Beibehalten sind die dynamischen Variablen ${"arfi_gr$i"} und ${"arfi_n$i"}. Sie werden aber nicht nach ihren führenden Zahlenwerten [$pre] geordnet, sondern in ihrer Reihenfolge [$f] und erhalten andere Aufgaben. Darauf komme ich an den jenigen Stellen. Nun werden die Variablen
${"arfi_z$i"} (wird im URL-Anhang verarbeitet)
und ${"arfi_igr$i"} (Zuordnung einer Datei) benötigt
.
${"arfi_url$i"} muss notiert werden, wenn nur die alternative Navigation zur Anwendung kommt, um die Pfadangaben aufzunehmen. Sie wird aber erfasst, weil weiterhin alle Routinen für die Hauptnavigation im Hintergrund weiter arbeiten. Es sind also geringfügige Änderungen, aber mit großer Auswirkung.

Der Navigationsaufbau

Auskommentierte Erklärungen im Code erleichtern hier mal die Beschreibung der Datei altnavi.php.

Die Funktion wird von jeder gefundene Datei aufgerufen. Zwei Hinweise an dieser Stelle:
Die URL-Anhänge &a=$anav&m=$move werden nur für diese Dokumentation benötigt. $anav wenn 1 steht für die alternative Navigationsanzeige und $move wenn 1, dass die verschobene Position beibehalten wird. Ist diese als Einzige für die Navigation verantwortlich, entfallen diese Angaben. Darauf komme ich abschließend.
Das Verhalten der Variablen $elem wird davon abhängig gemacht, ob der Verweis getätigt wurde oder nicht (Link gedrückt oder nicht).

Soweit ist das meißte beschrieben. 55 bis 61: die Variable $ar_indir[] weiß am Ende der Schleife, wieviele Dateien zu einem Ordner gehören.

Das sieht nur kompliziert aus. Alle Dateien sind aufsteigend indiziert. Nun muss festgestellt werden, an welcher Stelle sie nach einem Ordner oder Unterordner nachgereicht werden. Gemeint sind natürlich die Links zu ihnen.

106: Die dynamische Variable steht für alle Dateien, bei denen kein Unterordner nach dem ersten Unterordner festgestellt werden konnte.
117: $listelem1 sind alle Dateien vor dem ersten Unterordner, somit Dateien mit den führenden Zahlen "01_###" bis "09_###" falls vorhanden.
121: $listelem2 sind die Dateien, die einem Unterordner angehören.
Von 124: bis 132: werden nun noch die Unterordner erfasst und die Endtags, Umbrüche usw. zugefügt.

Das wird jetzt alles zusammengefasst und für die Ausgabe vorbereitet.

Auszüge des Codes der main.php, die der alternativen Navigation dienen.

Die unsichtbaren Elemente 120 bis 122 zur Abspeicherung der jeweiligen Wertübergabe aus den Formularen zur Aktivierung der alternativen Navigation. (Also auch nicht für den Normalfall)

Die alternative Navigation wird aktiviert, wenn im Formular (am Seitenanfang) der Radiobutten „an“ gedrückt wird und im folgend aufgerufen freibeweglichen Navigationsfenster eine Bestätigung erfolgt.

Im JavaScript wird nun geregelt, welche Navigation den Benutzer führen soll. Die Alternative Navigation benötigt die Positionierung aus dem Elternfenster, bedingt durch jeden Neuaufbau der Seite bei Referenzierung.

Der beschriebene Code aus altnavi.php wird im <nav>-Element ausgegeben und startet mit onmousedown='dragstart(this)' die Dragfunktion. Mit der inkludierten Datei "../komponenten/altnavi.htx" wird lediglich das Formular zur Unterstützung der Positionierung und das Abschalten der Zusatznavigation an die Navigation angehängt. (Braucht also nicht erklärt zu werden.)

Nun folgt nur noch die Ausgabe der Datei für die Dragfunktionen. Diese ist in selfhtml.wiki beschrieben und mit der Weitergabe der Positionsdaten an das Elternfenster ergänzt.

Die zwei Zeilen 20 und 21 sind lediglich hinzugefügt.

Und das wars! Wenn noch die css-Datei interessiert? Na dann!

00
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/* alternative navigation */
#altnavi { background-color: rgba(255,255,205,0.8); font-family: arial;
  position: fixed; top: 10px; left: 0; min-width: 220px; max-width: 440px; height: auto; z-index: 5; 
  padding-top: 6px; padding-bottom: 10px; border-color: white #1d4653 #1d4653 white; 
  border-style: solid; border-width: 10px 4px 2px 2px; border-radius: 0px 1em 1em; 
 }
#olnavi { position: relative; left: 0; margin: 0; padding: 0 8px 0 0; }
#olnavi a { color: #255; font-size: 14px; text-decoration: none; font-family: arial; line-height: 100%; }
#olnavi a:link { color: #255; }
#olnavi a:visited { color: #1d4653;  }
#olnavi a:focus { color: #1d4653; }
#olnavi  a:hover { color: #ac0000;  }
#olnavi  a:active { color: #ac0000;  }
#olnavi .dir0 { font-size: 20px; margin-left: 3px; }
#olnavi .dir1 { font-size: 18px; margin-left: 6px; } 
#olnavi ol{ position: relative; left: 0; margin-top: 2px; margin-bottom: 0; 
  padding-top: 0; padding-bottom: 0; padding-left: 4px; list-style-type: none; }
#olnavi ol a:not([href]){ color: black; font-style: normal; text-transform: uppercase; 
  position: relative; left: 0px; margin-top: 0px; margin-bottom: 0; 
  padding-top: 0; padding-bottom: 0; padding-left: 0px; list-style-type: none; } 
#olnavi ol li { line-height: 80%;}
#olnavi li a:not([href]){ color: black; background-color: rgba(255,255,255,.4); text-transform: uppercase; 
  position: relative; margin-left: 8px; margin-top: 2px; margin-bottom: 0; padding-top: 0; 
  padding-bottom: 0; padding-left: 4px; padding-right: 4px; list-style-type: none; }
#olnavi li a { line-height: 100%; position: relative; margin-top: 0; margin-bottom: 0;
  padding-top: 0; padding-bottom: 0; padding-left: 4px; padding-right: 6px;  }
#olnavi ol li .link{ position: relative; left: 10px; margin-top: 0; margin-bottom: 0;
  margin-left: 4px; padding-top: 0; padding-bottom: 0; padding-left: 10px; }
#olnavi ol li .linkt{ font-style: normal; position: relative; left: 4px; margin-top: 2px; 
  margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-left: 10px; }
#olnavi li.dirlink{position: relative; left: 8px; margin-top: 2px; margin-bottom: 0; 
  padding-top: 0; padding-bottom: 0; padding-left: 4px }
#olnavi li.dirlinkt{ font-style: normal; position: relative; left: 0px; 
  margin-top: 2px; margin-bottom: 0; padding-top: 0; padding-bottom: 0; padding-left: 4px }



Dokument geändert am: 04. Jan. 2017 20:17