Navbar in Css und Html drehen?
Ich möchte die Navigationsleiste drehen, damit sie wie auf diesem Bild aussieht. Der Titel „SafenSound“ sollte in der oberen linken Ecke sein, die „Künstler“ sollten in der oberen rechten Ecke um 90 Grad gedreht sein, die „Info“ sollte in der unteren linken Ecke um -90 Grad gedreht sein und die „Tickets“ sollten wieder normal in der unteren rechten Ecke sein. Und ich möchte auch, dass die Navigationsleiste fixiert wird, damit die Navigationsleiste beim Scrollen immer noch da ist
Derzeit sieht mein CSS so aus:
.StartseiteNav{
position:fixed;
}
.ArtistsNav{
position:fixed;
display:block;
width: 60px;
transform: rotate(90deg);
}
.InfoNav{
position:fixed;
display:block;
width: 60px;
transform: rotate(-90deg);
}
.TicketsNav{
position:fixed;
}
2 Antworten
Mit den Properties top, left, right und bottom kannst du die Elemente positionieren. Gleiche Properties würde ich im Übrigen zusammenfassen.
Beispiel:
HTML:
<span class="nav nav-start-page">Startseite</span>
<span class="nav nav-artists">Artists</span>
<span class="nav nav-info">Info</span>
CSS:
.nav {
position: fixed;
}
.nav-artists {
bottom: 1.5em;
right: 0;
transform: rotate(90deg);
}
.nav-info {
bottom: 1em;
transform: rotate(-90deg);
}
.StartseiteNav {
position: fixed;
transform: rotate(-90deg);
}
.ArtistsNav {
position: fixed;
transform: rotate(90deg);
}
.InfoNav {
position: fixed;
transform: rotate(-90deg);
}
.TicketsNav {
position: fixed;
}
<nav class="navbar">
<a class="StartseiteNav" href="#">SafenSound</a>
<a class="ArtistsNav" href="#">Künstler</a>
<a class="InfoNav" href="#">Info</a>
<a class="TicketsNav" href="#">Tickets</a>
</nav>