tim_058454512
Neues Mitglied
Hi Leute, ich bin noch nicht so ganz mit HTML, CSS und JS vertraut. Ich bin grade dabei ein Website zu erstellen, aber habe folgendes Problem:
Ich habe es schon hinbekommen, dass wenn sich das Menü öffnet meine drei Boxen verschwinden. Ich will genau das auch anders herum machen, aber bekomme es einfach nicht hin. Ich habe schon probiert den transition-delay des Menüs einfach beim Container einzufügen, aber dann passiert das auch beim öffnen des Menüs.
Ich hoffe ihr könnt mir helfen und Danke im Voraus. Sorry falls die Formulierung etwas schwammig ist, aber vielleicht wird es ja mit dem Code veständlicher.
LG Tim
HTML-CODE
DAS IST DER CODE FÜR MEINE SEITE
DAS IST DER CODE FÜR DIE NAVIGATION
Ich habe es schon hinbekommen, dass wenn sich das Menü öffnet meine drei Boxen verschwinden. Ich will genau das auch anders herum machen, aber bekomme es einfach nicht hin. Ich habe schon probiert den transition-delay des Menüs einfach beim Container einzufügen, aber dann passiert das auch beim öffnen des Menüs.
Ich hoffe ihr könnt mir helfen und Danke im Voraus. Sorry falls die Formulierung etwas schwammig ist, aber vielleicht wird es ja mit dem Code veständlicher.
LG Tim
HTML-CODE
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link href="../../Intranetseite/stylesheets/style_tools.css" rel="stylesheet">
<link href="../../Intranetseite/stylesheets/style2.css" rel="stylesheet">
</head>
<body>
<!--NAVIGATIONSMENÜ-->
<input type="checkbox" id="active" onclick="myFunction()">
<label for="active" class="menu-btn"><span></span></label>
<label for="active" class="close"></label>
<div class="wrapper">
<ul>
<li><a href="startseite.html">Home</a></li>
<li><a href="tools.html">Tools</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="feedback.html">Feedback</a></li>
</ul>
</div>
<!--ENDE-->
<!--LOGO MIT TEXT-->
<div class="content" id="myDIV">
<div class="container">
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
<p class="box-text">Dies ist der Text für Box 1. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
<p class="box-text">Dies ist der Text für Box 2. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
</div>
<div class="box">
<img src="https://upload.wikimedia.org/wikipedia/commons/4/44/BMW.svg" alt="BMW Logo" class="box-img">
<p class="box-text">Dies ist der Text für Box 3. Der Text beginnt auf derselben Höhe wie das BMW Logo.</p>
</div>
</div>
</div>
<!--ENDE-->
<!--SCRIPT-->
<script>
let zIndexChanged = false;
function myFunction() {
const myDiv = document.getElementById("myDIV");
if (!zIndexChanged) {
myDiv.style.zIndex = "-1"; // Z-Index ändern
zIndexChanged = true;
} else {
myDiv.style.zIndex = "0"; // Z-Index zurücksetzen
zIndexChanged = false;
}
}
</script>
<!--ENDE-->
</body>
</html>
DAS IST DER CODE FÜR MEINE SEITE
CSS:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.box {
display: flex;
align-items: flex-start;
background-color: #ccc;
padding: 20px;
width: 80%;
max-width: 800px;
margin-bottom: 20px;
border-radius: 10px;
}
.box-img {
width: 150px;
height: auto;
margin-right: 20px;
}
.box-text {
flex: 1;
margin: 0;
font-size: 18px;
}
DAS IST DER CODE FÜR DIE NAVIGATION
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Lato', sans-serif;
font-family: 'Oswald', sans-serif;
}
.wrapper{
position: fixed;
top: 0;
/*left: -100%;*/
right: -100%;
height: 100%;
width: 100%;
background: #272727;
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
transition: all 0.6s ease-in-out;
}
#active:checked ~ .wrapper{
/*left: 0;*/
right:0;
}
.menu-btn{
position: absolute;
z-index: 2;
right: 20px;
/*left: 20px; */
top: 20px;
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
border-radius: 50%;
font-size: 20px;
cursor: pointer;
/*color: #fff;*/
/*background: linear-gradient(90deg, #f92c78, #4114a1);*/
/* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
/* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
transition: all 0.3s ease-in-out;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
content: "";
position: absolute;
top: calc(50% - 1px);
left: 30%;
width: 40%;
border-bottom: 2px solid #000;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu-btn:before{
transform: translateY(-8px);
}
.menu-btn:after{
transform: translateY(8px);
}
.close {
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
transition: background .6s;
}
/* closing animation */
#active:checked + .menu-btn span {
transform: scaleX(0);
}
#active:checked + .menu-btn:before {
transform: rotate(45deg);
border-color: #fff;
}
#active:checked + .menu-btn:after {
transform: rotate(-45deg);
border-color: #fff;
}
.wrapper ul{
position: absolute;
top: 60%;
left: 50%;
height: 90%;
transform: translate(-50%, -50%);
list-style: none;
text-align: center;
}
.wrapper ul li{
height: 10%;
margin: 15px 0;
}
.wrapper ul li a{
text-decoration: none;
font-size: 30px;
font-weight: 500;
padding: 5px 30px;
color: #fff;
border-radius: 50px;
position: absolute;
line-height: 50px;
margin: 5px 30px;
opacity: 0;
transition: all 0.3s ease;
transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after{
position: absolute;
content: "";
background: #fff;
/*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
/*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
width: 100%;
height: 100%;
left: 0;
top: 0;
border-radius: 50px;
transform: scaleY(0);
z-index: -1;
transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
transform: scaleY(1);
}
.wrapper ul li a:hover{
color: #1a73e8;
}
input[type="checkbox"]{
display: none;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
.content .title{
font-size: 40px;
font-weight: 700;
}
.content p{
font-size: 35px;
font-weight: 600;
}
#active:checked ~ .wrapper ul li a{
opacity: 1;
}
.wrapper ul li a{
transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translateX(100px);
}
#active:checked ~ .wrapper ul li a{
transform: none;
transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1);
transition-delay: .6s;
transform: translateX(-100px);
}