Björn E.

User

Hamburg-Menü, Ebenen und Untermenüs individuell anpassen

Autore: Björn E.

Visite 70, Followers 0, Condiviso 0

Parole Chiave: hamburgerbutton,hamburgermenu,menu,menudesign,website x5 agency 2025.1

Hallo Community,

ihr habt mir schon oft geholfen, vielleicht auch damit: Ich möchte gerne mein Hamburger-Menu individualisieren und die Untermenüs übersichtlicher darstellen, das funktioniert mit den Bordmitteln von W5X nicht besonders gut.

Vielleich kann mir jemand mit einem Code helfen, der neben einem Menü mit Untermenü beispielsweise einen kleinen Pfeil zeigt, und bei Klick diesen nach unten dreht, außerdem hätte ich gerne die Schriftart und die Abstände innerhalb der Menüs und Untermenüs angepasst.

In den Anpassungen habe ich dazu nichts gefunden. Ich habe im Anhang mal einen Screenshot, wie ich mir das vorstelle. Das habe ich mit KI generieren lassen, leider funktioniert dieser Code nicht mit W5X so wie ich es mir vorstelle.

Außerdem habe ich hier den Code des Menüs, leider schaffe ich nicht es zu integrieren, da sich alle Links und anker stets im Menu-Container öffnen und nicht auf der eigentlichen Seite:

<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Perfektes Hamburgermenü</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Century Gothic', Arial, sans-serif;
}

body {
background-color: #000;
transition: background-color 0.3s ease;
}

body.menu-open {
background-color: rgba(0, 0, 0, 0.85);
}

/* Header (transparent) */
.header-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
z-index: 1000;
background-color: transparent;
transition: transform 0.3s ease;
}

/* Sticky-Header (beim Scrollen ausgeblendet) */
.header-container.sticky {
transform: translateY(-100%);
}

/* Sticky-Menü (mit Hintergrund) */
.sticky-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 60px;
background-color: rgba(30, 30, 30, 0.92);
z-index: 1000;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
transform: translateY(-100%);
transition: transform 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.sticky-menu.active {
transform: translateY(0);
}

.sticky-logo {
height: 40px;
}

.sticky-logo img {
height: 100%;
width: auto;
}

/* Hamburger-Button (sticky) */
.sticky-hamburger {
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: all 0.3s ease;
background-color: #222;
}

.sticky-hamburger:hover {
background-color: #333;
}

/* Hamburger-Button (original, transparent) */
.hamburger {
cursor: pointer;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
left: 20px;
top: 10px;
border-radius: 4px;
transition: all 0.3s ease;
background-color: rgba(34, 34, 34, 0.7);
z-index: 1001;
}

.hamburger:hover {
background-color: rgba(51, 51, 51, 0.7);
}

/* Linien des Hamburger-Buttons */
.line {
width: 25px;
height: 2px;
background-color: white;
transition: all 0.3s ease;
position: absolute;
}

.line:nth-child(1) {
transform: translateY(-8px);
}

.line:nth-child(3) {
transform: translateY(8px);
}

.hamburger.active .line:nth-child(1) {
transform: translateY(0) rotate(45deg);
}

.hamburger.active .line:nth-child(2) {
opacity: 0;
}

.hamburger.active .line:nth-child(3) {
transform: translateY(0) rotate(-45deg);
}

/* Hauptmenü (transparent) */
.menu {
position: fixed;
top: 0;
left: -100%;
width: 250px;
height: 100vh;
background-color: transparent;
transition: all 0.3s ease;
overflow-y: auto;
z-index: 1000;
}

.menu.active {
left: 0;
box-shadow: none;
}

/* Menü-Inhalt (eigener Hintergrund) */
.menu-content {
background-color: rgba(30, 30, 30, 0.92);
height: 100%;
width: 100%;
padding-top: 60px;
}

.menu-logo {
padding: 25px 20px;
text-align: center;
margin-bottom: 20px;
}

