Przyciski HTML połączone z JSem

pytanie zadane 25 grudnia 2016 w HTML i CSS przez kacper1445 Gaduła (4,880 p.)

Witam. Chciałbym żeby po kliknięciu na tzw "hamburger" pojawił się jeden div z menu (ronię responsywną stronę). Jak zapisać w JSie i HTMLu coś takiego?

2 odpowiedzi

odpowiedź 25 grudnia 2016 przez Comandeer Guru (600,810 p.)
edycja 25 grudnia 2016 przez Comandeer

Hamburger musi być przyciskiem.
Obsługę kliku najlepiej przypiąć do niego przy pomocy addEventListener.
Zamiast bawić się bezpośrednio w modyfikację stylów elementu, najlepiej zmienić mu klasę (np. na BEM-ową z modyfikatorem).
Dodatkowo należałoby zapewnić choć minimalną dostępność, czyli dodać [aria-expanded] do przycisku.
Fajnie by było także przenieść focus do nowo otwartego menu. Zamiast robić to inwazyjnie, najlepiej umieścić menu bezpośrednio po przycisku.
Czy już wspominałem, że ikonkę też trzeba odpowiednio przystosować?

Przykładowa implementacja mogłaby wyglądać np. tak: https://jsfiddle.net/Comandeer/2uhg0kgr/

komentarz 25 grudnia 2016 przez Ivan Maniak (60,650 p.)

Link do przykładowej implementacji nie działa.

komentarz 25 grudnia 2016 przez Comandeer Guru (600,810 p.)

Ech, to forum jest tak głupie, że nawet nie umie usunąć spacji z końca posta, tylko dołącza ją jako część linka…

odpowiedź 25 grudnia 2016 przez Adrian1999 Nałogowiec (34,570 p.)

http://www.w3schools.com/jsref/prop_style_display.asp Tu masz z js-a jak zrobić :D

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
    width: 500px;
    height: 500px;
    background-color: lightblue;
}
</style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

</body>
</html>

~Źródło w3schools.com