 [HTML][JavaScript] Menu otwierane po kliknięciu., --optymalizacja-- |
  |
| [HTML][JavaScript] Menu otwierane po kliknięciu., --optymalizacja-- |
 17.05.2015, 12:56:43
Post
#1
|
|
 Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%) 
 |
Menu:
Skrypt:
Jestem raczej początkujący w JS bo nie spędziłem nad im dużo czasu, max. kilka godzin. Czy da się przyspieszyć ten kod z tym samym efektem? Chodzi mi o efekt ala znaczniki html (details, summary) < bo działa to z 4x szybciej, a menu wręcz lekko zamula na niektórych przeglądarkach. -------------------- |
 |
 
|
|
17.05.2015, 13:23:32
Post
#2
|
|
 Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Dziwne, że tego typu skrypt zamula - nie jest jakoś specjalnie wymagający. Na których dokładnie przeglądarkach zamula?
Skoro chcesz się wzorować na details, to może poszukaj czegoś odpowiedniego w polyfillach? http://www.smashingmagazine.com/2014/11/28...etails-element/ albo https://github.com/ThePacielloGroup/disclosure-button -------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
17.05.2015, 13:38:59
Post
#3
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(Comandeer @ 17.05.2015, 14:23:32 )  Dziwne, że tego typu skrypt zamula - nie jest jakoś specjalnie wymagający. Na których dokładnie przeglądarkach zamula? Skoro chcesz się wzorować na details, to może poszukaj czegoś odpowiedniego w polyfillach? http://www.smashingmagazine.com/2014/11/28...etails-element/ albo https://github.com/ThePacielloGroup/disclosure-button Przejrzałem ale jQuery odpada (jak sam pisałeś "nie jest jakoś specjalnie wymagający). Zamula na starszych operach, a różnice widać w przeglądarkach które obsługują details jak się spamuje klikając. -- Edit: Może jednak da się jakoś?  .Przy okazji - da się jakoś inaczej zrobić zamiast innerHTML? Ale żeby html też wykonywało, poprostu tekst pokolorowany tak jak wyżej. Ten post edytował Ksar 17.05.2015, 13:43:34 -------------------- |
|
|
|
|
17.05.2015, 14:08:54
Post
#4
|
|
|
Grupa: Zarejestrowani Postów: 1 268 Pomógł: 254 Dołączył: 11.06.2009 Skąd: Świętochłowice Ostrzeżenie: (0%)
|
Cytat Zamula na starszych operach Jak starszych? 12 czy trochę wyższych? Jak 12, to nawet nie ma sensu nad tym siedzieć… Wszak to już kilkuletnie trupy - nie oszukujmy się. Co do sposobu - nie wiem czy bym nie szedł po prostu w zabawę klasą. Kod <!DOCTYPE html> <html lang="pl" dir="ltr" class="no-js"> <head> <meta charset="UTF-8"> <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script> <title>Ehhhh</title> <style> .no-js #menu > button { display: none; } #menu > button:before { content: '[#]'; } #menu.open > button:before { content: '[^]'; } #menu > ul { display: none; } #menu.open > ul, .no-js #menu > ul { display: block; } </style> </head> <body> <nav id="menu"> <button>Menu</button> <ul> <li><a href="/">Strona główna</a></li> <li><a href="/chat/">Czat</a></li> </ul> </nav> <script> (function(menu) { var button = menu.getElementsByTagName('button')[0]; button.addEventListener('click', function(e) { if(menu.className.indexOf('open') === -1) menu.className += ' open'; else menu.className = menu.className.replace(/[s]*open/, ''); }); }(document.getElementById('menu'))); </script> </body> </html> W tym kodzie menu jest rozwinięte zawsze, gdy user nie ma JS + dodatkowo wszystkie zmiany związane z jego wyglądem odgrywają się poprzez zmianę klasy. -------------------- ★Mój blog || Okiem krytyka★
|
|
|
|
|
17.05.2015, 14:27:14
Post
#5
|
|
|
Grupa: Zarejestrowani Postów: 520 Pomógł: 102 Dołączył: 15.07.2014 Skąd: NULL Ostrzeżenie: (0%)
|
Cytat(Comandeer @ 17.05.2015, 15:08:54 ) Jak starszych? 12 czy trochę wyższych? Jak 12, to nawet nie ma sensu nad tym siedzieć… Wszak to już kilkuletnie trupy - nie oszukujmy się. Coś tego typu, strona przystosowywana bardziej pod urządzenia mobilne. -------------------- |
|
|
|
|
|
Wersja Lo-Fi | Aktualny czas: 3.07.2025 - 01:22 |
