css - WordPress 导航 - 如何在菜单项内添加数据悬停？

Question

我想在我的网站中使用一些创意链接效果 - http://tympanus.net/codrops/2013/08/06/creative-link-effects/

我已经将 modernizer.js 放在了 header.php 中

如何在菜单项中添加“数据悬停”。

实际上菜单看起来是这样的:

<ul class="menu" id="menu-informationen-aus">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39" id="menu-item-39"><a href="http://www.example.de/" target="_blank">Nachrichten</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-40" id="menu-item-40"><a href="http://www.example.de/component/option,com_eventlist/Itemid,180/" target="_blank">Veranstaltungen</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-41" id="menu-item-41"><a href="http://www.example.de/content/view/78/81/" target="_blank">Vereine</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-42" id="menu-item-42"><a href="http://www.example.de/content/blogsection/5/46/" target="_blank">Bildungseinrichtungen</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-43" id="menu-item-43"><a href="http://www.example.de/content/view/103/92/">Stadtbibliothek</a></li>

Answer 1

您可以使用 Custom Walker 将属性添加到菜单项 (http://codex.wordpress.org/Function_Reference/wp_nav_menu#Using_a_Custom_Walker_Function)

那么你的 PHP 看起来像这样:

wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new your_walker())
 );

然后您需要创建一个扩展 Walker_Nav_Menu 的类。它看起来像这样:

class description_walker extends Walker_Nav_Menu
{
        function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
                $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

                $class_names = $value = '';

                $classes = empty( $item->classes ) ? array() : (array) $item->classes;
                $classes[] = 'menu-item-' . $item->ID;


                $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 .'>';

                $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['data-hover'] = 'Desultory';


                $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );

                $attributes = '';
                foreach ( $atts as $attr => $value ) {
                        if ( ! empty( $value ) ) {
                                $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                                $attributes .= ' ' . $attr . '="' . $value . '"';
                        }
                }

                $item_output = $args->before;
                $item_output .= '<a'. $attributes .'>';
                /** This filter is documented in wp-includes/post-template.php */
                $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
                $item_output .= '</a>';
                $item_output .= $args->after;


                $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }
}

您可以在 wordpress 中找到此示例，位于:wp-includes/nav-menu-template.php

这里重要的一行是:

$atts['data-hover'] = 'Desultory';