.menu-logo img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.menu ul {
list-style: none;
padding: 0;
text-align: center;
position: relative;
}

/* Linie VOR dem ersten Menüpunkt */
.menu > .menu-content > ul::before {
content: '';
display: block;
height: 1px;
background-color: #3a3a3a;
margin: 0;
}

/* Linie NACH dem letzten Menüpunkt */
.menu > .menu-content > ul::after {
content: '';
display: block;
height: 1px;
background-color: #3a3a3a;
margin: 0;
}

/* Linien ZWISCHEN Hauptmenüpunkten */
.menu > .menu-content > ul > li:not(:last-child)::after {
content: '';
display: block;
height: 1px;
background-color: #3a3a3a;
margin: 0;
}

/* Keine Linien in Untermenüs */
.submenu li::after {
display: none !important;
}

.menu li a {
display: block;
color: white;
padding: 15px 20px;
text-decoration: none;
font-size: 16px;
transition: background-color 0.2s;
}

.menu li a:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.submenu {
display: none;
background-color: rgba(15, 15, 15, 0.97);
}

.submenu.active {
display: block;
}

.has-submenu span {
display: inline-block;
transition: transform 0.3s ease;
margin-left: 15px;
position: absolute;
right: 20px;
}

.has-submenu.active span {
transform: rotate(90deg);
}

/* Content-Bereich */
.content {
padding: 20px;
color: white;
position: relative;
margin-top: 60px;
z-index: 1;
height: 200vh;
}

/* Overlay */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}

.overlay.active {
opacity: 1;
pointer-events: auto;
}

/* Close-Button */
.close-btn {
position: fixed;
left: 20px;
top: 10px;
width: 40px;
height: 40px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
z-index: 1001;
background-color: #222;
}

.close-btn:hover {
background-color: #333;
}

.close-btn::before,
.close-btn::after {
content: '';
position: absolute;
width: 20px;
height: 2px;
background-color: white;
}

.close-btn::before {
transform: rotate(45deg);
}

.close-btn::after {
transform: rotate(-45deg);
}

.menu.active .close-btn {
display: flex;
}
</style>
</head>
<body>

<div class="header-container" id="header">
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>


<div class="sticky-menu" id="stickyMenu">
<div class="sticky-hamburger" id="stickyHamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="sticky-logo">
<img src="images/logo_vektor_bblogo_white.png" alt="Logo">
</div>
</div>


<nav class="menu" id="menu">
<div class="close-btn" id="closeBtn"></div>
<div class="menu-content">
<div class="menu-logo">
<img src="images/logo_vektor_bblogo_white.png" alt="Logo">
</div>
<ul>
<li class="has-submenu">
<a href="#">BLITZBLANK<span>›</span></a>
<ul class="submenu">
<li><a href="#about_us">ÜBER UNS</a></li>
<li><a href="#überblick">ÜBERBLICK</a></li>
<li><a href="#kontakt">KONTAKT</a></li>
</ul>
<li class="has-submenu">
<a href="#">ENTDECKE UNS<span>›</span></a>
<ul class="submenu">
<li><a href="#">REFERENZEN</a></li>
<li><a href="#">GALERIE</a></li>
<li><a href="#">BEWERTUNGEN</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">LEISTUNGEN<span>›</span></a>
<ul class="submenu">
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">BERATUNG</a></li>
</ul>
</li>
<li><a href="#">NEWS BLOG</a></li>
<li class="has-submenu">
<a href="#">RECHTLICHES<span>›</span></a>
<ul class="submenu">
<li><a href="#">AGB</a></li>
<li><a href="#">IMPRESSUM</a></li>
<li><a href="#">DATENSCHUTZ</a></li>
</ul>
</ul>
</div>
</nav>


<div class="overlay" id="overlay"></div>

<div id="imPageRow_1" class="imPageRow">

