css - Keep displaying childs in menu when clicked -
this first question on site. have been searching here many times , found answers needed.
i'm working on wordpress site using underscores.me ==> test.davidsfonds-zele.be
on left side can find vertical menu can opened click child-items.
when click , go belonging page, child item highlighted, can't see it, because menu isn't open anymore.
is there way let open?
the menu build in adminpanel of wordpress, because other admins (without webknowledge) permitted change menu well.
i've tried many things, without success. if have complete other way it, feel free learn me. think code used, way long... used following method have:
site-tutorial: http://cssmenumaker.com/blog/wordpress-accordion-menu-tutorial
function
class css_menu_maker_walker extends walker { var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' ); function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul>\n"; } function end_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "$indent</ul>\n"; } function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) { global $wp_query; $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $class_names = $value = ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; /* add active class */ if(in_array('current-menu-item', $classes)) { $classes[] = 'active'; unset($classes['current-menu-item']); } /* check children */ $children = get_posts(array('post_type' => 'nav_menu_item', 'nopaging' => true, 'numberposts' => 1, 'meta_key' => '_menu_item_menu_item_parent', 'meta_value' => $item->id)); if (!empty($children)) { $classes[] = 'has-sub'; } $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->id, $item, $args ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $value . $class_names .'>'; $attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : ''; $attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : ''; $attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : ''; $attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : ''; $item_output = $args->before; $item_output .= '<a'. $attributes .'><span>'; $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->id ) . $args->link_after; $item_output .= '</span></a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } function end_el( &$output, $item, $depth = 0, $args = array() ) { $output .= "</li>\n"; } }menu.php
<?php wp_nav_menu(array( 'menu' => 'linkermenu', // different you. 'container_id' => 'cssmenu', 'walker' => new css_menu_maker_walker() )); ?>javascript:
( function( $ ) { $( document ).ready(function() { $('#cssmenu li.has-sub>a').on('click', function(){ $(this).removeattr('href'); var element = $(this).parent('li'); if (element.hasclass('open')) { element.removeclass('open'); element.find('li').removeclass('open'); element.find('ul').slideup(); } else { element.addclass('open'); element.children('ul').slidedown(); element.siblings('li').children('ul').slideup(); element.siblings('li').removeclass('open'); element.siblings('li').find('li').removeclass('open'); element.siblings('li').find('ul').slideup(); } }); $('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>'); (function getcolor() { var r, g, b; var textcolor = $('#cssmenu').css('color'); textcolor = textcolor.slice(4); r = textcolor.slice(0, textcolor.indexof(',')); textcolor = textcolor.slice(textcolor.indexof(' ') + 1); g = textcolor.slice(0, textcolor.indexof(',')); textcolor = textcolor.slice(textcolor.indexof(' ') + 1); b = textcolor.slice(0, textcolor.indexof(')')); var l = rgbtohsl(r, g, b); if (l > 0.7) { $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)'); $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)'); } else { $('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)'); $('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)'); } })(); function rgbtohsl(r, g, b) { r /= 255, g /= 255, b /= 255; var max = math.max(r, g, b), min = math.min(r, g, b); var h, s, l = (max + min) / 2; if(max == min){ h = s = 0; } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch(max){ case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } return l; } }); } )( jquery );.css-file:
#cssmenu, #cssmenu ul, #cssmenu ul li{ position: relative; margin: 0; width: 100%; list-style: none; line-height: 1; display: block; } #cssmenu { width: 100%; float: left; font-size: 1em; font-family: 'lato', sans-serif; text-transform: uppercase; } #cssmenu ul li { font-weight: bold; background: #fff; padding: 5%; } #cssmenu ul li { position: relative; color: #4d4d4d; left: -10%; margin: 0; width: 100%; list-style: none; line-height: 1; display: block; cursor: pointer; z-index: 2; padding: 15px 7px; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; } #cssmenu > ul > li > a:hover{ background: #407194; color: #fff; text-decoration: none; } #cssmenu > ul > li.open > a{ background: #407194; color: #fff; text-decoration: none; display: block; position: relative; } #cssmenu > ul > li.active > { display: block; position: relative; } #cssmenu ul ul li { position: relative; left: -30%; margin: 0; width: 150%; list-style: none; line-height: 1; display: block; cursor: pointer; color: #ed6d16; z-index: 2; padding: 10%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd; } #cssmenu ul ul li:hover > a{ background: #f68615; color: #fff; text-decoration: none; } #cssmenu ul ul li.open > a{ background: #407194; color: #fff; text-decoration: none; display: block; position: relative; } #cssmenu ul ul li.active > { display: block; position: relative; } #cssmenu ul ul li.has-sub > a::after { display: block; position: absolute; content: ""; width: 500px; height: 5px; right: 20px; z-index: 10; top: 11.5px; border-top: 2px solid #eeeeee; border-left: 2px solid #eeeeee; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after { border-color: #ffffff; } #cssmenu ul li li.current-menu-item.current_page_item { background: #407194; color: #fff; text-decoration: none; display: block; } #cssmenu ul ul { display: none; } .holder { width: 0; height: 0; position: absolute; top: 0; right: 0; } .holder::after, .holder::before { display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 20px; z-index: 10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .holder::after { top: 17px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; } #cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > > span::after, #cssmenu > ul > li.open > > span::after { border-color: #eeeeee; } .holder::before { top: 18px; border-top: 2px solid; border-left: 2px solid; border-top-color: inherit; border-left-color: inherit; }
i suggest use css classes available in wordpress's navigation menus. in case, can have function in javascript make elements .current-menu-parent or .current-menu-ancestor @ accordion menu open. code below although have not tested (since can't) :
$('#cssmenu li.has-sub.current-menu-parent').addclass('open').children('ul').slidedown(); that should make particular menu show if place in document ready.
Comments
Post a Comment