Jak zrobić responsywne pionowe menu z przyciskiem?

Kuba450

2018-08-23T18:49:23+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

0

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.

ShookTea

2018-08-23T19:16:34+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Wrocław
Postów: 629

0

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.

Kuba450

2018-08-23T19:27:31+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

0

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

Kopiuj

/**
 * 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

Kopiuj

	<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

Kopiuj

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

kAzek

2018-08-23T20:36:06+02:00

Rejestracja: dni
Ostatnio: dni
Lokalizacja: Gorlice

1

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

Kuba450

2018-08-24T01:30:01+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 9

0

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

JS

Kopiuj

( 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

Kopiuj

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

HEADER

Kopiuj

<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>

Freja Draco

2018-08-24T02:20:57+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 3394

0

ShookTea napisał(a):

Bez Javascriptu tego raczej nie osiągniesz.

Osiągniesz. Przykład minimum:

Kopiuj

<!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>