I came across a problem I do not understand and don't know how to solve on a project. I am designing the mobilemenu of a website. The problem is only occurring in the mobilemenu so to reproduce the issue a max window width of <1023 is needed.
The menu can be expanded with the burger icons on the top right corner as intended. The menu works fine but when the menu is not expanded, on the menubar on some random places, (they can be easily found by just hovering over the green area) the cursor becomes a pointer and clicking launches a menu item (that was not visible and i do not know why it can be clicked there)
To make it easier to localize the problem I extracted the important lines of the code to this codepen: https://codepen.io/bvonr/pen/rNMEpqZ
(function(){
var burger = document.querySelector('.burger-container'),
header = document.querySelector('.header');
burger.onclick = function() {
header.classList.toggle('menu-opened');
menu-item.classList.toggle('activemenu');
}
}());/*Header generell */
.header {
width: 100%;
background: #24603c;
z-index: 2;
}
/* Mobiles Menü */
@media (max-width: 1023px) {
.header {
background: #24603c;
height: 50px;
width: 100%;
overflow: hidden;
transition: all 0.5s ease-out, background 1s ease-out;
transition-delay: 2.2s;
z-index: 1;
}
.header > a {
height: 50px;
}
.header > a > img {
height: 50px;
}
.header .burger-container {
position: relative;
display: inline-block;
height: 50px;
width: 50px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.header .burger-container #burger {
width: 18px;
height: 8px;
position: relative;
display: block;
margin: -4px auto 0;
top: 50%;
}
.header .burger-container #burger .bar {
width: 100%;
height: 1px;
display: block;
position: relative;
background: #fff;
transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0s;
}
.header .burger-container #burger .bar.topBar {
transform: translateY(0px) rotate(0deg);
}
.header .burger-container #burger .bar.btmBar {
transform: translateY(6px) rotate(0deg);
}
.header {
right: 0;
top: 0;
left: auto;
transform: translateX(0px);
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.65s;
}
.header ul.menu {
position: relative;
display: block;
padding: 0px 48px 0;
list-style: none;
}
.burger-container {
width: 50px;
float: right;
}
.header ul.menu li.menu-item {
border-bottom: 1px solid #fff;
margin-top: 5px;
transform: scale(1.15) translateY(-30px);
opacity: 0;
transition: transform 0.5s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.6s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}
.header ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.49s;
}
.header ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.42s;
}
.header ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.35s;
}
.header ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.28s;
}
.header ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.21s;
}
.header ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.14s;
}
.header ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.07s;
}
.header ul.menu li.menu-item a {
display: block;
position: relative;
color: #fff !important;
font-weight: 100;
text-decoration: none;
font-size: 22px;
line-height: 2.35;
font-weight: 200;
width: 100%;
}
.header.menu-opened {
height: 100%;
background-color: #24603c;
transition: all 0.3s ease-in, background 0.5s ease-in;
transition-delay: 0.25s;
}
.header.menu-opened .burger-container {
transform: rotate(90deg);
}
.header.menu-opened .burger-container #burger .bar {
transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: 0.2s;
}
.header.menu-opened .burger-container #burger .bar.topBar {
transform: translateY(4px) rotate(45deg);
}
.header.menu-opened .burger-container #burger .bar.btmBar {
transform: translateY(3px) rotate(-45deg);
}
.header.menu-opened ul.menu li.menu-item {
transform: scale(1) translateY(0px);
opacity: 1;
}
.header.menu-opened ul.menu li.menu-item:nth-child(1) {
transition-delay: 0.27s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(2) {
transition-delay: 0.34s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(3) {
transition-delay: 0.41s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(4) {
transition-delay: 0.48s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(5) {
transition-delay: 0.55s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(6) {
transition-delay: 0.62s;
}
.header.menu-opened ul.menu li.menu-item:nth-child(7) {
transition-delay: 0.69s;
}
}<div class="header">
<a href="?module=start"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Logo%21_Logo.svg/1920px-Logo%21_Logo.svg.png"></a>
<div class="burger-container">
<div id="burger">
<div class="bar topBar"></div>
<div class="bar btmBar"></div>
</div>
</div>
<ul class="menu">
<li class="menu-item">
<a href="?module=start">CLUB</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="Hockey">HOCKEY</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="Tennis">TENNIS</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="https://www.youtube.com/channel/UCDujF-QJ9YYeBxCHsFtz9Cg" target="_new">UHLEN.TV</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="?module=profile">MY.HTCU</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="?module=admin">ADMIN</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
<li class="menu-item">
<a href="tests">TESTSEITE</a>
<ul class="menulist">
<li class="menulevel1">
<a class=" " href="Ueber-Uns">ÜBER UNS</a>
</li>
</ul>
</li>
</ul>
</div>If someone knows why the menuitems appear there and how i can fix this, I would highly appreciate your help.
I am coding the website unsalaried so i am far from an expert and would appreciate any help.
The reason is this line...:
transform: scale(1.15) translateY(-30px)
...in the CSS rule for .header ul.menu li.menu-item:nth-child(1)
Or more precisely the translateY(-30px) in there, which moves all menu links up by 30px.
Since you are hiding your li elements with opacity: 0, the top li is still there partly; not visible, but clickable (i.e. the part of it that isn't hidden by overflow: hidden on the header).
So you should either use display: none instead of opacity: 0 on the list items (or better on the whole ul), or avoid using that transform: translateY(-30px) setting