</div>
<div id="imCell_14" class=""> <div id="imCellStyleGraphics_14" ></div><div id="imCellStyleBorders_14"></div><div id="imTextObject_14">
<div data-index="0" class="text-tab-content grid-prop current-tab " id="imTextObject_14_tab0" style="opacity: 1; " role="tabpanel" tabindex="0">
<div class="text-inner">
<div><span class="fs14lh1-5 cf1">.</span><br></div>
</div>
</div>

</div>
</div><div id="imCell_49" class=""> <div id="imCellStyleGraphics_49" ></div><div id="imCellStyleBorders_49"></div><div id="imObjectImage_49"><div id="imObjectImage_49_container"><img src="images/Ein-Fahrzeug-ist-mehr-als-ein-Gegenstand..png" width="600" height="500" />
</div></div></div><div id="imPageRow_2" class="imPageRow imParallax">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;"><div id="imPageRowGraphics_2" class="imParallaxBackground" data-parallax-direction="fixed" data-parallax-zoom="140" ></div></div>
</div>
<div id="imCell_77"></div><div id="imCell_71" class=""> <div id="imCellStyleGraphics_71" ></div><div id="imCellStyleBorders_71"></div><div id="imTextObject_71">
<div data-index="0" class="text-tab-content grid-prop current-tab " id="imTextObject_71_tab0" style="opacity: 1; " role="tabpanel" tabindex="0">
<div class="text-inner">
<div><div><pre><span class="fs11lh1-5 cf1 ff1"><A NAME="about_us">  </A></span></pre></div></div><div><span class="fs4lh1-5"><br></span></div><div><span class="fs4lh1-5"><br></span></div><div><span class="fs4lh1-5">.</span></div>
</div>
</div>

