Rozwijane menu

pytanie zadane 17 sierpnia 2019 w HTML i CSS przez Majonez.exe Gaduła (3,490 p.)

Witajcie, Jak zrobić żeby rozwijane sub-menu w głównym menu {np. CSS} rozwijało się po kliknieciu a nie po najechaniu myszką. Strona główna: https://aurolia-css.github.io Codepen: https://codepen.io/MAJO-SEARCH/pen/aboNvQJ

PS.

Chodzi mi żeby po kliknięciu elementu:

<li><a href="#" class="ripple ripple-effect show2">CSS <i class="fas fa-arrow-down"></i></a>

Rozwijało się menu (obecnie rozwija się po najechaniu na ten link myszką)

Dziękuje

1 odpowiedź

odpowiedź 17 sierpnia 2019 przez Tnifey Pasjonat (24,190 p.)

da się w samym css zrobić, ale nie polecam, bo to psuje user experience :P

https://codepen.io/Tnifey/pen/yLBJzEv?editors=1100

spróbuj zrobić to z pomocą javascriptu, przyda się tutaj metoda toggle z classList elementu oraz addEventListener z eventem click :P

komentarz 17 sierpnia 2019 przez Majonez.exe Gaduła (3,490 p.)

Mi chodzi właśnie tylko w CSS, JS za bardzo nie umiem. Wiem że są elementy :target i inne,

Próbowałem także z <input type="checkbox"> i wiem że takie coś jest i działa dokładnie tak samo jak ja chce tylko nie umiem tego zrobić, 10 linijek kodu około to zajmie ale nie umiem :/

komentarz 17 sierpnia 2019 przez Tnifey Pasjonat (24,190 p.)

no z :target też jest to proste do zrobienia tylko jest ten sam problem z ux :P

https://codepen.io/Tnifey/pen/bGbeoyr?editors=1100

jeśli chodzi o checkbox to nie polecam tego robić bo nie do tego służy, ale checkbox i :checked, który w połączeniu z kombinatorem adjacent sibling (+), może zrobić robotę na zasadzie podobnej do przykładu z postu powyżej :P

w js byś miał 3-5 linijek jeśli chodzi o podmianę klas po kliknięciu :P

komentarz 17 sierpnia 2019 przez Majonez.exe Gaduła (3,490 p.)

https://materializecss.com tam jest menu, jest tam samo element CSS i chodzi mi o taki sam efekt jak tam, czyli po kliknięciu wysuwa się menu, a po kliknięciu ponownie chowa, taki sam efekt z checkbox można osiągnąć a z :target raczej nie

komentarz 18 sierpnia 2019 przez Cezary Lato Nowicjusz (100 p.)

Heyka! może cuś takiego?!

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_select

Kombinuj, jak Ci pasuje

Powodzenia!!!

komentarz 18 sierpnia 2019 przez Majonez.exe Gaduła (3,490 p.)

to jest w ogóle do innych rzeczy, w szczególności nie do menu, to jest pole do wybierania opcji a nie do linków i wg, nie da się zmienić całkowicie wyglądu tej opcji (przynajmniej w niektórych przeglądarkach)