Prevent slideout from closing when clicking parent menu item?
-
I’m using the 82 street theme by webavenue.
What should happen: Click on menu icon and menu slides out, click on item in menu and submenu items are displayed.
The problem is that after the menu first opens, clicking on a parent item to display its submenu instead closes the entire menu. When you reopen it the submenu items are visible but this should happen without the menu collapsing after the first click.
Is there any custom css or javascript that I can add that will fix this?
Menu style is 3 for the code below.
functions.php:
class eightytwostreet_walker_nav_menu extends Walker_Nav_Menu { private $logo; private $count_root_items = 0; private $total_root_items = 0; private $menu_style = 1; private $start_menu = false; private $print_logo = false; function __construct($menu_location, $logo, $menu_style) { $this->logo = $logo; $this->menu_style = $menu_style; $menu_name = $this->get_menu_name($menu_location); if(!empty($menu_name)) { $menu = wp_get_nav_menu_object($menu_name); $items = wp_get_nav_menu_items( $menu->term_id ); $this->total_root_items = $this->get_number_of_root_elements($items); } } function get_menu_name($location){ if(!has_nav_menu($location)) return false; $menus = get_nav_menu_locations(); $menu_title = wp_get_nav_menu_object($menus[$location])->name; return $menu_title; } // ignore sub-menu start function start_lvl( &$output, $depth = 0, $args = array() ) { if($this->menu_style == 3) { $output .= '<ul>'; }else { $output .= '<ul class="dropdown-menu">'; } } // ignore sub-menu end function end_lvl( &$output, $depth = 0, $args = array() ) { $output .= '</ul>'; } function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; if($depth == 0 && $this->menu_style == 2) { if( ( $this->count_root_items % round ( $this->total_root_items / 2 ) ) == 0 ) { $this->start_menu = true; $output .= '<ul class="nav navbar-nav">'; } } if($depth <= 1 && !empty($item) && is_object($args)) { /* $child_pages = get_children( array('post_parent' => $item->object_id, 'post_type' => 'page', 'post_status' => 'publish')); */ if(!empty($item->classes) && in_array('menu-item-has-children', $item->classes)) { $has_children = true; }else { $has_children = false; } $classes = empty( $item->classes ) ? array() : (array) $item->classes; if($this->menu_style != 3) { $classes[] = ($has_children) ? 'dropdown' : ''; } /* $classes[] = ( in_array('menu-item-has-children', $item->classes) ) ? 'dropdown-toggle' : ''; */ $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $output .= '<li id="nav-menu-item-'. $item->ID .'" ' . $class_names. '>'; $attributes = ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $attributes .= ($has_children) ? ' class="dropdown-toggle"' : ''; $attributes .= ($has_children) ? ' data-toggle="dropdown"' : ''; $item_output = sprintf( '%1$s<a%2$s>%3$s%4$s%5$s</a>%6$s', $args->before, $attributes, $args->link_before, apply_filters( 'the_title', $item->title, $item->ID ), $args->link_after, $args->after ); $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); if(!empty($child_pages)) { $output .= '<ul class="dropdown-menu">'; foreach ($child_pages as $key => $page) { $output .= '<li><a href="'.get_permalink($page->ID).'">'.$page->post_title.'</a></li>'; } $output .= '</ul>'; } } } function end_el( &$output, $item, $depth = 0, $args = array() ) { if($depth <= 1) { $output .= "</li>"; } if($depth == 0 && $this->menu_style == 2) { $this->count_root_items++; if( ( $this->count_root_items % round ( $this->total_root_items / 2 ) ) == 0 ) { $output .= '</ul>'; $this->start_menu = false; if($this->print_logo == false) { $output .= $this->logo; $this->print_logo = true; } } if( $this->start_menu && $this->count_root_items == $this->total_root_items) { $output .= '</ul>'; } } } }
main.js:
// Dropdown Menu $(".dropdown").hover(function() { $('.dropdown-menu', this).stop( true, true ).fadeIn("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).fadeOut("fast"); $(this).toggleClass('open'); }); $(".navbar-nav > li a").click(function(){ $(this).closest('ul').find('li.active').removeClass('active').find('ul').hide(); }); // Hide Navigation $(".navbar-nav li:not('.dropdown') a").click(function() { $(".navbar-collapse").collapse('hide'); }); // For Mobile Menu fix $(".navbar-toggle").click(function(){ _this = this; if($(window).width() <= 1340 && $(window).scrollTop() == 0) { if($(_this).hasClass('collapsed')) { $('body').addClass('scrolling'); }else { $('body').removeClass('scrolling'); } } }); // Dropdown $('.navbar-nav > li:has(ul) > a').click(function(e){ e.preventDefault(); $(this).next('ul').slideToggle(); $(this).parent('li').toggleClass('active'); });
The page I need help with: [log in to see the link]
- The topic ‘Prevent slideout from closing when clicking parent menu item?’ is closed to new replies.