Ich habe ein HTML, CSS und Java Script Problem. Kann mir wer helfen?
Guten Tag,
Ich bin momentan dabei mir eine Webseite zu erstellen. Auf der Webseite habe ich einen Button der beim betätigen eine Sidebar öffnet. Wenn man aber die Webseite öffnet ist die Sidebar schon geöffnet, aber ich möchte das man zuerst auf den Button drücken muss und beim betreten der Webseite die Sidebar geschlossen ist.
Vielen Dank im Voraus!
2 Antworten
In diesem Code von mir ist die Sidebar standardmäßig geschlossen (da ihre Breite auf 0 gesetzt ist). Wenn der Button geklickt wird, wird die Breite der Sidebar auf 250px gesetzt, was sie sichtbar macht. Vielleicht war es das was du gesucht hast.
<!DOCTYPE html>
<html>
<head>
<style>
/* Die Sidebar ist standardmäßig geschlossen (width: 0) */
.sidebar {
width: 0;
position: fixed;
z-index: 1;
left: 0;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
</style>
</head>
<body>
<div id="mySidebar" class="sidebar">
<!-- Inhalt der Sidebar -->
</div>
<button id="openBtn">Öffnen</button>
<script>
document.getElementById("openBtn").addEventListener("click", function(){
// Öffnen Sie die Sidebar, wenn der Button geklickt wird
document.getElementById("mySidebar").style.width = "250px";
});
</script>
</body>
</html>
Würde die Sidebar am Anfang mit einer klasse mit display:none verstecken und dann halt die klasse entfernen, wenn der knopf gedrückt wird. code wäre immer hilfreich
verstehe grade die frage nicht, also kurz nochmal meine antwort, vllt erklärt es das dann ja schon. Du machst ne klasse mit display: none und nimmst die weg, wenn der knopf gedrückt wird, wenn dann die sidebar geschlossen wird fügst du sie wieder hinzu.
Wie könnte ich das den machen? Ich bin sehr neu auf HTML und CSS.
HTML Code:
<!--Sidebar mit Bild-->
<a href="" class="buttonbeschriftung">Bitte drücken!</a>
<button class="buttonsidebar">≡</button>
<div class="sidebar" id="sidebar">
<img src="img/Beautiful_street_at_Nagano,_Nagano,_Japan_24_April_2016_-_panoramio.jpg" alt="" class="ich" />
</div>
CSS:
.sidebar {
position: absolute;
right: 10px;
height: 615px;
top: 137px;
background-color: #0b2161;
overflow-x: hidden;
transition: 0.5s;
}
.buttonsidebar {
position: absolute;
height: 40px;
width: 40px;
right: 40px;
top: 40px;
border: none;
font-size: 25px;
animation: slide-bottom 2.5s;
}
.sidebar.show-sidebar {
width: 0px;
}
.ich {
position: relative;
height: 591px;
padding: 10px;
}
.buttonbeschriftung {
position: absolute;
text-decoration: none;
color: snow;
right: 100px;
top: 50px;
animation: slide-bottom 2s;
}
du machst bei css:
.sidebar-hidden {
display: none;
}
HTML:
<button onclick="document.getElementById('sidebar').classList.remove('sidebar-hidden')">Öffnen</button>
OMG es hat funktioniert! Vielen Vielen Dank für deine Hilfe!
Wie könnte ich die Klasse nach dem betätigen wieder entfernen?