</div>
</div><div id="imPageRow_3" class="imPageRow">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;"><div id="imPageRowGraphics_3" ></div></div>
</div>
<div id="imCell_57" class=""> <div id="imCellStyleGraphics_57" ></div><div id="imCellStyleBorders_57"></div><div id="pluginAppObj_57">
<div style="width: 100%; height: 20px"></div>
</div></div><div id="imCell_72" class=""> <div id="imCellStyleGraphics_72" ></div><div id="imCellStyleBorders_72"></div><div id="imTextObject_72">
<div data-index="0" class="text-tab-content grid-prop current-tab " id="imTextObject_72_tab0" style="opacity: 1; " role="tabpanel" tabindex="0">
<div class="text-inner">
<div class="imHeading3 imTARight"><span class="imUl cf1"><img class="image-0" src="images/seperator_car_silouette.png" width="125" height="50" /></span> <span class="cf2">   entdecken Sie uns</span></div><div class="imHeading4 imTARight">Erfrischend Anders, effektiv und professionell, das ist es, was uns auszeichnet. Wir sind zwanghaft perfektionistisch und extrem penibel, damit Ihr Fahrzeug in neuem unvergleichlichen Glanz erstrahlt!</div><div class="imTALeft"></div><div class="imTALeft"><hr></div><div class="imTACenter"><div class="imTALeft"><br></div><div class="imTALeft"><img class="image-1" src="images/icon_shiny_car.png" width="100" height="100" /><br></div><div class="imTALeft"><b><br></b></div><div class="imTALeft"><b><span class="fs18lh1-5 cf2">FEINARBEIT</span></b></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Unser Anspruch</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Wir erheben Fahrzeugreinigung auf ein völlig neues Level und arbeiten nach strengen Qualitätsstandards.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Das nennt man</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">akribisch, penibel, detailverliebt. Oder einfach nur leidenschaftlich.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Wir wollen immer das optimale Ergebnis</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Deshalb behandeln jedes Fahrzeug mit höchster Wertschätzung. Unser Anspruch ist Perfektion.</span></div><div><br></div><div class="imTALeft"><span class="fs14lh1-5 cf2"><br></span></div><div class="imTALeft"><img class="image-2" src="images/icon_hand_and_heart.png" width="100" height="100" /><br></div><div class="imTALeft"><br></div><div class="imTALeft"><b><span class="fs18lh1-5 cf2">W</span></b><b><span class="fs18lh1-5 cf2">ERTE</span></b></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Was uns antreibt</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Passion und Präzision.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Was uns auszeichnet</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Langjährige Erfahrung und beste Referenzen, ein geschultes Auge und ganz viel Fingerspitzengefühl.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Wir wissen, was wir tun – und wir lieben Fahrzeuge</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Denn ob edle Limousine, schnittiger Sportwagen oder robuster Transporter – jedes Fahrzeug hat Ausstrahlung, eine Geschichte, eine Persönlichkeit.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Ob als Wegbegleiter, Wertanlage, Kultobjekt oder Arbeitsplatz</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Ein Fahrzeug ist mehr als nur ein Gegenstand. Es ist Emotion.</span><br></div><div class="imTALeft"><br></div></div><div class="imTALeft"><br></div><div class="imTACenter"><div class="imTALeft"><img class="image-3" src="images/icon_hand_with_gear.png" width="100" height="100" /><br></div><div class="imTALeft"><b><br></b></div><div class="imTALeft"><b><span class="fs18lh1-5 cf2">LEISTUNGEN</span></b></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Für uns ist jedes Fahrzeug so einzigartig wie sein Besitzer</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Individuell und maßgeschneidert sind deshalb auch unsere Leistungen. Von der Stange gibt es bei uns nichts.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">In enger Absprache mit unseren Kunden</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">bieten wir von der behutsamen Handwäsche über eine High-End-Versiegelung mit Garantie bis zur Übernahme der kompletten Flottenpflege ein detailliert abgestimmtes Leistungspaket.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Auch Überführungen oder Tankservice</span><br></div><div class="imTALeft"><span class="fs14lh1-5 cf2">In Sachen Kundendienst sind wir absolut zuverlässig und flexibel.</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2"><br></span></div><div class="imTALeft"><span class="fs14lh1-5 cf2"><br></span></div><div class="imTALeft"><img class="image-4" src="images/icon_hand_with_seal.png" width="100" height="100" /><br></div><div><div class="imTALeft"><b><br></b></div><div class="imTALeft"><b><span class="fs18lh1-5 cf2">NACHHALTIGKEIT</span></b></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Was gut für die Umwelt ist, ist auch gut für Ihr Fahrzeug</span></div><div class="imTALeft"><span class="fs14lh1-5 cf2">Wir nutzen ausschließlich innovative, schonende Pflegeprodukte und setzen auf feinste Handarbeit.</span></div><div class="imTALeft"><br></div><div class="imTALeft"><span class="fs10lh1-5 cf2">Mit unserer Arbeit</span><br></div><div class="imTALeft"><span class="fs14lh1-5 cf2">tragen wir zu einem großen Teil des Werterhaltes ihres Fahrzeuges bei.</span></div></div><div class="imTALeft"><span class="fs14lh1-5 cf2"><br></span></div><div class="imTALeft"><span class="fs14lh1-5 cf2"><br></span></div></div>
</div>
</div>

</div>
</div><div id="imPageRow_4" class="imPageRow imParallax">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;"><div id="imPageRowGraphics_4" class="imContentDataContainer imParallaxBackground" data-parallax-direction="fixed" data-parallax-zoom="140" ></div></div>
</div>
<div id="imCell_73" class=""> <div id="imCellStyleGraphics_73" ></div><div id="imCellStyleBorders_73"></div><div id="pluginAppObj_73">
<div style="width: 100%; height: 5px"></div>
</div></div><div id="imCell_75" class=""> <div id="imCellStyleGraphics_75" ></div><div id="imCellStyleBorders_75"></div><div id="imTextObject_75">
<div data-index="0" class="text-tab-content grid-prop current-tab " id="imTextObject_75_tab0" style="opacity: 1; " role="tabpanel" tabindex="0">
<div class="text-inner">
<div><div><pre><span class="fs11lh1-5 cf1 ff1"><A NAME="überblick">  </A></span></pre></div><br></div><div><br></div><div><span class="fs4lh1-5">.</span></div>
</div>
</div>

