Forum PHP.pl > [HTML][JavaScript] Menu otwierane po kliknięciu.

KsaR

17.05.2015, 12:56:43

Menu:

[HTML] pobierz, plaintext 
<div id="menu" onclick="changeMenu()"><span style="color:#45494D">[#]</span>Menu</div>
<div id="menu2">
<ul>
 <li><a href="/">Strona główna</a></li>
 <li><a href="/chat/">Czat</a></li>
</ul>
</div>
[HTML] pobierz, plaintext

Skrypt:

[JAVASCRIPT] pobierz, plaintext 
function changeMenu()
{
 var d=document, m=d.getElementById('menu'), m2=d.getElementById('menu2')
 if (m2.style.display=='block')
 {
  m.innerHTML='<span style="color:#45494D">[#]</span>Menu'
  m2.style.display='none'
 }
 else
 {
  m.innerHTML='<span style="color:#45494D">[^]</span>Menu'
  m2.style.display='block'
  m2.style.border='2px solid #3C434A'
 }
 m.id='menu'
}
[JAVASCRIPT] pobierz, plaintext

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.

Comandeer

17.05.2015, 13: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

KsaR

17.05.2015, 13:38:59

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.

Comandeer

17.05.2015, 14:08:54

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.

KsaR

17.05.2015, 14:27:14

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.