Warning: Redis::get(): php_network_getaddresses: getaddrinfo for localhost failed: No address associated with hostname in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php on line 665

Warning: Cannot modify header information - headers already sent by (output started at /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php:665) in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/dw-question-answer/inc/Posts/Base.php on line 20

Warning: Cannot modify header information - headers already sent by (output started at /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php:665) in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-includes/feed-rss2-comments.php on line 8
Komentarze do: Responsywne menu rozwijane w JavaScript. UPDATE https://webroad.pl/javascript/721-responsywne-menu-rozwijane blog dla webmasterów, na którym piszemy o HTML5, CSS3, JavaScript, webdesign, UX, CMS Sat, 26 Sep 2020 19:03:26 +0000 hourly 1 https://wordpress.org/?v=6.9.4 Autor: Ludwik Krwawy https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1687 Tue, 27 May 2014 12:08:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1687 „Parafrazując pierwszą polską encyklopedię powszechną, HTML jaki jest, każdy widzi.”
nie encyklopedię, a Benedykta Chmielowskiego „Nowe Ateny”

]]>
Autor: Ludwik Krwawy https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1688 Tue, 27 May 2014 12:08:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1688 poza tym – bardzo przydatne.
Pzdr.

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1539 Sun, 02 Mar 2014 15:10:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1539 Dziwne, u mnie na wszystkich przeglądarkach działa tak samo. Skrypt dostosowuje działanie zależnie od tego czy ekran jest dotykowy czy nie. Upewnij się, że np. w FF nie masz włączonej symulacji. W pasku adresu wpisz about:config i wyszukaj „touch”. Upewnij się, ze wszystkie ustawienia mają status domyślny.

]]>
Autor: Bartłomiej Maliszewski https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1535 Sun, 02 Mar 2014 00:16:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1535 Mam następujące pytanko :
otóż zauważyłem że menu zarówno pierwsze jak i drugie rozwija się po na jechaniu na element w chromie z kolei w innych przeglądarkach po kliknięciu (chodzi mi oczywiście o przeglądarki komputerowe nie mobilne)..
Czy mógłby mi to ktoś wytłumaczyć czemu tak się dzieje ?

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1461 Tue, 14 Jan 2014 22:49:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1461 No ja pomyślę jeszcze nad tym buttonem, dzięki za podsuniecie rozwiazania.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1460 Tue, 14 Jan 2014 19:44:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1460 o tym właśnie myślę: o ukryciu zawartości buttona i podstawieniu ikonki.
poza tym mnie raczej chodziło o sekcję ikon na stronie a nie samo menu ;) ono jeszcze będzie dopieszczane

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1459 Tue, 14 Jan 2014 19:40:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1459 U Cibie jest button, a ja potrzebuję linku, button mogę mieć ewentualnie obok linku czyli zamiana z div.show-sub-menu. Nie mogę wsadzić ikony w pseudoklasę linku, bo odpada funkcja „klikania” na urządzeniach z ekranami dotykowymi. A ewentualnie już w samym buttonie zrobić ikonę.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1458 Mon, 13 Jan 2014 20:15:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1458 >Jak już mówisz o ARIA to samo aria-label jest nie wystarczające: aria-haspopup, aria-hidden, role=”menu”, role=”menuitem” itd, itd.

owszem, ale w obecnej postaci menu po prostu nie istnieje dla AT. pozbycie się display:none na rzecz innej techniki ukrywania (jest ich tak dużo, że któraś przecież musi pasować) już stanowi duży krok.

btw [role=menu] i [role=menuitem] AFAIR odnoszą się do interaktywnych menu aplikacyjnych, nie nawigacji per se – stąd niekoniecznie bym widział tu ich użycie. co do aria-haspopup, jak najbardziej

i dalej nie rozumiem czemu moja metoda miałaby nie odpowiadać: przecież :before złapie klik (będzie częścią buttona). po prostu podmienić button na ikonkę („font-replacement”)

>Jeżeli będę się bawił, jak na podlinkowanym przykładnie, w position absolute to estetyczna animacja odpada, a takiej opcji nie ma.

jak dla mnie efektowność zawsze stoi niżej niźli dostępność.

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1457 Mon, 13 Jan 2014 15:34:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1457 Krytyka dodatkowego elementu do kliku znosi się z zamianą i na button. Dodatkowy element jest konieczny. Wiem jak fontello, jak to określiłeś, „przypina”. Podlinkowane rozwiązanie jest dla mnie nie do przyjęcia ponieważ nie niesie ze sobą możliwości kliknięcia w link, a jedynie rozwinięcia elementu. Jeżeli będę się bawił, jak na podlinkowanym przykładnie, w position absolute to estetyczna animacja odpada, a takiej opcji nie ma. Jedyna sensowna zmiana to zamiana div.show-sub-menu na buttona. Jak już mówisz o ARIA to samo aria-label jest nie wystarczające: aria-haspopup, aria-hidden, role=”menu”, role=”menuitem” itd, itd.

