dann zeig doch mal ein link oder deinen code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<div class="navbar">
<a href="index.html"><img class="title" src="pictures/weblight2.png"></a>
<img class="menu-button display" onclick="openMenu()" src="pictures/meu.png" height="50px" width="50px">
<a href="login.html"><img class="user-login" src="pictures/user.png" height="50px" width="50px"></a>
<center>
<ul class="links">
<li ><a class="link" href="informationen.html">Informationen</a></li>
<li><a class="link" href="preise.html">Preise</a></li>
<li><a class="link" href="hilfe.html">Hilfe</a></li>
<li><a class="link"href="kontakt.html">Kontakt</a></li>
</ul>
</center>
<script>
function openMenu(){
document.getElementsByClassName("links")
[0].classList.toggle("display")
}
</script>
<button class="lightmode button" onclick="myFunction()">Ansicht wechseln</button>
<script>
function myFunction (){
var element = document.body;
element.classList.toggle("lightmode");
}
</script>
</div>
</body>
</html>
CSS:
body {
background-color: #0d0d0d;
color: white;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.title {
margin-top: -50px;
}
.darkmode {
background-color: #0d0d0d;
color: white;
transition: 1s;
}
.lightmode {
background-color: #f2f2f2;
color: black;
transition: 1s;
}
.button {
background-color: transparent;
color: white;
margin-top: -37.5px;
font-size: 20px;
border: none;
float: right;
margin-right: 10px;
right: 0px;
}
.button:hover {
color: #a64dff;
transition-timing-function: ease-out;
transition: 0.5s;
}
.navbar {
background-color: black;
margin-left: -8px;
margin-right: -8px;
margin-top: -20px;
height: 80px;
box-shadow: 0px 2px 2px 2px #1a1a1a;
position: fixed;
top: 0;
width: 100%
}
.menu-button {
overflow: hidden;
display: block;
margin-top: -130px;
margin-left: 600px;
}
.menu-button:hover{
cursor
ointer;
}
.user-login {
display: block;
margin-top: -50px;
margin-left: 830px;
width: auto;
position: absolute;
}
.links {
display: none;
list-style-type: none;
}
.link:hover {
transition: 0.3s;
transition-timing-function: ease-in;
color: #a64dff;
}
.display {
display: flex;
}
.link {
text-decoration: none;
color: white;
padding: 1px;
margin-left: 225px;
font-weight:lighter;
}
.lightmode a {
color:inherit;
}