</div>
</div><div id="imPageRow_5" class="imPageRow">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden;"><div id="imPageRowGraphics_5" class="imContentDataContainer" ></div></div>
</div>
<div id="imCell_74" class=""> <div id="imCellStyleGraphics_74" ></div><div id="imCellStyleBorders_74"></div><div id="pluginAppObj_74">
<div style="width: 100%; height: 20px"></div>
</div></div><div id="imCell_76" class=""> <div id="imCellStyleGraphics_76" ></div><div id="imCellStyleBorders_76"></div><div id="imTextObject_76">
<div data-index="0" class="text-tab-content grid-prop current-tab " id="imTextObject_76_tab0" style="opacity: 1; " role="tabpanel" tabindex="0">
<div class="text-inner">
<div class="imTACenter"><div class="imHeading3 imTARight"><img class="image-1" src="images/seperator_car_silouette.png" width="125" height="50" />   unsere Leistungen</div><div class="imHeading4 imTARight">Darauf können Sie sich verlassen, erfahren Sie mehr über unser Portfolio und unsere Serviceleistungen, natürlich alles individuell auf Ihr Fahrzeug zugeschnitten!</div><hr><div class="imTALeft"><br></div><div class="imTALeft"><br></div><div class="imTALeft">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.  </div><div class="imTALeft"><br></div><div class="imTALeft">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.  </div><div class="imTALeft"><br></div><div class="imTALeft">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.  </div><div class="imTALeft"><br></div><div class="imTALeft">Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.  </div><div class="imTALeft"><br></div><div class="imTALeft">Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.   </div><div class="imTALeft"><br></div><div class="imTALeft">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam</div><div class="imTALeft"><br></div><div class="imTALeft"><br></div></div>
</div>
</div>

</div>
</div>
<div class="content">
<h1>Willkommen auf unserer Website</h1>
<p>Klicken Sie auf das Hamburgermenü (links oben), um die Navigation zu öffnen.</p>
<p>Scrollen Sie nach unten, um das Sticky-Menü zu sehen.</p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const hamburger = document.getElementById('hamburger');
const stickyHamburger = document.getElementById('stickyHamburger');
const menu = document.getElementById('menu');
const overlay = document.getElementById('overlay');
const closeBtn = document.getElementById('closeBtn');
const submenuToggles = document.querySelectorAll('.has-submenu > a');
const body = document.body;
const header = document.getElementById('header');
const stickyMenu = document.getElementById('stickyMenu');

// Scroll-Event für Sticky-Menü
window.addEventListener('scroll', function() {
if (window.scrollY > 100) {
header.classList.add('sticky');
stickyMenu.classList.add('active');
} else {
header.classList.remove('sticky');
stickyMenu.classList.remove('active');
}
});

// Hamburger-Button (original) öffnet Menü
hamburger.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});

// Hamburger-Button (sticky) öffnet Menü
stickyHamburger.addEventListener('click', function(e) {
e.stopPropagation();
toggleMenu();
});

// X-Button schließt Menü
closeBtn.addEventListener('click', function() {
closeMenu();
});

// Overlay schließt Menü
overlay.addEventListener('click', function() {
closeMenu();
});

// Untermenüs ein-/ausblenden
submenuToggles.forEach(toggle => {
const arrow = toggle.querySelector('span');

toggle.addEventListener('click', function(e) {
e.preventDefault();
const submenu = this.nextElementSibling;
const parentItem = this.parentElement;

submenu.classList.toggle('active');
parentItem.classList.toggle('active');

if (submenu.classList.contains('active')) {
arrow.style.transform = 'rotate(90deg)';
} else {
arrow.style.transform = 'rotate(0deg)';
}
});
});

