Verwenden der semantischen Benutzeroberfläche zum Erstellen eines Web-App-Layouts mit seitlicher Navigation, fester Kopf ⇐ HTML

[Anonymous]

Ich versuche, mithilfe der semantischen Benutzeroberfläche ein bestimmtes Site-Layout für eine Webanwendung zu erstellen, und bekomme es aus irgendeinem Grund nicht herunter.

Das Layout besteht aus den folgenden Teilen:

Seitenleiste (schmale Seitenleiste mit einem Menüsymbol oben zum Verbreitern/Schmalen), zusätzlich Symbole für die Hauptbereiche der Website. Wenn auf das Menüsymbol geklickt wird, wird die Seitenleiste breiter, Beschriftungen erscheinen in der Nähe von Symbolen und alles rechts wird verschoben über).

Hauptkopfzeile (Dies ist im Grunde ein semantisches UI-Menü mit einem Logo als erstem Element)

Unterkopfzeile (Dies ist eine weitere horizontale Leiste, die Text und Aktionssymbole anzeigt, ich schätze, ich kann das Menü wieder verwenden)

Inhalt (hier wird der eigentliche Inhalt hingelegt, wird das Einzige sein, was scrollbar ist, der Rest der Seite sollte nie scrollen).

Fußzeile (dies wird unten auf der Seite behoben, wahrscheinlich kann wieder das Menü verwendet werden)

Siehe Bild:



Ich habe viel Zeit damit verbracht, dieses Layout mit der Semantic UI-Dokumentation zu erstellen, und es gelingt mir nicht Finde es heraus. Ich bin versucht, auf die Verwendung der semantischen Benutzeroberfläche für das Site-Layout zu verzichten, aber ich liebe die Seitenleistenfunktionalität.