• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Drugi poziom rozwijanego menu JS

0 głosów
1,387 wizyt
pytanie zadane 18 stycznia 2019 w JavaScript przez Helio Dor Nowicjusz (230 p.)
edycja 18 stycznia 2019 przez Helio Dor

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&amp;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');
});

 

 komentarz 18 stycznia 2019 przez pablop76 VIP (123,640 p.)
Pusta strona po odpaleniu tego co podałeś, więc nie wiem czy ktoś ma tyle czasu żeby przejrzeć gdzie jest błąd.

1 odpowiedź

0 głosów
odpowiedź 18 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
Mogę podać cały kod strony. Ja bardziej stawiam, by coś zmienić w JS np. "t.nextElementSibling.classList.toggle('hidesubmenu');" może się da ustawić, by zmienić klasę na ostatnim elemencie w tej samej linii, a nie na następnym ? A w tym kodzie wystarczy ustawić, by pokazywało się od razu menu a nie po kliknięciu burgera. Zaraz postaram się zmienić kod.
Pokaż 18 poprzednich komentarzy
komentarz 23 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)

kombinuje i nie umiem tego użyć :/ 

If(przycisk) {
    przycisk.addEventListener("click", function () {
        przycisk.classList.toggle("active")
    })
}

Jakaś podpowiedź? 

1
 komentarz 23 stycznia 2019 przez pablop76 VIP (123,640 p.)

Nie kopiuj tylko, sprawdź co robi dana funkcja. Skopiowsłeś If z błędem. Instrukcja powinna być napisana małą literą.

 komentarz 23 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
oj wybacz faktycznie.. a to taką funkcję mam na każdym skrypcie robić ? Czy da się jakoś uogólnić?

@Edit

Znaczy czy można robić ifa w ifie itd albo jest jakaś lepsza metoda ?
 komentarz 24 stycznia 2019 przez pablop76 VIP (123,640 p.)
Może warto rozdzielić skrypt i stosować tam gdzie jest potrzebny? Oczywiście nie może być  rozdrobniony. Duża ilość żądań spowalnia działanie strony.
 komentarz 24 stycznia 2019 przez Helio Dor Nowicjusz (230 p.)
edycja 24 stycznia 2019 przez Helio Dor
Ale jak to rozdzielić ? Przepraszam, dopiero wchodzę w świat JS i może mam głupie pytania, ale staram się ZROZUMIEĆ kody, nie je kopiować :)

BTW

Przyjrzałem się dogłębniej Twojemu skryptowi ciut wyżej, przeanalizowałem, zmodyfikowałem i pewną funkcję na stronie zmieniłem pod ten kod i z ok. 35-40 linijek zrobiło się 6 :) Dziękuje za pomoc :)

Podobne pytania

0 głosów
3 odpowiedzi 1,548 wizyt
Zamknięcie rozwijanego menu typu "hamburger" za pomocą CSS (ew. JS)
pytanie zadane 29 listopada 2016 w HTML i CSS przez Guardd Początkujący (350 p.)
0 głosów
1 odpowiedź 284 wizyt
Problem z wycentrowaniem menu rozwijanego, HTML/CSS
pytanie zadane 16 czerwca 2018 w HTML i CSS przez przemek11 Nowicjusz (150 p.)
0 głosów
2 odpowiedzi 1,019 wizyt
Animacja rozwijanego menu w Bootstrap.
pytanie zadane 24 stycznia 2017 w HTML i CSS przez R.orlinski Mądrala (5,490 p.)

93,753 zapytań

142,713 odpowiedzi

323,356 komentarzy

63,348 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...