javascript - Insert hash into url to turn it into an anchor -
i'm using wordpress, , trying figure out how hack links within sub-menus.
i've set demo here: http://brandsite.simpletruth.io/logo/
specifically, want add hash in front of second-level menu links become same-page anchors instead of going separate page.
for instance:
http://brandsite.simpletruth.io/logo/logo-spacing/
becomes:
http://brandsite.simpletruth.io/logo#logo-spacing
ideally happens within wordpress, think doing javascript okay solution too.
thanks!
you have use custom walker function
in instance:
in functions
class custom_names extends walker_nav_menu { /* start of <ul> * * note on $depth: counterintuitively, $depth here means "depth right before start menu". * add 1 you'd expect */ function start_lvl(&$output, $depth = 0, $args = array()) { $indent = str_repeat("\t", $depth); $output .= "\n$indent<ul class=\"children\">\n"; } /* end of <ul> * * note on $depth: counterintuitively, $depth here means "depth right before start menu". * add 1 you'd expect */ function end_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat("\t", $depth); $output .= "$indent</ul>\n"; } /* output <li> , containing <a> * note: $depth "correct" @ level */ function start_el( &$output, $item, $depth = 0, $args = array(), $current_object_id = 0 ) { $indent = ( $depth ) ? str_repeat( "\t", $depth ) : ''; $classes = empty( $item->classes ) ? array() : (array) $item->classes; $classes[] = 'menu-item-' . $item->id; $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth ); $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) ); $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : ''; $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->id, $item, $args, $depth ); $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; $output .= $indent . '<li' . $id . $class_names .'>'; $atts = array(); $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : ''; $atts['target'] = ! empty( $item->target ) ? $item->target : ''; $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; $atts['href'] = ! empty( $item->url ) ? $item->url : ''; $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth ); $attributes = ''; foreach ( $atts $attr => $value ) { if ( ! empty( $value ) ) { $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); $attributes .= ' ' . $attr . '="' . $value . '"'; } if ($depth == 1) { $attributes = ' ' . $attr . '="'.str_replace(basename ($item->url), '#'.str_replace(' ', '-', strtolower ($item->title)), $value).'"'; } } $title = apply_filters( 'the_title', $item->title, $item->id ); $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth ); $item_output = $args->before; $item_output .= '<a'. $attributes .'>'; $item_output .= $args->link_before . $title . $args->link_after; $item_output .= '</a>'; $item_output .= $args->after; $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); } /* close <li> * note: <a> closed * note 2: $depth "correct" @ level */ function end_el ( &$output, $item, $depth = 0, $args = array()) { $output .= '</li>'; return; } /* add 'haschildren' property item * code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633 */ function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) { // check whether item has children, , set $item->haschildren accordingly $element->haschildren = isset($children_elements[$element->id]) && !empty($children_elements[$element->id]); // continue normal behavior return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output); } } in header.php (or wherever menu is)
<?php wp_nav_menu( array('walker' => new custom_names())); ?>
Comments
Post a Comment