Kann man im CSS Gridraster die Sidebar per Anmimation von links nach rechts ändern?
Hallo,
wäre es irgendwie machbar per Mausklick mit :checked oder :target die Anordnung im Gridraster umzuändern und somit die Sidebar z.b. von links nach rechts zu verändern? Am Besten auch mit einer Animation.
Und welche Beachtung müsste man hier dem Befehl postion schenken?
1 Antwort
Wie du hier siehst, kann man Elemente im Grid betiteln (grid-area). Wenn du bspw. eine Checkbox davorsetzt oder die Elemente Links sind, die auf sich selbst verweisen (keine schöne Umsetzung, stattdessen mit JS Events zu arbeiten, die bei Klick Klassenattribute verändern, wäre angemessener), kannst du dir entsprechende Selektoren zusammenbauen, die die grid-area-Properties ändern.
Und welche Beachtung müsste man hier dem Befehl postion schenken?
Ein Element, welches sich generell nicht in die Gridstruktur einordnet (weil es bspw. absolut positioniert ist), wird es auch weiterhin nicht tun, wenn man das position-Property nicht entsprechend anpasst. Das sollte aber bereits beim Aufbauen des Grids auffallen.
Wie geschrieben, musst du direkt vor dem Container, der das Gridlayout nutzt, deine Checkbox (mit class-Attribut) platzieren. Dann kannst du dir einen Selektor wie diesen zusammenbauen:
.checkbox-class + .grid-container .sidebar {
// define default position ...
}
.checkbox-class:checked + .grid-container .sidebar {
// define new position ...
}
Ich habe das nun in etwa wie unten hineinkopiert hergestellt. Weißt du wie ich die Position der "checkbox" stellen muss, dass ich sie sich zur sidebar dazugehörig mitwandern lassen kann? Oder geht das nun nicht, da sie außerhalb des grid-containers lieg?
HTML
<input type="checkbox" class="checkbox-class">
<div class="grid-container">
<div class="sidebar">
Sidebar
</div>
<div class="middle">
Middle
</div>
<div class="end">
End
</div>
</div>
CSS
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
background-color: #b8b8ae;
}
.grid-container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 25% 25% 25%;
grid-template-rows: 90%;
border: 1px solid red;
margin: auto;
justify-content: center;
align-content: center;
}
.sidebar {
grid-column: 1 / 2;
grid-row: 1 / 2;
background-color: lightgreen;
border: 1px solid grey;
}
.middle {
grid-column: 2 / 3;
grid-row: 1 / 2;
background-color: lightskyblue;
border: 1px solid grey;
}
.end {
grid-column: 3 / 4;
grid-row: 1 / 2;
background-color: lightpink;
border: 1px solid grey;
}
.checkbox-class:checked + .grid-container .sidebar {
grid-column: 3 / 4;
}
.checkbox-class:checked + .grid-container .end {
grid-column: 1 / 2;
}
Die Checkbox muss auf jeden Fall vor dem Container bleiben, andernfalls funktioniert der Selektor nicht mehr. Somit bleibt dir leider nur die Möglichkeit, die Box absolut zu positionieren.
Dazu wirfst du alles in einen Container, an dem du die Checkbox relativ positionieren kannst.
<div class="wrapper">
<!-- checkbox, etc. ... -->
</div>
CSS:
.wrapper {
position: relative;
}
.checkbox-class {
left: 25%;
position: absolute;
top: 50px;
}
.checkbox-class:checked {
left: 75%;
}
Ein gutes responsives Verhalten wirst du nicht herstellen können, denn dazu müsstest du ja stets die korrekten y-Wert kennen, auf die du die Box schieben musst, wenn Sidebar, etc. umbrechen.
Wäre es machbar die checkbox in einer eigenen class (z.b. einer sidebar_navigation) vor dem Container unterzubringen? Oder fehlt dann der Bezug zum Container?
Ich denke, dass mir die checkbox in der Variante dann wirklich nicht hilft, da ich responsiv bleiben möchte.
Und eine andere Möglichkeit außer Javascript gibt es nicht?
Viele vielen dank für deine Hilfe schon einmal bis hier her? Wirklich spitze!!! :)
Nein. CSS-Selektoren können nicht rückwärtsgerichtet formuliert werden.
Der Zustand dieser Checkbox bspw.:
<div class="container">
<input class="checkbox" type="checkbox">
<div class="inner-container">
<div class="inner-inner-container"></div>
</div>
<div class="another-inner-container"></div>
</div>
<div class="another-container"></div>
kann nur mit inner-container, inner-inner-container oder another-inner-container kombiniert werden.
Die einzigen Optionen, die dir dann noch offenstehen, sind JavaScript oder du stellst das Markup bereits im Backend (mit PHP, o.ä.) richtig zusammen.
Ok, schade.
Achso, oben hast du noch geschrieben dass die Elemente links sein können.Würde man dann die neue Position der Sidebar mir dem Selector :target umsetzen können?
Ehrlich gesagt verstehe ich von PHP garnichts und JavaScript nur ein paar simple Dinge.
Ja, auch für die Checkbox ist mir noch die Möglichkeit eingefallen, mit einem label-Element auf diese zu verweisen.
Beispiel:
HTML:
<input id="my-checkbox" type="checkbox">
<p>Some text</p>
<label for="my-checkbox">Enable / Disable</label>
CSS:
#my-checkbox:checked p {
color: red;
}
Da das Label auf die Checkbox referenziert, kann auch der Klick auf das Label den Zustand der Box ändern.
Hallo,
das mit dem grid-area kannte ich auch, danke dennoch für den Tipp.
Ich habe mein Grid hiemrit deklariert:
...
...
Kennst du ein Beispiel, wie es mit einer checkbox so einen "Tausch" geben könnte? Ich würde gern auf JS verzichten.
Generell ist so ein Tausch ja gängig und vonnöten z.b. mit media queries.
Ich würde dies nur gern selbst steuern also auslösen.
LG