Navigationsleiste vertikal

Question

Hallo,

wir verwenden die Navigationsleiste inzwischen wirklich oft. Bei manchen Studien wird es leider relativ unübersichtlich, wenn die Anzahl der Kapital relativ groß ist oder die Kapitelnamel sehr lang sind.

Ich hatte mir überlegt, ob es nicht möglich wäre die Navigationsleiste auf der linken Seite von SoSci vertikal zu platzieren. Hat jemand schon einmal damit gearbeitet, Erfahrungen gesammel oder kann sogar einen Code dafür zur Verfügung stellen?

Viele Grüße

EDIT:

Ich habe einen ersten Versuch gemacht, die theoretisch schon in die Richtung geht, die ich mir Vorstelle:

<style>

        .container {
            position: relative;
            width: 900px;
            margin-left: 220px; /* Width of the navigation bar */
        }
        .NavButtons {
            position: fixed;
            top: 0;
            left: 5px;
            width: 150px;
            height: 50%;
            border-right: 2px solid #CCCCCC;
            padding: 20px 0;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
        }
        .buttonToPage {
            padding: 10px 20px;
            margin: 5px 0;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            cursor: pointer;
            text-align: left;
        }
        .currentPage {
            background-color: #d0e6f7;
        }
        .incomplete {
            background-color: #f7d0d0;
        }
        .content {
            padding: 20px;
        }
    </style>

Zwei Dinge fehlen allerdings noch:

• das dynamische Design, dass die Navigationsbar sich auf unterschiedliche Bildschirmgrößen anpasst

• Die Integration in PHP, also auf das PHP Script welches im SoSci Wiki beschrieben wird (momentan kopiere ich den CSS einfach zusätzlich auf eine Seite)

Answer 1

das dynamische Design, dass die Navigationsbar sich auf unterschiedliche Bildschirmgrößen anpasst

Da werden Sie um ein wenig Basteln mit CSS nicht umhin kommen.

Traditionell funktioniert es ganz gut, wenn man die komplette Breite der Seite mit zwei (vertikalen) DIV-Elementen füllt. Das linke für die Navigation, das rechte mit dem Fragebogen-Inhalt. So ähnlich ist das z.B. auf https://www.soscisurvey.de gemacht. Wenn Sie es flexibel halten möchten, verwenden Sie dafür flexbox.

Auf mobilen Geräten wollen Sie die Navigation dann vielleicht einfach ausblenden oder über ein Sandwich-Menu ein/ausblenden. Das ist ein wenig aufwändiger, aber dafür gibt es zahlreiche Tutorials im Internet.

momentan kopiere ich den CSS einfach zusätzlich auf eine Seite

Schreiben Sie den CSS-Code doch einfach direkt ins Layout. Die Alternative wäre die Funktion pageCSS(), die Sie auch bei den "PHP-Funktionen" unter Fragebogen zusammenstellen unterbringen könnten.

Comments

Ja, genau. So wie auf https://www.soscisurvey.de stelle ich mir das vor. Ich bin dran, sobald ich fertig bin schreibe ich es noch einmal hier im Forum. Dauert nur ein bisschen, da ich es immer nur zwischen meine eigentliche Arbeit reinschieben kann, da es ausnahmsweise noch keine Projektrelevanz hat :)

---

Ich habe jetzt einfach ein @media (min-width:1250px) vor den Code gesetzt und ins das Layout gesetzt. Bei Laptops etc. wird dann das vertikale Design angezeigt und bei Bildschirmen unter der min-width:1250px wird das preset Layout angezeigt. Wie finden Sie dieses Vorgehen im Gegensatz zu einem "reinen" dynamischen Design?

---

Absolut legitim. Wo das Optimum zwischen Falluntescheidungen (@media Queries) und dynamischen Elementen liegt, hängt stark vom konkreten Anwendungsfall ab. Bei Code, der über längere Zeit verwendet und gepflegt werden soll, muss man ein wenig darauf achten, dass man am Ende nicht jede Änderung an 5 verschiedenen Stellen (also z.B. für 5 verschiedene Breiten) einpflegen muss. In der Langzeitwartung sind Flex-Elemente daher ein wenig einfacher zu warten.