> pseudoelementy reagują na kliki rodzica
No to jest oczywiste, dlatego nazywają się pseudoelementami, a nie rodzeństwem.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1455 Sun, 12 Jan 2014 20:56:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1455 skoro potrzebujesz osobnego elementu do kliku, to Twoje obecne rozwiązanie tym bardziej się pogrąża ;)
pomyśl: co widzi AT z takiego pustego elementu? nic, dla niego ten element nie istnieje. nie ma treści (bo jest pusty a nawet nie zastosowałeś aria-label), a dodatkowo jest dostępny z klawiatury (w tym momencie po prostu bezsensowny zabieg).
no i dla AT to menu można o kant tyłka potłuc, bo submenu są ukryte przez display:none a przycisk nie istnieje (bo to pusty element…)
inna rzecz – potrzebujesz focusowalny, klikalny element, który odpala jakąś akcję… toż to button… po co wymyślać koło od nowa? w HTML są aż dwa klikalne elementy. i o dziwo nikt nie chce użyć button tam, gdzie powinien być użyty… no cóż
co do :before – radzę Ci zobaczyć jak fontello się przypina do elementu, bo właśnie sobie strzeliłeś w stopę ;) no i przecież pseudoelementy reagują na kliki rodzica.
moje rozwiązanie? wstaw tam button. po prostu

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1454 Sun, 12 Jan 2014 20:42:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1454 No tak. Tylko jak mam osobny element to mam dla niego osobne zdarzenie. Trudno by było kliknąć ikonę nie wchodząc w link bez osobnego elementu. Jeszcze (z tego co mi wiadomo) nie ma api do rozpoznawania intencji użytkownika :) Poza tym mam złe doświadczenia z ikonami w :before i :after, zawsze więcej z tym roboty niż jest to (zaoszczędzenie kilku bajtów kodu) warte. Przynajmniej w mojej opinii.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1453 Sun, 12 Jan 2014 16:34:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1453 chodzi o sposób wstawiania ikonek.

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1452 Sun, 12 Jan 2014 16:31:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1452 Dzięki.

Nie wiem o co chodzi z tym linkiem, bo mi tam dropdown tabulatorem nie działa. FF.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1451 Sun, 12 Jan 2014 14:16:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1451 To trochu pomarudzę… ;)

outline nie jest do końca widoczny (ba, jest widoczny tylko dla tego plusika). no i ten plusik również nie do końca mi pasuje (http://vekit.comandeer.pl/#icons)

poza tym jest naprawdę dobrze

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1450 Sun, 12 Jan 2014 13:20:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1450 Druga wersja już dostępna :)

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1306 Sun, 24 Nov 2013 14:59:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1306 http://ranking.pl/pl/rankings/web-browsers.html -> MSIE 8: 4.56%. a MSIE 7 jest na granicy błędu statystycznego. ale fakt, więcej ich niż telefonów bez JS ;)

zresztą, powiedzmy sobie szczerze: kto o zdrowych zmysłach nadpisuje undefined? dla mnie to jest po prostu przerost formy nad treścią

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1305 Sun, 24 Nov 2013 14:57:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1305 Stare IE to nadal spora część użytkowników, na pewno większa niż telefony bez włączonego JS.

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1304 Sun, 24 Nov 2013 14:15:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1304 co do window i document – chyba jedyne sensowne wyjaśnienie, to zminifikowanie tego do w i d ;) co do undefined – nie zgodzę się, żeby to było koniecznie potrzebne. która przeglądarka obecnie wspiera tylko ES3? chyba jedynie stare IE…

]]>
Autor: Michał Załęcki https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1303 Sun, 24 Nov 2013 08:37:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1303 Dodałem strict mode i var-y tam gdzie ich brakowało, w ogóle o strict mode zapomniałem, teraz śmiga jak należy. Kod uaktualnie później. O mobile first pomyślę i może zrobię 2. wersję. Co do linijki:

;(function ($, window, document, undefined) {

Ludzie wezmą sobie ten plik js i wkleją go nie wiadomo gdzie i nie wiadomo jaki JS jest wykonywany obok niego. Tworzę w ten sposób odpowiednik czegoś na kształt odwróconego sandboxa i odizolowuję od siebie kod js każdego z plików. Taka konstrukcja jest bardzo znana. windows i document, przekazuję, gdyż pozytywnie wpływa to na szybkość działania skryptu (jeżeli nie to przynajmniej nie szkodzi), a undefined, nie zawsze jest undefined (ECMAScript 3), a tak mamy tego pewność. Kod podłapałem z jQuery Boilerplate, tam to zostało lepiej wyjaśnione.

https://github.com/jquery-boilerplate/jquery-boilerplate/blob/master/src/jquery.boilerplate.js

]]>
Autor: Comandeer https://webroad.pl/javascript/721-responsywne-menu-rozwijane#comment-1302 Sat, 23 Nov 2013 18:28:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/721-responsywne-menu-rozwijane/#comment-1302 Pytanie brzmi tak: jak zachowa się takie menu na małych ekranach w przypadku gdy JS jest niedostępny? Czy wówczas nie lepiej po prostu rozwinąć całość? Raptem kilka linijek CSS więcej.
Zastanowiłbym się także nad tym czy nie bardziej by się opłacało zastosować podejście mobile first i najpierw napisać style dla harmonijki a w razie potrzeby podzielić to na ładne submenu.
Też mam w miarę podstawowy kod dla takiego menu rozwijanego, ale nie jest wciąż gotowe. Niemniej jednak również pójdę w taką stronę, uwzględniając zastrzeżenia przedstawione powyżej ;)
co do pomysłu z rozwinięciem przy TAB – jak najbardziej popieram! cholernie zwiększa to użyteczność.
co do kodu JS – niestety, ale nie działa w strict mode. masz tzw. implied globals, czyli zapominasz deklarować zmienne przy użyciu var. nie widzę także sensu w przekazywaniu do funkcji window, document i (w sumie nieprzekazywaniu ;)) undefined. document i undefined w strict mode są read-only a więc nadpisać ich nie można (więc nie ma sensu tkać do funkcji ich lokalnych kopii). natomiast window nadpisać się nie da… więc tym bardziej nie widzę powodu jego wkładania do funkcji ;)
btw „model pudełkowy border-box”. „box-sizing” to po prostu nazwa własności CSS.

]]>