Witam serdecznie, problem polega na niepożądanym efekcie rozwijania/zwijania menu drugiego poziomu. Mam na myśli, iż działa rozwijanie, lecz tylko gdy nacisnę na 'a' - a w tym 'a' mam również 'i' i 'p'. A naciśnięcie na 'i' lub 'p' powinno też rozwijać menu, lecz tego nie robi. Mam nadzieje, że znajdzie się ktoś chętny, kto przede wszystkim wytłumaczyłby mi błąd, który popełniłem :) Niżej wrzucam zawartość HTML, CSS i JS
UWAGA!
By burger się pokazał, trzeba wejść w tryb programisty i przełączyć na mobile, sory za niewygode..
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Poradniki do Shakes and Fidget</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin-ext" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-wrapper">
<header>
<input class="burger-check" id="burger-check" type="checkbox"><label for="burger-check" class="burger"></label>
<div class="wrapper"></div>
<nav id="navigation1" class="navigation">
<div class="minilogo">
<img src="images/logo.png" alt="">
</div>
<div class="national">
<div class="en"><a href="indexen.html"><img src="images/en.png" alt=""></a></div>
</div>
<ul>
<li><a href="#"><i class="fas fa-home"></i><p>Strona główna</p></a></li>
<li>
<a href="#" class="mainmenu">
<i class="fas fa-chevron-right"></i>
<p>Klaser</p>
<i class="fas fa-plus"></i>
</a>
<ul class="hidemenu hidesubmenu">
<li>Zadania</li>
<li>Przedmioty</li>
</ul>
</li>
<li><a href="#" class="mainmenu"><i class="fas fa-chevron-right"></i><p>Poradniki</p><i class="fas fa-plus"></i></a>
<ul class="hidemenu hidesubmenu">
<li>Twierdza</li>
<li>Pupile</li>
<li>Podziemia</li>
</ul>
</li>
<li><a href="#" class="mainmenu"><i class="fas fa-chevron-right"></i><p>Profesje</p><i class="fas fa-plus"></i></a>
<ul class="hidemenu hidesubmenu">
<li>Mag</li>
<li>Wojownik</li>
<li>Zwiadowca</li>
<li>Zabójca</li>
<li>Paladyn</li>
</ul>
</li>
<li><a href="#" class="mainmenu"><i class="fas fa-chevron-right"></i><p>Dodatkowe informacje</p><i
class="fas fa-plus"></i></a>
<ul class="hidemenu hidesubmenu">
<li>o twierdzy</li>
<li>o pupilach</li>
<li>o podziemiach</li>
</ul>
</li>
</ul>
</nav>
</header>
</div>
<script src="js/main.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
text-align: left;
font-size: 20px;
font-family: 'Roboto', arial, sans-serif;
max-width: 1600px;
margin: 0 auto;
background-color: black;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
header {
background-color: black;
height: 15vh;
color: white;
width: 82vw;
display: block;
overflow: hidden;
background-image: url(images/logo.png);
background-position: top;
background-size: contain;
max-width: 100%;
background-repeat: no-repeat;
margin: 0 0 0 18vw;
}
div.header {
background-color: black;
line-height: 20px;
}
/* MENU BURGER NOWE */
.main-wrapper.menu-active {
overflow: hidden;
width: 100vw;
height: 100vh;
}
.burger {
position: absolute;
top: 7vh;
left: 7vw;
display: block;
border: 0;
background: unset;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 4px solid currentColor;
width: 28px;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check {
display: none;
}
.burger-check:checked~.burger {
top: 50vh;
left: 87vw;
width: 12vw;
height: 12vw;
border-bottom: 4px solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
z-index: 100;
}
.burger-check:checked~.burger:before {
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked~.burger:after {
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: -webkit-transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out;
transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.navigation {
overflow: auto;
max-height: 0;
z-index: 0;
}
.burger-check:checked~.navigation {
position: absolute;
display: block;
top: 0;
left: 0;
height: 100vh;
width: 85%;
max-height: 100vh;
transition: max-height 0.5s ease-in-out;
background-color: #494e52;
z-index: 2;
border: 3px solid #5b6269;
}
.navigation ul li:nth-child(1) {
background-color: #32363a;
}
a {
color: inherit;
}
small {
font-size: 14px;
}
.navigation ul {
display: none;
}
.burger-check:checked~.navigation ul {
position: relative;
display: block;
width: 100%;
margin: 15vh 0 0 0;
padding: 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}
.wrapper {
top: 0;
left: 85vw;
max-height: 0;
z-index: 0;
}
.wrapper.active {
position: absolute;
display: block;
top: 0;
left: 85vw;
height: 100vh;
width: 15vw;
max-height: 100vh;
background-color: black;
opacity: .7;
z-index: 1;
transition: max-height 0.5s ease-in-out;
}
.minilogo img {
width: 100%;
height: 100%;
}
.minilogo {
display: none;
}
.minilogo.active {
position: absolute;
display: block;
width: 60vw;
height: 25vw;
top: 1vh;
left: 12vw;
}
ul li a p {
vertical-align: middle;
padding-left: 5px;
text-transform: none;
display: inline;
font-size: 18px;
line-height: 18px;
overflow: hidden;
white-space: pre-wrap;
}
ul li a {
position: relative;
display: inline-block;
bottom: 0;
width: 100%;
min-height: 30px;
padding: 10px 20px;
color: #fff;
}
ul li a .fas {
text-align: right;
vertical-align: middle;
}
ul li {
position: relative;
display: list-item;
width: 100%;
list-style-type: none;
padding: 5px 0;
border-bottom: 1px solid #5b6269;
list-style: none;
font-size: 20px;
line-height: 20px;
}
.burger-check:checked~.navigation ul.hidemenu {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
}
ul li:last-child {
border-bottom: none;
}
.burger-check:checked~.navigation ul.hidemenu.hidesubmenu {
display: none;
}
.fa-chevron-right {
color: #ff4d4d;
}
.fa-plus {
position: absolute;
top: 3vh;
right: 5vw;
}
.national {
position: relative;
display: block;
width: 83vw;
height: 10vh;
top: 10vh;
left: 0;
}
.pl {
position: absolute;
width: 15vw;
height: 15vw;
background-color: unset;
top: 3vh;
left: 34vw;
}
.en {
position: absolute;
width: 15vw;
height: 15vw;
background-color: unset;
top: 3vh;
left: 34vw;
}
.pl img {
width: 100%;
height: 100%;
}
.en img {
width: 100%;
height: 100%;
}
@media (min-width: 360px) {}
@media (min-width: 411px) {}
@media (min-width: 768px) {
li a {
font-size: 36px;
}
.burger {
top: 11vh;
left: 10vw;
}
.burger-check:checked~.navigation ul {
margin: 20vh 0 0 10vw;
}
}
@media (orientation: landscape) {
li {
line-height: 1.3em;
}
.burger {
top: 25vh;
left: 9vw;
}
.burger-check:checked~.navigation ul {
margin: 40vh 0 0 10vw;
}
}
@media (orientation: landscape) and (min-width: 568px) {
.burger {
top: 18vh;
}
}
@media (orientation: landscape) and (min-width: 812px) {
.burger {
top: 22vh;
}
.burger-check:checked~.navigation ul {
margin: 50vh 0 0 10vw;
}
}
@media (min-width: 1024px) {
.burger {
display: none;
}
}
@media (min-width: 1400px) {
display: none;
}
const parent = document.querySelector('ul');
parent.addEventListener('click', function (ev) {
const t = ev.target;
if (t.classList.contains('mainmenu'))
t.nextElementSibling.classList.toggle('hidesubmenu');
});