// Menü öffnen
function toggleMenu() {
menu.classList.add('active');
overlay.classList.add('active');
body.classList.add('menu-open');

// Alle Untermenüs schließen
document.querySelectorAll('.submenu').forEach(item => {
item.classList.remove('active');
const parent = item.parentElement;
parent.classList.remove('active');
parent.querySelector('span').style.transform = 'rotate(0deg)';
});
}

// Menü schließen
function closeMenu() {
menu.classList.remove('active');
overlay.classList.remove('active');
body.classList.remove('menu-open');
}
});
</script>
</body>

Postato il 25/04/2025 22:44:37

Andreas S.

Moderator

Und was sollen wir mit deinem Quellcode von Wsx5 machen?

Du musst schon uns mitteilen was du für ein Menü willst! Muster im Internet oder Scriptcode von den Menüs!

Postato il 26/04/2025 08:38:52 da Andreas S.

User
Autore

Sorry, habe falsch kopiert, ich möchte einfach nur ein Menü, wie es im Screenshot dargestellt ist, leider lässt sich das offenbar nicht direkt in W5X realisieren .

Postato il 26/04/2025 09:09:53 da Björn E.

Wieso nicht? Das ist ein einfaches vertikales Menü! Einfach den Hintergrund auf schwarz und die SChriftgröße anpassen und in weiss. Die Höhe der Button anpassen fertig!

...das mit den Pfeil nach untern kann man mit einem Icon machen oder mit ALT+31

Postato il 26/04/2025 11:03:05 da Andreas S.

Bernhard K.

Das ist eigentlich nichts besonders, geht mit x5 auch so in der Art...

Postato il 26/04/2025 14:08:44 da Bernhard K.

Ja? Und wie Style ich die Untermenüs so, dass sie nicht bescheiden aussehen. Der erste Untermenü-Punkt "klebt" fast am Oberpunkt und der Rest wurd mit viel zu viel Abstand angezeigt

Postato il 26/04/2025 14:35:18 da Björn E.

Daniel W.

Verschiedene Pfeile lassen sich z.B. hier kopieren ...

>> https://www.w3schools.com/charsets/ref_utf_geometric.asp

... und bei WebSite X5 einfach unter "3 Sitemap" am Ende des Ebenennamens hinzufügen.

-----

Postato il 26/04/2025 14:38:11 da Daniel W.

Viel3n Dank. Und wie sieht es mit der Optik aus? Abstände, Versatz, etc.

Postato il 26/04/2025 14:55:25 da Björn E.

Vielleicht können CSS-Experten einen Code für den Abstand unterhalb des Ebenennamens nennen.

Postato il 26/04/2025 14:55:54 da Daniel W.

Bei kostenpflichtigen Templates ist das Hamburger Menü sehr schlicht gehalten, siehe Beispiel unten

Das andere kostenpflichtige Templates "ESSE" hat nicht einmal einen Pfeil als Hinweis auf die Ebene.

----- Template "Smart" 46 Credits -----

Postato il 26/04/2025 15:18:36 da Daniel W.

Was hat das denn mit kostenpflichtig und kostenlos zu tun? Klar ist bei kostenpflichtig alles besser angepasst, aber das muss ich doch auch ohne Templates vernünftig einstellen können

Postato il 26/04/2025 15:36:54 da Björn E.

Auch bei kostenlosen Templates ist das Hamburger Menü heute meistens sehr schlicht gehalten.

Meine Webseite wurde mit einem kostenlosen Template erstellt - beim Menü-Objekt sind alle Hintergründe bei "Menüelement" auf "transparent" gestellt, so wie bei vielen Kostenpflichtigen.

----- (1) Meine Webseite mit kostenlosem Template -----

----- (2) Beispiel Testseite mit kostenlosem Template -----

Postato il 26/04/2025 16:16:42 da Daniel W.

Geht es hier um das Menü oder um den Hamburger Button? Soll es besser am Desktop oder am Handy ausschauen? Soll das Menü gleich angezeigt werden oder per Hamburgerbutton aufklappen?

Postato il 26/04/2025 22:27:27 da Andreas S.