Mobile Menu WordPress

• SOLVED

Hi, I'm using hybrid core making a theme and am currently trying to get the mobile menu to work with a script that is used in Automattic's underscores theme.

Here is the menu-primary.php: <?php
/**
* Primary Menu Template
*
* Displays the Primary Menu if it has active menu items.
*
* @package Demo
* @subpackage Template
*/

if ( has_nav_menu( 'primary' ) ) : ?>

<?php do_atomic( 'before_menu_primary' ); // demo_before_menu_primary ?>

<div id="menu-primary" class="menu-container">

<?php do_atomic( 'open_menu_primary' ); // demo_open_menu_primary ?>

<h1 class="assistive-text"><?php _e( 'Menu', 'demo' ); ?></h1>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_class' => 'menu', 'menu_class' => '', 'menu_id' => 'menu-primary-items', 'fallback_cb' => '' ) ); ?>

<?php do_atomic( 'close_menu_primary' ); // demo_close_menu_primary ?>

</div><!-- #menu-primary .menu-container -->

<?php do_atomic( 'after_menu_primary' ); // demo_after_menu_primary ?>

<?php endif; ?>

and here is the menu script: https://github.com/Automattic/_s/blob/master/js/small-menu.js

I do not want to change any namespaces in the php since I dont want to affect the hybrid core. I just need someone to convert he namespaces in the script so the mobile menu works. I have the proper amount of css for the menus already in the css (it hides the menu initially and then I have it display at a lower width).

Demo site is http://jagst3r15.com

P.S. The menu should look something like http://twentytwelvedemo.wordpress.com/ at lower widths (disregard the css I can style on my own, just need help with the js/jquery).

P.P.S. I think I need to change all instances of masthead to menu-primary for example. After that I am stuck :(

Answers (1)

2012-09-10

Arnav Joy answers:

i am not sure this will work or not but please try and let me know..

<script>

jQuery( document ).ready( function( $ ) {
var $masthead = $( '#header' ),
timeout = false;

$.fn.smallMenu = function() {
$masthead.find( '#menu-primary-items' ).addClass( 'main-small-navigation' );
$masthead.find( '#menu-primary h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );

$( '.menu-toggle' ).unbind( 'click' ).click( function() {
$masthead.find( '.menu' ).toggle();
$( this ).toggleClass( 'toggled-on' );
} );
};

// Check viewport width on first load.
if ( $( window ).width() < 600 )
$.fn.smallMenu();

// Check viewport width when user resizes the browser window.
$( window ).resize( function() {
var browserWidth = $( window ).width();

if ( false !== timeout )
clearTimeout( timeout );

timeout = setTimeout( function() {
if ( browserWidth < 600 ) {
$.fn.smallMenu();
} else {
$masthead.find( '#menu-primary-items' ).removeClass( 'main-small-navigation' );
$masthead.find( '#menu-primary h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );
$masthead.find( '.menu' ).removeAttr( 'style' );
}
}, 200 );
} );
} );



</script>


---

Jagst3r21 comments:

Hi Arnav,

Thanks for the quick reply. It seems to work pretty well as you can see here http://www.responsinator.com/?url=jagst3r15.com but it still does'nt really work completely. The twenty twelve menu was a bad example. this one has a better example http://sundancedemo.wordpress.com see how menu is initially hidden and then when you click on it the drop-downs simply become a list?

Thanks so much :)

---

Arnav Joy comments:

try this

<script>
jQuery( document ).ready( function( $ ) {

var $masthead = $( '#header' ),

timeout = false;



$.fn.smallMenu = function() {

$masthead.find( '#menu-primary-items' ).addClass( 'main-small-navigation' );

$masthead.find( '#menu-primary h1' ).removeClass( 'assistive-text' ).addClass( 'menu-toggle' );



$( '.menu-toggle' ).unbind( 'click' ).click( function() {

$masthead.find( '.menu' ).toggle();

$( this ).toggleClass( 'toggled-on' );

} );

};



// Check viewport width on first load.

if ( $( window ).width() < 600 )
{
$.fn.smallMenu();
$('.menu').hide();
}



// Check viewport width when user resizes the browser window.

$( window ).resize( function() {

var browserWidth = $( window ).width();



if ( false !== timeout )

clearTimeout( timeout );



timeout = setTimeout( function() {

if ( browserWidth < 600 ) {

$.fn.smallMenu();

} else {

$masthead.find( '#menu-primary-items' ).removeClass( 'main-small-navigation' );

$masthead.find( '#menu-primary h1' ).removeClass( 'menu-toggle' ).addClass( 'assistive-text' );

$masthead.find( '.menu' ).removeAttr( 'style' );

}

}, 200 );

} );

} );
</script>