Vertikale Navigation in Squarespace
Vertikale Navigation auf Websites hat in den letzten Jahren an Popularität gewonnen. Es gibt viele Gründe, warum Du eine vertikale Navigation auf Deiner Website implementieren solltest. In diesem Blogpost werden wir uns ansehen, wie man die Navigation des Menüs einer Website von Squarespace vertikal macht. Hierzu benötigst Du Squarespace 7.1 und mindestens das Business Abo, da wir hierfür den Benutzerdefiniertes CSS Editor benötigen.
Warum vertikale Navigation?
Vertikale Navigation ist einfacher zu verwenden und ermöglicht es den Besuchern, schneller die gewünschten Informationen zu finden. Zudem kannst du deiner Website somit einen besonderen Touch geben.
Wie implementieren wir die Vertikale Navigation?
Das Layout des Website-Kopfbereichs auf die letzte Option, bzw. so setzen, dass die Navigationslinks unter dem Logo angezeigt werden.
Wir verwenden den CSS Editor von Squarespace um die Navigations-Links vertikal zu setzen
Wir werden das ganze in diesem Post so implementieren, dass die mobile Navigation hiervon nicht betroffen ist.
1. Layout des Kopfbereichs anpassen
Hierfür brauchst du noch kein CSS. Klicke auf den Website Kopfbereich im Squarespace Editor und wähle den Punkt Header:Layout aus. Wähle nun das Layout, welches Du auch im Bild sehen kannst.
2. Benutzerdefiniertes CSS
Füge nun folgenden Code in den Benutzerdefiniertes CSS Bereich unter Design ein.
.header-nav-list {
width: 130vh !important;
padding: 25px;
background: #E0E0DB;
position: fixed;
-webkit-transform:rotate(-90deg)translateX(-85%);
-webkit-transform-origin: top left;
left: 0px;
top: 0px;
}Doch was bedeuten die einzelnen Zeilen?
width: Hiermit setzen wir die Breite der Navigation. Dies bedeutet, dass die Navigation sich über die Gesamte Vertikale des Bildschirms erstreckt.
padding: Hier setzen wir das Padding um die Navigationslinks. Je nachdem wie breit du deine Navigation möchtest, kannnst du den Wert entweder höher oder kleiner setzen
background: hiermit setzen wir die Hintergrundfarbe des Menus. Diese kannst du beliebig wählen
position:Setzt das Menu als fixiert, was bedeutet, dass es auf dem Bildschirm bleibt, wenn der Benutzer die Seite scrollt.
-webkit-transform:rotate(-90deg)translateX(-85%): Rotiert das Menu um 90 Grad nach links und verschiebt es nach links um 85% seiner Breite. Somit setzen wir die Navigationslinks in die Mitte des Bildschirms.
-webkit-transform-origin: top left: Legt den Ursprungspunkt der Transformation auf die obere linke Ecke des Menus fest.
left: Setzt das Menu an die Linke Seite des Bildschirms
top: Setzt das padding nach oben auf 0px.
Wenn du alle Schritte richtig ausgeführt hast, ist deine Navigation jetzt vertikal!
