Rozwijane menu z funkcja hover, menu mobilne z funkcja kliknięcia

pytanie zadane 5 lutego 2018 w HTML i CSS przez Rascal Początkujący (250 p.)
edycja 5 lutego 2018 przez Rascal

Dzień dobry

Przekopałem cały internet i youtube w celu znalezienia rozwiązania mojego problemu niestety rozwiązania które podawali użytkownicy nie działały, tak jak bym tego chciał.

OPIS PROBLEMU: Na stronie otwiera się rozwijane menu po najechaniu kursorem za pomocą funkcji hover.

Niestety także się dzieje podczas rozwijanego menu z hamburgerem dla wersji mobilnej, tutaj chciałbym rozwinąć menu za pomocą kliknięcia używam do tego funkcji w javascript.

<script>
// OBSUGUJE KLIKNIECIE NA HAMBURGER
function myFunction() {
    document.getElementById("nawigacja").classList.toggle("show");
}
//DOCELEWO MA OBSLUGIWAC KLIKNIECIE NA ROZWIJANE MENU ZADANIA
function myFunction2() {
    document.getElementById("nawigacja_ham").classList.toggle("show2");
}
</script>

<HTML>
<nav>
        <div id="nav_container">
            
            <div>
                <button id="hamburger" onclick="myFunction()"><i class="fas fa-bars"></i></button>
            </div>
            <div id="nawigacja" class="nawigacja2">
                <ol>
                    <li id="main_item">
                        <a href="#" class="main_item_a">MATURA&nbsp;2019</a>
                    </li id="main_item">
                    <li id="main_item">
                        <a href="#" class="main_item_a">KOREPETYCJE</a>
                    </li>
                    
                    <li id="main_item" class="menu_rozwijane">
                        <a id="podmenu" href="#" class="main_item_a" onclick="myFunction2()">ZADANIA</a>
                        <ul id="dupa_show" class="nawigacja_ham">
                            <li>
                                <a href="#">Pod menu 1</a>
                            </li>
                            <li>
                                <a href="#">Pod menu 1</a>
                            </li>
                            <li>
                                <a href="#">Pod menu 1</a>
                            </li>
                            <li>
                                <a href="#">Pod menu 1</a>
                            </li>
                        </ul>
                    </li>
                    
                    <li id="main_item">
                        <a href="#" class="main_item_a">WZORY</a>
                    </li>
                    <li id="main_item">
                        <a href="#" class="main_item_a">O&nbsp;MNIE</a>
                    </li>
                    <li id="main_item" class="main_item_login">
                        <button id="zaloguj_button">Zaloguj</button>
                    </li>
                </ol>
            </div>
            
        </div>
    </nav>
</HTML>

Całego kodu CSS nie wrzucam tylko tam gdzie wykorzystuje hover


.menu_rozwijane:hover ul{
		visibility: visible;
		}

Proszę o pomoc jak zdezaktywować hovera w media queries, czy da się to zrobić tylko za pomoca css, czy może trzeba skorzystać z innego języka.

Pozdrawiam

Kamil

komentarz 5 lutego 2018 przez gremlin Dyskutant (7,600 p.)

Najlepiej jakbyś podał kod tej nawigacji, style dla niej i kod JS którego używa

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

Proszę edytowałem wpis.

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

@Rascal,

Czy jest mi ktoś w stanie pomóc??

3 odpowiedzi

odpowiedź 5 lutego 2018 przez gremlin Dyskutant (7,600 p.)
wybrane 5 lutego 2018 przez Rascal

Najlepsza

Straszny bałagan jest w tym kodzie. myFunction2 próbuje się dostać do elementu o id="nawigacja_ham", ale taki element nie istnieje, jest tylko taki o takiej samej klasie z innym id.

A poza tym, to powinno być jakieś @media, że powyżej ustalonej przez Ciebie szerokości nadajesz tę akcję na :hover i tyle. Zdarzenia powinny się odpalać w JS a nie w elementach html bo to trochę nieczytelne.

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

Faktycznie, nie trzeba znać żadnych dodatkowych funkcji, tylko trochę metodycznego myślenia.

To było tak banalne że aż mi teraz wstyd i muszę rozchodzić te zażenowanie.

Bardzo Ci dziękuje za odpowiedź i pomoc :)

odpowiedź 5 lutego 2018 przez zgrybus Pasjonat (24,860 p.)

Stwórz stronę od mobilek ( zaczynasz jej tworzenie od wersji mobilnej i powoli przechodzisz coraz do większej szerokości ), hover po prostu ustawiasz dopiero, gdy chcesz żeby menu rozwijało się przy danej szerokości :)

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

Musiałbym cały kod przerobić, a nie wiem czy takie rozwiązanie jest poprawne, na pewno da się to zrobić jeszcze inaczej. Jak wyłączyć hovera w media queries?

komentarz 5 lutego 2018 przez zgrybus Pasjonat (24,860 p.)

zresetuj style, które nałożyłeś na hover :P

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

jest taka funkcja w css? czy trzeba to zrobić JS ?

komentarz 5 lutego 2018 przez zgrybus Pasjonat (24,860 p.)

Nie rozumiem?

Jak na przykład masz:

:hover {
  padding-left: 15px;
}

To resetujesz przez:

:hover {
  padding-left: 0;
}

komentarz 5 lutego 2018 przez Rascal Początkujący (250 p.)

No niestety nie da się tak ;) Zobacz tak wyglada kod w css:

.menu_rozwijane:hover ul{
        visibility: visible;
        }

Po ustawieniu w media queries (czyli zresetowanie hover)

.menu_rozwijane:hover ul{
        visibility: hidden;
        }

Po kliknięciu na menu rozwinie się submenu, a gdy najedziesz kursorem na menu to się schowie bo zadziała hover hidden :)

odpowiedź 5 lutego 2018 przez Rascal Początkujący (250 p.)

Podobne pytania

0 głosów

1 odpowiedź 168 wizyt

Rozwijane menu przy hoverze

pytanie zadane 30 listopada 2019 w HTML i CSS przez Teslum_369 Gaduła (4,190 p.)

0 głosów

2 odpowiedzi 203 wizyt

Rozwijane menu, prostokątne menu

pytanie zadane 17 lutego 2018 w HTML i CSS przez PROFF Obywatel (1,180 p.)

0 głosów

1 odpowiedź 547 wizyt

Rozwijane menu zamyka się po najechaniu na hover.

pytanie zadane 5 stycznia 2016 w HTML i CSS przez Jordi Początkujący (290 p.)

Rozwijane menu z funkcja hover, menu mobilne z funkcja kliknięcia

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

3 odpowiedzi

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci