PHP / Wordpress - add arrows to parent menus
is it possible to add some kind of class like 'arrow' 开发者_Python百科or a span inside the menus that have submenus (in Wordpress)? it seems that you can do this is using javascript, but I want to know if there's a PHP solution...
in WP 3.0, I saw that active menus have the "parent" or "ancestor" classes on them, but this is only for active menu, and I need it for inactive ones as well
This functionality really should be in WordPress core!
Anyway, I had a look at the menu template source you sent in a comment on the other answer, and have found a (rather hacky) way to add a class on menu items with children. It basically subclasses the default walker to extend its default behaviour. It's probably best if you put it in your theme's functions.php
. Here's the code:
<?php
class Arrow_Walker_Nav_Menu extends Walker_Nav_Menu {
function display_element($element, &$children_elements, $max_depth, $depth=0, $args, &$output) {
$id_field = $this->db_fields['id'];
if (!empty($children_elements[$element->$id_field])) {
$element->classes[] = 'arrow'; //enter any classname you like here!
}
Walker_Nav_Menu::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
}
}
?>
To call it, you'll need to add the walker
argument when you call wp_nav_menu()
in your theme, like so:
<?php
wp_nav_menu(array('walker' => new Arrow_Walker_Nav_Menu, [other arguments...]))
?>
Hope that works for you! I've only tested it superficially, but it seems to work. Let me know if there are any edge cases where adding the class fails.
I don't know of any native WordPress support for it, but you could easily do it using some jQuery.
<script type="text/javascript">
$("#menu-id ul li:has(ul)").addClass("parent");
</script>
If you're like me and want to add an HTML arrow in a span to your parent menu item, add a line like this inside of Donald Harvey's customer walker class:
$element->title .= '<span class="caret down-caret">▼</span>';
You can could also add that HTML directly to the menu label in the WP admin > menu page but that's not a great way to do it.
I blogged a bit about this here http://cameronnokes.com/blog/adding-an-icon-to
Just paste this in to your css code and it will work as expected.
.nav-menu li > a:after {
color: #888;
content: ' ▾';
}
.nav-menu li > a:hover:after {
color: #444;
content: ' ▾';
}
.nav-menu li > a:only-child:after {
content: '';
}
Ps. Don't forget to set your page UTF-8
The simple and humble way to add the class parent to main menu if it has sub menu
<script type="text/javascript">
jQuery(document).ready(function($) {
$("ul.sub-menu").parents().addClass('parent');
});
</script>
And the style is
<style type="text/css">
.main-navigation .parent > a, .main-navigation .parent > a:hover {
background-image: url("images/arrow.png");
background-position: right center;
background-repeat: no-repeat;
}
</style>
I don't know what is question but we can add arrow in menu by css
like this:
.menu li > a:after {
color: #fff;
content: ' ▾';
}
.menu li > a:only-child:after {
content: '';
}
精彩评论