br0tkasten/test.br0tcraft.de
1
0
Fork 0
Code Activity

Menü leiste endgültig fürs Handy

Browse Source
This commit is contained in:
Alexander
2024-01-02 22:14:55 +01:00
parent fe58239332
commit 9df9bba9f5
4 changed files with 95 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
html+css.html
View File

@ -55,7 +55,7 @@
color: white;
text-decoration: none;
margin-left: 0px;
font-size: 50px;
font-size: 6vw;
}
.menu-link {
@ -71,7 +71,7 @@
.headline {
text-align: center;
color: rgb(0, 0, 0);
font-size: 40px;
font-size: 5vw;
text-shadow: 5px 5px 3px rgba(5, 0, 0, 0.26);
}
@ -90,10 +90,11 @@
.menu-links {
display: flex;
align-items: center;
justify-content: flex-end; /* Rechts ausrichten */
}
.menu-links.show {
display: flex; /* Bei Klick auf das Symbol anzeigen */
display: flex;
}
.menu {
@ -114,6 +115,7 @@
text-decoration: none;
display: block;
font-size: 250%;
margin: 10px; /* Abstand zwischen den Links hinzufügen */
}
.mobile-menu {
@ -141,40 +143,20 @@
flex-direction: column;
position: absolute;
top: 80px;
left: 0;
right: 0; /* Rechts ausrichten */
background-color: #333;
width: 100%;
justify-content: flex-start; /* Links oben ausrichten */
}
.menu-links.show {
display: flex; /* Bei Klick auf das Symbol anzeigen */
display: flex;
}
.mobile-menu.show {
display: block; /* Bei Klick auf das Symbol anzeigen */
display: block;
background-color: rgb(104, 0, 0);
}
.menu {
display: none;
}
.close-menu {
position: absolute;
top: 10px;
right: 10px;
color: white;
cursor: pointer;
font-size: 20px;
}
}
.close-menu {
position: absolute;
top: 10px;
right: 10px;
color: white;
cursor: pointer;
font-size: 20px;
}
</style>
</head>
@ -190,15 +172,11 @@
<div class="hamburger-icon"></div>
</div>
<div class="menu-links">
<!-- Gemeinsame Links für Desktop und mobile Ansichten -->
<a class="menu-link" href="">Kontakt</a>
<a class="menu-link" href="">Spiele</a>
</div>
</div>
<div class="menu">
<div class="close-menu" onclick="toggleMenu()">✖</div>
<a class="menu-link-mobile" href="">Kontakt</a>
<a class="menu-link-mobile" href="">Spiele</a>
</div>
<div class="mobile-menu" onclick="toggleMenu()">
<a class="menu-link-mobile" href="">Kontakt</a>
<a class="menu-link-mobile" href="">Spiele</a>
@ -207,15 +185,13 @@
<script>
function toggleMenu() {
var menuLinks = document.querySelector('.menu-links');
var mobileMenu = document.querySelector('.mobile-menu');
var menuLinks = document.querySelector(".menu-links");
var mobileMenu = document.querySelector(".mobile-menu");
var body = document.body;
menuLinks.classList.toggle('show');
mobileMenu.classList.toggle('show');
menuLinks.classList.toggle("show");
mobileMenu.classList.toggle("show");
}
</script>
</body>
</html>