Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript][CSS]CSS - zapisanie tego za pomocą Javascript.
ossUter
post
Post #1





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 27.11.2013

Ostrzeżenie: (0%)
-----

Siemanko.
Dzisiejszy problem mój polega na tym, że nie mam pojęcia jak przedstawić to:
[PHP] pobierz, plaintext 
  1. nav ul ul {
  2. 	display: none;
  3. }
  4.  
  5. 	nav ul li:hover > ul {
  6. 		display: block;
  7. 	}
[PHP] pobierz, plaintext

Za pomocą JS, tzn; to jest od menu - jak na razie wysuwa się po najechaniu. Chcę zrobić to za pomocą kliknięcia (.click()), gdyby się udało.
Czyli - domyślnie aby nav ul ul miało display: none; a po kliknięciu w nav ul li pokazało się ul - display: block. Mógłbym liczyć na pomoc? Pozdrawiam.

Ten post edytował ossUter 5.07.2015, 14:37:53
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 11)
prz3kus
post
Post #2





Grupa: Zarejestrowani
Postów: 260
Pomógł: 30
Dołączył: 22.01.2007

Ostrzeżenie: (0%)
-----

JS
http://www.w3schools.com/jsref/prop_style_visibility.asp

jQuery

http://api.jquery.com/show/

http://api.jquery.com/hide/

Poczytaj
Go to the top of the page
+Quote Post
kafowi
post
Post #3





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

Ostrzeżenie: (0%)
-----

Przy użyciu samego CSS również istnieje możliwość zrobienia pseudo-zdarzenia click().
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>CSS :target menu</title>
  6.   <style>
  7.     nav ul ul {display:none;}
  8.     nav ul ul:target  {display:block;}
  9.   </style>
  10. </head>
  11. <body>
  12. <nav>
  13.   <ul>
  14.    <li><a href="#aaa">Kliknij mnie</a><ul id="aaa">Bo mam cos pod sobą</ul></li>
  15.    <li><a href="#iii">Kliknij mnie</a><ul id="iii">Bo mam cos pod sobą</ul></li>
  16.    <li><a href="#uuu">Kliknij mnie</a><ul id="uuu">Bo mam cos pod sobą</ul> </li>
  17.    <li><a href="#eee">Kliknij mnie</a><ul id="eee">Bo mam cos pod sobą</ul></li>
  18.    <li><a href="#ooo">Kliknij mnie</a><ul id="ooo">Bo mam cos pod sobą</ul></li>
  19.   </ul>
  20. </nav>
  21. </body>
  22. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
Comandeer
post
Post #4





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

@kafowi można, ale w tym momencie za bardzo brudzi się adres. Już szybciej skorzystałbym tutaj z hacku z :checked - http://roberto.ovh.org/html-css/css_lightbox.html
A jak już :target to tylko jako fallback dla braku JS (IMG:style_emoticons/default/wink.gif)
Go to the top of the page
+Quote Post
kafowi
post
Post #5





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

Ostrzeżenie: (0%)
-----

Cytat(Comandeer @ 5.07.2015, 16:54:43 ) *
@kafowi można, ale w tym momencie za bardzo brudzi się adres. Już szybciej skorzystałbym tutaj z hacku z :checked - http://roberto.ovh.org/html-css/css_lightbox.html
A jak już :target to tylko jako fallback dla braku JS (IMG:style_emoticons/default/wink.gif)

Świetna sprawa z tym :checked na pierwszy rzut oka, ale po obejrzeniu i sprawdzeniu musi tam wystąpić :focus, a on działa zarówno na LPM jak i na PPM (IMG:style_emoticons/default/wink.gif) .
Go to the top of the page
+Quote Post
Comandeer
post
Post #6





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

O lol, nie, nie musi. Tam kiedyś było demko galerii na :checked, stąd podlinkowałem w ciemno - a tu widzę jakaś zmiana nastąpiła (IMG:style_emoticons/default/biggrin.gif)
"Prawdziwe" :checked: http://jsfiddle.net/Comandeer/3h7kjv4u/ + bardziej skomplikowane demko: http://bzdety.comandeer.pl/no-js.html
Go to the top of the page
+Quote Post
kafowi
post
Post #7





Grupa: Zarejestrowani
Postów: 75
Pomógł: 20
Dołączył: 13.02.2015

Ostrzeżenie: (0%)
-----

Cytat(Comandeer @ 5.07.2015, 18:23:23 ) *
O lol, nie, nie musi. Tam kiedyś było demko galerii na :checked, stąd podlinkowałem w ciemno - a tu widzę jakaś zmiana nastąpiła (IMG:style_emoticons/default/biggrin.gif)
"Prawdziwe" :checked: http://jsfiddle.net/Comandeer/3h7kjv4u/ + bardziej skomplikowane demko: http://bzdety.comandeer.pl/no-js.html

No teraz to ja rozumiem (IMG:style_emoticons/default/biggrin.gif) , ale nie wpływa to negatywnie na wyniki wyszukiwarek?
(bo przy większym menu trochę tych inputów by się narobiło, nie wspominając, że nie ma formularza)
Go to the top of the page
+Quote Post
Comandeer
post
Post #8





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Akurat brak formularza to raczej nie problem. Nie wiem czy wpływa to jakoś negatywnie na wyniki wyszukiwania - trza by jakieś testy porobić. Ale szczerze to wątpię.

Hack, jak i :target (IMG:style_emoticons/default/wink.gif) Z tym, że podczas gdy :checked pozwala wyhaczyć "click" w środowiskach bez JS, tak :target jest świetnym wyjściem do rozbudowania na nim implementacji w JS (wystarczy dorobić toggle dla elementu wskazywanego przez this.href). Natomiast samodzielnie ani jednego, ani drugiego w produkcji raczej bym nie użył.
Go to the top of the page
+Quote Post
ossUter
post
Post #9





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 27.11.2013

Ostrzeżenie: (0%)
-----

Dzięki wielkie, zastosowałem się do tego i działa wybornie: http://jsfiddle.net/Comandeer/3h7kjv4u/

Tylko... Czy w samym CSS jest jeszcze możliwość sprawdzenia, tak, aby kilknięcie po za obszar klas: toggle i toggler powodowało znowu display: none?
Go to the top of the page
+Quote Post
Comandeer
post
Post #10





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Można zrobić trick z rozciągnięciem niewidzialnego label nad całą stronę… ale to już IMO ohydny hack
Go to the top of the page
+Quote Post
ossUter
post
Post #11





Grupa: Zarejestrowani
Postów: 47
Pomógł: 0
Dołączył: 27.11.2013

Ostrzeżenie: (0%)
-----

W takim razie jakich funkcji JS powinienem użyć?
Go to the top of the page
+Quote Post
Comandeer
post
Post #12





Grupa: Zarejestrowani
Postów: 1 268
Pomógł: 254
Dołączył: 11.06.2009
Skąd: Świętochłowice

Ostrzeżenie: (0%)
-----

Obadaj to, co podesłał @prz3kus z jQuery - to będzie najprostsze do wdrożenia. Jest jeszcze: http://api.jquery.com/toggle/
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
3 Użytkowników czyta ten temat (3 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 00:29
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn