Button verschiebt sich bei Öffnen des Menüs

Diskutiere Button verschiebt sich bei Öffnen des Menüs im HTML Forum im Bereich Programmierung; Hallo, ich habe ein kleines Problem. Bei meiner Website habe ich einen Menü Button mit Javascript eingebaut. Wenn man auf diesen klickt, öffnen...
H

hubschrauber

New member
Dabei seit
03.02.2021
Beiträge
3
Hallo, ich habe ein kleines Problem. Bei meiner Website habe ich einen Menü Button mit Javascript eingebaut. Wenn man auf diesen klickt, öffnen sich darunter die Menüpunkte. Ich habe ebenfalls mit JavaScript einen Button gemacht, mit dem man zwischen Darkmode und Lightmode wechseln kann. Wenn ich das Menü aber öffne, verschiebt sich dieser Button, was ich nicht will. Weiß jemand, ob man diesen Button irgendwie fixieren kann oder so?
Dankeschön!
 
basti1012

basti1012

Active member
Dabei seit
12.06.2018
Beiträge
25
dann zeig doch mal ein link oder deinen code
 
H

hubschrauber

New member
Dabei seit
03.02.2021
Beiträge
3
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:pointer;
}
.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;
}
 
basti1012

basti1012

Active member
Dabei seit
12.06.2018
Beiträge
25
Du solltest das, mal alles mit Flexbox machen.
Deine Margin Werte sind mal voll für A....
Minus Werte sind schlechter Styling Angewohnheiten.
Das sollte auch immer ohne gehen.
Ich weiß nicht wie das bei dir aussehen soll, doch mein Gehirn schätzt so ungefähr
https://codepen.io/basti1012/pen/ZEBKpaE

Wenn es anders sein soll musst du mal eine Skizze fertig machen.
 
Thema:

Button verschiebt sich bei Öffnen des Menüs

Oben