De PHPhulp kroeg
sub-menu werkt maar 1 keer.
Heb al vergeleken met andere menu's met sub-menu's die ik heb gemaakt maar zie niet wat er anders is.
Enige verschil is dat hier een hamburgermenu in zit als je het bekijkt op de telefoon.
En op de telefoon blijft hij wel openstaan.
De website is vanuit 376px opgebouwd naar 1440px.
Mijn vraag is duss of iemand mij kan helpen?
https://jsfiddle.net/g3xwua1p/1/
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<button class="hamburger" aria-label="Open navigatie"><span></span></button>
<nav class="nav nav-panel" aria-label="Hoofdmenu">
<ul>
<li><a href="index.html" class="active" aria-current="page">Home</a></li>
<li><a href="scouting.html">Scouting</a>
<ul aria-label="submenu Scouting">
<li><a href="beste-spelers.html">Beste Spelers</a></li>
<li><a href="beste-staff.html">Beste Staff</a></li>
</ul>
</li>
<li><a href="tactiek.html">Tactiek</a></li>
<li><a href="contact.html">Contact</a></li>
<li><button id="theme-toggle" class="hamburger" title="Thema wisselen" aria-label="Thema wisselen"><span></span></button></li>
</ul>
</nav>
<nav class="nav nav-panel" aria-label="Hoofdmenu">
<ul>
<li><a href="index.html" class="active" aria-current="page">Home</a></li>
<li><a href="scouting.html">Scouting</a>
<ul aria-label="submenu Scouting">
<li><a href="beste-spelers.html">Beste Spelers</a></li>
<li><a href="beste-staff.html">Beste Staff</a></li>
</ul>
</li>
<li><a href="tactiek.html">Tactiek</a></li>
<li><a href="contact.html">Contact</a></li>
<li><button id="theme-toggle" class="hamburger" title="Thema wisselen" aria-label="Thema wisselen"><span></span></button></li>
</ul>
</nav>
CSS-code
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
.nav{
--link-pad:.6rem .9rem
}
.nav ul{
list-style:none;margin:0;padding:0
}
.nav a{
display:block;
padding:var(--link-pad);
color:#dfe6ff;
text-decoration:none;
font-weight:700;
font-family:'Montserrat',sans-serif;
border-radius:8px
}
.nav a:hover,.nav a:focus-visible{
background:rgba(0,209,255,.12);
outline:none
}
.nav a.active,[aria-current="page"]{
background:rgba(90,46,166,.22)
}
.hamburger{
inline-size:42px;
block-size:42px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
background:#141622;
color:#fff;
cursor:pointer
}
.hamburger span{
inline-size:20px;
block-size:2px;
background:#fff;
position:relative;
display:block
}
.hamburger span::before,.hamburger span::after{
content:"";
position:absolute;
inline-size:100%;
block-size:100%;
background:#fff;
inset-block-start:-6px
}
.hamburger span::after{
inset-block-start:auto;
inset-block-end:-6px
}
.nav-panel{
display:none;
padding-inline:clamp(12px,4vw,48px);
padding-block-end:12px
}
.nav-panel.open{
display:block
}
.nav>ul>li{
margin-block:6px
}
.nav li ul{
display:none;
margin-block-start:6px;
padding-inline-start:12px;
border-inline-start:2px solid rgba(255,255,255,.06)
}
.nav li:focus-within>ul,.nav li:hover>ul{
display:block
}
.nav li ul a{
font-weight:600;opacity:.9
}
--link-pad:.6rem .9rem
}
.nav ul{
list-style:none;margin:0;padding:0
}
.nav a{
display:block;
padding:var(--link-pad);
color:#dfe6ff;
text-decoration:none;
font-weight:700;
font-family:'Montserrat',sans-serif;
border-radius:8px
}
.nav a:hover,.nav a:focus-visible{
background:rgba(0,209,255,.12);
outline:none
}
.nav a.active,[aria-current="page"]{
background:rgba(90,46,166,.22)
}
.hamburger{
inline-size:42px;
block-size:42px;
display:grid;
place-items:center;
border:1px solid rgba(255,255,255,.12);
border-radius:8px;
background:#141622;
color:#fff;
cursor:pointer
}
.hamburger span{
inline-size:20px;
block-size:2px;
background:#fff;
position:relative;
display:block
}
.hamburger span::before,.hamburger span::after{
content:"";
position:absolute;
inline-size:100%;
block-size:100%;
background:#fff;
inset-block-start:-6px
}
.hamburger span::after{
inset-block-start:auto;
inset-block-end:-6px
}
.nav-panel{
display:none;
padding-inline:clamp(12px,4vw,48px);
padding-block-end:12px
}
.nav-panel.open{
display:block
}
.nav>ul>li{
margin-block:6px
}
.nav li ul{
display:none;
margin-block-start:6px;
padding-inline-start:12px;
border-inline-start:2px solid rgba(255,255,255,.06)
}
.nav li:focus-within>ul,.nav li:hover>ul{
display:block
}
.nav li ul a{
font-weight:600;opacity:.9
}
Bij mij werkt het helemaal niet. Het verdwijnt als ik erop probeer te klikken.
Maar hoe ik het moet oplossen kom ik dus niet uit.
Duss als er iemand is die de oplossing heeft hoor ik het graag.
Alexander Tobe op 20/09/2025 23:20:50:
Bij mij kan ik 1x erover maar daarna lukt dat dus niet meer.
Bij de jsfiddle schiet ie weg, tenzij ik m'n muis heeel snel beweeg. Misschien moet je even een filmpje maken van wat je bedoelt, of even stap voor stap uitleggen wat je doet en wat er gebeurt.
Ik denk dat ik iets verwijderd heb waardoor de dropdown het niet doet maar waarom het hamburgermenu nou opeens niet meer werkt, in de tussentijd alleen media toegevoegd en de uitlijning netter gemaakt.
Snap het ook niet meer, heb nog nooit gehad dat het slechter werd
De JS debugger in de browser geeft vaak wel aan waar je het moet zoeken. Misschien is je script wel afhankelijk van een stukje HTML, CSS of JavaScript dat opeens bij een opruiming te snel verdwenen is.
JS debugger heb ik nog nooit gedaan duss voor ik meer kapot maak wil ik mij daaraan niet wagen.
Heb sowieso niet veel kaas gegeten van js maar als ik naar de html en js kijk gaat dit niet over het menu toch?
dit staat er in js: document.getElementById('year').textContent = new Date().getFullYear();
Maar begrijp ik dat jullie ook niet weten hoe dit oplossen dan?
Hij heeft het gerepareerd maar de dropdown werkt nog steeds niet en nieuw probleem bij hamburger dat ik nu niet meer kan klikken op de scouting-pagina waar de dropdown aanvast zit.
Heb jsfiddle geupdate. https://jsfiddle.net/qd1rxwb5/ .
Zal het js hieronder ook erbij zetten.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
console.log("? main.js is geladen");
document.addEventListener("DOMContentLoaded", () => {
const hamburger = document.querySelector(".hamburger");
const navPanel = document.querySelector(".nav-panel");
// === Hamburger menu toggle ===
if (hamburger && navPanel) {
hamburger.addEventListener("click", () => {
navPanel.classList.toggle("open");
hamburger.classList.toggle("active");
});
}
// === Dropdowns openen op klik (mobiel) ===
document.querySelectorAll(".nav > ul > li > a").forEach(link => {
const submenu = link.nextElementSibling;
if (submenu && submenu.tagName === "UL") {
link.addEventListener("click", (e) => {
if (window.innerWidth < 768) {
e.preventDefault();
// Sluit andere open submenu���s
document.querySelectorAll(".nav li ul.open").forEach(openMenu => {
if (openMenu !== submenu) openMenu.classList.remove("open");
});
submenu.classList.toggle("open");
}
});
}
});
});
document.addEventListener("DOMContentLoaded", () => {
const hamburger = document.querySelector(".hamburger");
const navPanel = document.querySelector(".nav-panel");
// === Hamburger menu toggle ===
if (hamburger && navPanel) {
hamburger.addEventListener("click", () => {
navPanel.classList.toggle("open");
hamburger.classList.toggle("active");
});
}
// === Dropdowns openen op klik (mobiel) ===
document.querySelectorAll(".nav > ul > li > a").forEach(link => {
const submenu = link.nextElementSibling;
if (submenu && submenu.tagName === "UL") {
link.addEventListener("click", (e) => {
if (window.innerWidth < 768) {
e.preventDefault();
// Sluit andere open submenu���s
document.querySelectorAll(".nav li ul.open").forEach(openMenu => {
if (openMenu !== submenu) openMenu.classList.remove("open");
});
submenu.classList.toggle("open");
}
});
}
});
});
Gewijzigd op 24/09/2025 22:57:24 door Alexander Tobe
www.alext.nl
Heb het ook even getest op mijn ipad en telefoon.
Op ipad doet de dropdown het wel en op de telefoon werkt de scouting-pagina nog steeds niet.
Toevoeging op 26/09/2025 01:37:57:
Mogelijke quick fix voor het submenu. Zoek in je css-bestand naar:
inset-block-start:calc(100% + 8px);
Zet op de regel daaronder:
margin-top: -6px;
Dit topic is gesloten.