Submenu items indented on mobilemenu

[pardus]

Hey,

Just wondering if you have anything to group the submenu items with their parents on the mobile menu. My site has drop downs for each main menu item in the navbar. on mobile it turns into one big long list. I have built one for a magento theme using javascript that dynamically creates it on page load but havent done it on a wordpress theme. used this as reference http://jsfiddle.net/Kq43X/122/

I see your code in framework/frontend/functions/parts.php that builds it but wanted to see if you had the code change already that I could plug in there to give parents.

/** 
 * Responsive wp nav menu 
 *
 * @since 2.0.0
 *
 * @param string $location Location of wp nav menu to grab
 * @return string $select_menu Select menu version of wp nav menu
 */

if( ! function_exists( 'themeblvd_nav_menu_select' ) ) {
	function themeblvd_nav_menu_select( $location ) {
		$select_menu = '';
		$locations = get_nav_menu_locations();
		if( isset( $locations[$location] ) ) {
			$menu = wp_get_nav_menu_object( $locations[$location] );
			if( is_object( $menu ) ) {
				$menu_items = wp_get_nav_menu_items( $menu->term_id );
				if( ! empty( $menu_items ) ) {
					$select_menu .= '<form class="responsive-nav" action="" method="post">';
					$select_menu .= '<select class="tb-jump-menu">';
					$select_menu .= '<option value="">'.themeblvd_get_local('navigation').'</option>';
					foreach( $menu_items as $key => $item )
						$select_menu .= '<option value="'.$item->url.'">'.$item->title.'</option>';
					$select_menu .= '</select>';
					$select_menu .= '</form>';
				}
			}
		}
		return $select_menu;
	}
}

Topic

[Jason Bobich]

Hello,

This is a good question. In the next update to the theme, I’ve got a button that you can display that will toggle the graphic navigation on mobile. But for the simple select menu, this is a good option, as well; I will most likely add this, too.

Here’s how you can accomplish this from your Child theme. Paste this code above where the framework is included in your Child theme’s functions.php:

http://pastie.org/6148320

[edit] The above code is missing a couple items. This is a better version to use for those browsing this topic: http://pastie.org/6423062

[magicss]

I tried this at http://seattlegirlschoir.org/wp/home02/ (still in development), and it works to show the menu at the small screen size. What does not work is the part where the menu item selection goes anywhere. It only puts the selection into the menu “field” — but the menu does not “go”.

Can you help me finish this so that the menu goes to each menu link?
-SS

(I am also interested in learning how to have this Navigation Menu have the word “Navigation” like the original version.)

(And, I would like to learn if it is possible to build one that would indicate the menus that have subitems and have the sub items open and expand only when touched, clicked or hovered.)

[Jason Bobich]

@magicss —

What does not work is the part where the menu item selection goes anywhere. It only puts the selection into the menu “field” — but the menu does not “go”.

I think the reason is you have a javascript error in your site from the code that comes just before the jump menu. See screenshot: http://www.uploadblvd.com/uploads/image_5138e8ee7a90a.png — Something to do with what you’re doing with social icons it looks like? I’m not sure.

I am also interested in learning how to have this Navigation Menu have the word “Navigation” like the original version.

In that code you used, find this part:

'items_wrap' => '<form class="responsive-nav"><select>%3$s</select></form>',

And change it to this:

'items_wrap' => '<form class="responsive-nav"><select><option value="">Navigation</option>%3$s</select></form>',

And, I would like to learn if it is possible to build one that would indicate the menus that have subitems and have the sub items open and expand only when touched, clicked or hovered.

It sounds like your just describing the graphic mobile navigation option that comes with the theme? Have you played with that?

[magicss]

Thanks for all of the above.

As for:

It sounds like your just describing the graphic mobile navigation option that comes with the theme? Have you played with that?

I meant that the small one field mobile menu that expands could perform this way.

As I understand it there are three menus: the Main Horizontal for the full screen, and the two mobile choices: the Graphic one that is like Stacked Buttons or Blocks and then the One Field Mobile that expands down to a list (that can be modified to have the indents). [There are so many names and IDs, but there are these three menus I think.]
Anyway, I have played with all three.
I was thinking that if the One Field Mobile menu (that can be modified to have the indents) could also be modified to only expand the submenus that a user touches or clicks, then we would have the least screen space with the most reward for the users.

[magicss]

I really appreciate your help on this, and as I respond, I aim to make this useful for others too.
The Modified Mobile Menu did not fire its menu links even after I deleted that java error that you caught.
So I switched back to the version of the menu that comes with the theme and it works fine. (I had done this a few times prior to my first post. It is still true.)
Then when I re-upload the “functions.php” from my child theme with the nice new modified code, again the new menu does appear but it again “goes nowhere.”
So I assume that it is not the add ons (like that bad java for example) or the All In One Calendar plugin (also in play), but rather that there must be a way to do this with the existing configuration along with your modified code for the menu with the indentations.
The catch is that I am not fluent enough to find the bug.
Thank you for looking. In case you have time to look some more, I will leave the New Modified Menu with Indentations in place at http://www.seattlegirlschoir.org/wp (Just know that whenever I take it out of the child theme, and revert to the original one, that the original one works fine.)
-SS

[Jason Bobich]

Try it like this: http://pastie.org/6423062

[magicss]

This is Spectacular! Thank you so much Jason.
-Steffan

[insightgraphics]

Thanks! Works for me, too.

[Author]

Replies