Mobile menu

WordPress 7 posts 2 voices

  1. Hello everyone,

    I have a challange for you, or maybe it’s a payed job description. I don’t know.

    Using _s to build a theme, I just want a fullscreen overlay menu with a menu button, just for mobile/small screens, displaying the default _s dropdown menu on screens above 780px.

    I want the menu to be like the one on hugeinc.com using this: http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/

    So, I have spent a lot of time on trying to implement the above example in combination with this: http://thecodeblock.com/full-screen-overlay-navigation/, using this example just for the code of the hamburger menu icon and a closing cross. Like on hugeinc.com.

    And, if possible, make the menu multi level, e.g. the menu items with a submenu has an arrow to the right, and when clicking, a new window will open with the submenu items and a back arrow on the top.

    Well, it’s time to face reality, I’m not good enough to make this happen. I have really tried, but there’s no progress.

    So, if anyone is up for it… 🙂 I know it’s a lot to ask.

    Thanks.
    Jan

  2. Anyone?

    I’m feeling kind of invisible here.
    I can handle a rejection. Any kind of response is better than total silence.

    Some sort of intrest in a paying customer would be nice.

    Yup. Developer membership.

    J

  3. You asked a question for everyone. I was waiting to see if any developers wanted to take you up on the job request, which is what this is.

    If you have existing code you want me to look at, I’d be happy to do so. I might be able to help with any specific issues.

    Feel free to post a job request on Slack though, which is where more of the developer crowd hangs out.

  4. OK. That makes sence. Perhaps I was a tad impatient. Sorry.

    Before I decide to post a job request on Slack, I thought I would try a simpler solution, using http://tympanus.net/codrops/2014/02/06/fullscreen-overlay-effects/. Using the first example (index.html and demo1.js), I’m trying to get the trigger button to fadeout/fadein in relation with the closing cross in the triggered menu. I have wrapped the trigger button in a div.menuopen and also given the button a class .overlay-open.

    (function() {
    	var triggerBttn = document.getElementById( 'trigger-overlay' ),
    		overlay = document.querySelector( 'div.overlay' ),
    		closeBttn = overlay.querySelector( 'button.overlay-close' );
    		menuopen = document.querySelector( 'div.menuopen' ),
    		transEndEventNames = {
    			'WebkitTransition': 'webkitTransitionEnd',
    			'MozTransition': 'transitionend',
    			'OTransition': 'oTransitionEnd',
    			'msTransition': 'MSTransitionEnd',
    			'transition': 'transitionend'
    		},
    		transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
    		support = { transitions : Modernizr.csstransitions };
    
    	function toggleOverlay() {
    		if( classie.has( overlay, 'open' ) ) {
    			classie.remove( overlay, 'open' );
    			classie.add( overlay, 'close' );
    			classie.add( menuopen, 'open' );
    			var onEndTransitionFn = function( ev ) {
    				if( support.transitions ) {
    					if( ev.propertyName !== 'visibility' ) return;
    					this.removeEventListener( transEndEventName, onEndTransitionFn );
    				}
    				classie.remove( overlay, 'close' );
    			};
    			if( support.transitions ) {
    				overlay.addEventListener( transEndEventName, onEndTransitionFn );
    			}
    			else {
    				onEndTransitionFn();
    			}
    		}
    		else if( !classie.has( overlay, 'close' ) ) {
    			classie.add( overlay, 'open' );
    		}
    	}
    
    	triggerBttn.addEventListener( 'click', toggleOverlay );
    	closeBttn.addEventListener( 'click', toggleOverlay );
    })();

    Here I have just added menuopen = document.querySelector( 'div.menuopen' ), and classie.add( menuopen, 'open' ); to display the menu hamburger when clicking the closing cross. But, first the trigger button / hamburger icon must fadeout.

    With that in place, how do I execute this only for small screens, @media queries aside? Javascript? I don’t want to setup/register a specific menu for mobile / small screens in WP, therefor I need a solution with just one instance of wp_nav_menu in header.php.

    <div class="menuopen">
    <button id="trigger-overlay" class="overlay-open" type="button">Open Overlay</button>
    </div>
    
    <div class="overlay overlay-hugeinc">
    	<button type="button" class="overlay-close">Close</button>
    	<nav id="site-navigation" role="navigation">
    		<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu', 'container' => '' ) ); ?>
    	</nav><!-- #site-navigation -->
    </div><!-- .overlay overlay-hugeinc -->

    Just let me know if this is more of a job request. Thanks.

  5. So, the question can be boiled down to this, correct? “How do I run JS only at certain screen sizes?”

    If so, you can get the width like with this jQuery:

    if ( 740 < jQuery( window ).width() ) {
    
    	/* execute if below 740px */
    
    }

    However, that doesn’t account for when the screen size changes. For something like that, you might need resize():

    jQuery( window ).resize( function() {
    
    	if ( 740 < jQuery( this ).width() ) {
    
    		/* execute your code */
    	}
    } );
  6. Thanks. This looks promising.

    Do I just put the JS code I have posted where it says /* execute your code */ ?

    I’m sorry to be such a nag, but you have to remember I just read what functionality is in the JS code. Sort of. I do not write JS code. That would be a mess.