Die Breite der vertikalen Tab-Leiste anpassen

1. Was ist die vertikale Tab-Leiste?
2. Wie wird die Breite der Tab-Leiste definiert?
3. Beispiel für die Anpassung der Breite
4. Alternativen und flexible Layouts
5. Interaktive Änderung der Breite mit CSS-Variablen (optional)
6. Zusammenfassung

Was ist die vertikale Tab-Leiste?

Eine vertikale Tab-Leiste ist eine Benutzeroberfläche, in der die Tab-Navigation nicht horizontal oben, sondern vertikal an einer Seite (meist links) angeordnet ist. Diese Darstellung eignet sich besonders für Anwendungen mit vielen Optionen oder längeren Beschriftungen.

Wie wird die Breite der Tab-Leiste definiert?

Die Breite der vertikalen Tab-Leiste wird üblicherweise in CSS über die Eigenschaft width des entsprechenden Containers festgelegt. Meist ist das ein div-Element, das die Tab-Schaltflächen beinhaltet. Standardmäßig kann diese Breite in Pixeln (px), Prozent (%), em oder anderen CSS-Einheiten definiert werden.

Beispiel für die Anpassung der Breite

In folgendem Beispiel ist die vertikale Tab-Leiste in einem Container mit der Klasse tab-menu. Dort sehen Sie die CSS-Regel width: 200px;, die die Breite auf 200 Pixel festlegt. Um die Breite zu ändern, passen Sie diesen Wert einfach an:

Alternativen und flexible Layouts

Statt einer festen Pixelbreite kann die Breite auch prozentual definiert werden, z.B. width: 20%;, was sinnvoll ist, wenn die Tab-Leiste relativ zur Gesamtbreite des Containers skalieren soll. Ebenso könnten Sie min-width oder max-width verwenden, um eine Mindest- oder Maximalbreite zu definieren und trotzdem flexible Darstellung zu ermöglichen.

Interaktive Änderung der Breite mit CSS-Variablen (optional)

Wenn Sie die Breite dynamisch anpassen möchten, etwa durch Benutzerinteraktion oder Themes, können Sie CSS-Variablen verwenden:

Dann können Sie im CSS oder über JavaScript --tab-menu-width anpassen, um die Leiste dynamisch zu verändern.

Zusammenfassung

Die Breite der vertikalen Tab-Leiste wird vor allem über die CSS-Eigenschaft width des Containers definiert. Um die Breite anzupassen, ändern Sie einfach den Wert der width-Eigenschaft in Ihrem CSS. Dabei können feste Werte in Pixeln, prozentuale Werte oder CSS-Variablen genutzt werden, je nach gewünschter Flexibilität und Design.

Inhalt des ausgewählten Tabs erscheint hier.