Wpis z mikrobloga

Macie jakiś poprawny wzorzec tworzenia hamburger menu? w sensie ikonka -> klikasz -> wysuwa sie menu boczne. Testowałam to ogólnie na różne sposoby, np checkboxem, przypisywanie klas za pomoca js, jakieś biblioteki, ale nie nasyca mnie to zupełnie. Mam wrażenie, że jest nieoptymalne, większość rozwiązań z netu wygląda na typowe januszostwo, kombinowanie.
Aktualnie przy developmencie apek po prostu bierzemy gotowe nawigacje z frameworka css, jaki nam sie trafi w projekcie, ale uważam że warto umieć też to porządnie zaimplementować samemu.
Jak Wy to rozwiązujecie?
inb4 beka z typow proponujących jquery
#frontend #hamburgermenu #webdev
o.....e - Macie jakiś poprawny wzorzec tworzenia hamburger menu? w sensie ikonka -> k...

źródło: comment_pzLWXGYi6XoUYhBeiXaUBXYhIU8h9nf6.jpg

Pobierz
  • 6
  • Odpowiedz
  • Otrzymuj powiadomienia
    o nowych komentarzach

@oruacie: Dla mnie najłatwiej jest zrobić w JS.
Powinnaś się zastanowić, dlaczego ludzie tak kombinują i robią np. poprzez checkbox.

CSS jest stabilniejszą warstwą od JS. Zawsze istnieje ryzyko, że JS się nie uruchomi, co spowoduje brak dostępności do menu.
  • Odpowiedz
W sumie znalazłam bardzo fajny sposób, a przynajmniej mi się podoba i jest chyba elegancki.
Hamburger jest hiperłączem odsyłającym do #sidebar, do sidebara piszemy kod stylizujący i ukrywamy za pomocą "transform: translateX(-100%)", a później robimy selektor sidebar:target i dodajemy "transform: translateX(0)" - > po kliknięciu hiperłącza sidebar się wysuwa. Czysty CSS, działają płynnie animacje. Nie podoba mi się jedynie ten hasz w url, bo może kolidować czasem z innymi
  • Odpowiedz
W sumie znalazłam bardzo fajny sposób, a przynajmniej mi się podoba i jest chyba elegancki.


@oruacie: ohydny, otwieranie/zamykanie menu zostaje w historii ( ͡° ͜ʖ ͡°)
  • Odpowiedz