Jak zrobić responsywne pionowe menu z przyciskiem?

Cześć. Pracuje nad utworzeniem od podstaw szablonu do Wordpress'a.
Praktycznie wszystko jest gotowe.

Chce zrobić responsywne menu, w którym (przy wyświetlaniu strony na mniejszych urządzeniach) zamiast standardowego menu, wyświetlać będzie się przycisk, po kliknięciu którego rozwijać będzie się menu pionowe.

Ma być ono podobne do tego tutaj.

Jestem mniej niż początkujący i chce prosić Was o jakieś wskazówki, jak mogę coś takiego zrobić.

Próbowałem wzorować się na tym szablonie, do którego zamieściłem link, jednak trochę mnie to na tą chwilę przerasta.

Bez Javascriptu tego raczej nie osiągniesz. Spróbuj ogarnąć podstawy jQuery oraz media queries w CSSie, to powinno ci pomóc i być łatwe na początek.

Kombinuje jeszcze nad skopiowaniem tego z innego szablonu, ale chyba nic z tego.
Przycisk nie reaguje.

/**
 * Handles toggling the navigation menu for small screens and
 * accessibility for submenu items.
 */
( function() {
	var nav = document.getElementById( 'site-navigation' ), button, menu;
	if ( ! nav ) {
		return;
	}

	button = nav.getElementsByTagName( 'button' )[0];
	menu   = nav.getElementsByTagName( 'ul' )[0];
	if ( ! button ) {
		return;
	}

	// Hide button if menu is missing or empty.
	if ( ! menu || ! menu.childNodes.length ) {
		button.style.display = 'none';
		return;
	}

	button.onclick = function() {
		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
			menu.className = 'nav-menu';
		}

		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
			button.className = button.className.replace( ' toggled-on', '' );
			menu.className = menu.className.replace( ' toggled-on', '' );
		} else {
			button.className += ' toggled-on';
			menu.className += ' toggled-on';
		}
	};
} )();

// Better focus for hidden submenu items for accessibility.
( function( $ ) {
	$( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
		$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
	} );

  if ( 'ontouchstart' in window ) {
    $('body').on( 'touchstart.twentytwelve',  '.menu-item-has-children > a, .page_item_has_children > a', function( e ) {
      var el = $( this ).parent( 'li' );

      if ( ! el.hasClass( 'focus' ) ) {
        e.preventDefault();
        el.toggleClass( 'focus' );
        el.siblings( '.focus').removeClass( 'focus' );
      }
    } );
  }
} )( jQuery );

PHP

	<nav id="site-navigation" class="main-navigation" role="navigation">
			<button class="menu-toggle"><?php _e( 'Menu' ); ?></button>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php
			wp_nav_menu(
				array(
					'theme_location' => 'primary',
					'menu_class'     => 'nav-menu',
				)
			);
?>
		</nav>

i fragment z FUNCTION.PHP

wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140711', true );

Poczytaj czym jest Bootstrap w 30 min jako świeżak zrobisz. Łatwy do dostosowania do Twoich potrzeb szablon.
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_template1

Wysiadam na dzisiaj. Prace stanęły na tym. Wszystko świetnie, tylko przycisk nie reaguje.

JS

( function() {
    var nav = document.getElementById( 'site-navigation' ), button, menu;
    if ( ! nav ) {
        return;
    }
 
    button = nav.getElementsByTagName( 'button' )[0];
    menu   = nav.getElementsByTagName( 'ul' )[0];
    if ( ! button ) {
        return;
    }
 
    // Hide button if menu is missing or empty.
    if ( ! menu || ! menu.childNodes.length ) {
        button.style.display = 'none';
        return;
    }
 
    button.onclick = function() {
        if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
            menu.className = 'nav-menu';
        }
 
        if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
            button.className = button.className.replace( ' toggled-on', '' );
            menu.className = menu.className.replace( ' toggled-on', '' );
        } else {
            button.className += ' toggled-on';
            menu.className += ' toggled-on';
        }
    };
} )(jQuery);

FUNCTION.PHP

wp_enqueue_script( 'wpb_togglemenu', get_template_directory_uri() . '/js/navigation.js', array('jquery'), '20160909', true );

HEADER

<nav id="site-navigation" class="main-navigation" role="navigation">
            <button class="menu-toggle">Menu</button>
            <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>

ShookTea napisał(a):

Bez Javascriptu tego raczej nie osiągniesz.

Osiągniesz. Przykład minimum:

<!DOCTYPE html>
<html>

<head>
  <style>
  .przycisk > ul {
    display:none;
  }

  .przycisk:focus > ul {
    display:block;
  }
  </style>

</head>

<body>
<ul>
  <li tabindex="0" class="przycisk">
    menu
    <ul>
      <li>111</li>
      <li>222</li>
    </ul>
  </li>
</ul>
</body>

</html>