css 将子菜单指示符添加到Genesis中的导航菜单项

Posted 2021-05-13

/** Sub menu indicators will appear for all the menus. If you would like to restrict it (recommended for performance reasons) to one or more specific menu(s), specify their names in the following code in child theme’s functions.php:
/**
 * Apply Dropdown Menu Class to Primary Only
 *
 * @author Bill Erickson
 * @link https://gist.github.com/billerickson/6700212
 *
 * @param array $menus, theme locations
 * @return array $menus
 */
function be_dropdown_class_on_primary( $menus ) {
  return array( 'primary' );
}
add_filter( 'dropdown_menu_class_menus', 'be_dropdown_class_on_primary' );

/** That’s it.
/** This method works in any Genesis child theme and in fact any WordPress theme with appropriate changes to the CSS selectors. The nice thing about using icon fonts vs images is that the sub menu indicators get the same color (active and hover) and font size as the menu items and looks good with any theme with no further tweaks.

Update on December 25, 2013: From my personal experience and that of a blog reader, entypo fonts do not always seem to appear in all the browsers. Therefore I wrote an updated tutorial where Font Awesome font icons can be used instead. 

Follow http://www.sridharkatakam.com/adding-nav-sub-menu-indicators-genesis-using-font-awesome/.

I’ve posted on this topic in the past here. Bill Erickson released a plugin very recently and using it over code dropped in functions.php (from my earlier post) has added benefits.

Think of what’s covered in this article as a front-end to Bill Erickson’s Dropdown Menu Class plugin.

Providing a visual indication of child menu items’ presence enhances your website’s user experience. Visitors do not have to hover on every menu item to see if there is a sub menu.

In this article I show how sub menu indicators i.e, down arrow icon for menu items having a vertical sub menu and right arrow icon for menu items having a horizontal sub menu can be automatically inserted.

Add a custom class to li elements having children

Download dropdown-menu-class.php. Upload it to plugins directory and activate it.
Get the down and right arrow icon fonts

We are going to use @font-face so that right and down arrow icon fonts can be used in CSS.

Download this zip file, extract it and upload fonts folder to active child theme directory. For anyone curious, I got the eot, svg, ttf and woff files inside that zip file by selecting ‘down-open’ and ‘right-open-mini’ Entypo icons at Fontello.

/* Sub menu indicators
--------------------------------------------- */
@font-face {
  font-family: 'entypo';
  src: url('fonts/entypo.eot?40834763');
  src: url('fonts/entypo.eot?40834763#iefix') format('embedded-opentype'),
       url('fonts/entypo.woff?40834763') format('woff'),
       url('fonts/entypo.ttf?40834763') format('truetype'),
       url('fonts/entypo.svg?40834763#entypo') format('svg');
  font-weight: normal;
  font-style: normal;
}

.genesis-nav-menu > .menu-item.menu-item-has-children > a:after {
    content: "\e760";
    font-family: 'entypo';
    padding-left: 0.5em;
    speak: none;
}

ul.sub-menu li.menu-item-has-children > a:after {
    content: "\e762";
    font-family: 'entypo';
    padding-left: 1em;
    speak: none;
}