HOME

Auf diesen Seiten wird CSS3 Flexbox genutzt. Es gibt 3 verschiedenen layout.css Dateien, in denen nur einige wenige Anweisungen stehen, um das Layout der Seite zu bestimmen. Das schöne ist das auf Bildschirmgrößen reagierende Verhalten der Flex Items, responsive (reagierend, beantwortend).

Eine weitere Besonderheit dieses Beispiels ist, die Auslagerung des Menüs. Das Menü wird in eine Datei mit Endung inc geschrieben. Auf den einzelnen PHP Seiten wird es mittels PHP include Befehl eingefügt.

Im Menü, welches als Codeschnipsel eingebunden ist, wird der Menüpunkt, der zur aktuell geöffneten Seite gehört hervorgehoben. Da aber alle Seiten das gleiche Menü einbinden, muss in irgendeiner Form der aktuelle Menüpunkt eine Information über die geöffnete Seite erhalten.

Das li Element wird mittels CSS hervorgehoben. Der angewandte Selektor ist die Pseudoklasse nth-child(). Hierbei die Stelle der Reihenfolge in der Liste eingegeben. Diese Zahl wird per PHP echo Befehl in die Style Anweisung geschrieben. Um welche Zahl es sich handelt, könnte man direkt auf der Seite zuweisen, aber wenn sich die Reihenfolge der Seiten ändert, müssten auf allen Seiten auch diese Zahl aktualisiert werden, deshalb habe ich mich entschieden die Zahl im Menü als URL Parameter anzuhängen und auf den Seiten zu empfangen.

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.