将第一个/最后一个CSS类添加到菜单

时间:2010-09-13 作者:Alex

如果没有javascript黑客,这是可能的吗?像这样:

<ul class="my_menu">
  <li class="first"> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li class"with_sub"> ... 
    <ul class="my_menu_sub">
      <li class="first"> ... </li>
      <li> ... </li>
      <li> ... </li>
      <li class="last"> ... </li>
    </ul>
  </li>
  <li> ... </li>
  <li> ... </li>
  <li class="last"> ... </li>
</ul>

9 个回复
最合适的回答,由SO网友:Ismaelj 整理而成

更好、更简单的方法:

function add_first_and_last($items) {
  $items[1]->classes[] = \'first-menu-item\';
  $items[count($items)]->classes[] = \'last-menu-item\';
  return $items;
}

add_filter(\'wp_nav_menu_objects\', \'add_first_and_last\');

SO网友:Rarst

下面是一个粗略的代码片段,它负责修改菜单输出并将first/last添加到first和last类(外部ul 在此阶段不应用,因此不计算在内)。注-需要PHP5strripos()

add_filter( \'wp_nav_menu_items\', \'first_last_class\' );

function first_last_class( $items ) {

    $first = strpos( $items, \'class=\' );

    if( false !== $first )
         $items = substr_replace( $items, \'first \', $first+7, 0 );

    $last = strripos( $items, \'class=\');

    if( false !== $last )
         $items = substr_replace( $items, \'last \', $last+7, 0 );

    return $items;
}
我有点纠结于如何让它处理嵌套列表,但至少应该让您开始。

SO网友:Chaoix

这里的函数仅用于将第一个/最后一个类添加到父菜单项。对于大多数CSS样式,这是所有必要的。

function nav_menu_add_classes( $items, $args ) {
    //Add first item class
    $items[1]->classes[] = \'menu-item-first\';

    //Add last item class
    $i = count($items);
    while($items[$i]->menu_item_parent != 0 && $i > 0) {
        $i--;
    }
    $items[$i]->classes[] = \'menu-item-last\';

    return $items;
}
add_filter( \'wp_nav_menu_objects\', \'nav_menu_add_classes\', 10, 2 );

SO网友:Mild Fuzz

了解有关new Menus API 在wordpress 3中。您可以手动为任何元素指定它自己的类。而且,一旦掌握了,它使菜单成为编辑的乐趣。

SO网友:brent

如果有嵌套菜单

function add_first_and_last($items) {
    // first class on parent most level
    $items[1]->classes[] = \'first\';
    // separate parents and children
    $parents = $children = array();
    foreach($items as $k => $item){
        if($item->menu_item_parent == \'0\'){
            $parents[] = $k;
        } else {
            $children[$item->menu_item_parent] = $k;
        }
    }
    // last class on parent most level
    $last = end(array_keys($parents));
    foreach ($parents as $k => $parent) {
        if ($k == $last) {
            $items[$parent]->classes[] = \'last\';
        }
    }
    // last class on children levels
    foreach($children as $child){
        $items[$child]->classes[] = \'last\';
    }
    // first class on children levels
    $r_items = array_reverse($items, true);
    foreach($r_items as $k => $item){
        if($item->menu_item_parent !== \'0\'){
            $children[$item->menu_item_parent] = $k;
        }
    }
    foreach($children as $child){
        $items[$child]->classes[] = \'first\';
    }
    return $items;
}
add_filter(\'wp_nav_menu_objects\', \'add_first_and_last\');
我喜欢Ismaelj的简单回答,但如果你想要子菜单类,还需要更多。

SO网友:mrwweb

如果您不需要IE8或更低版本的支持,请不要忘记您也可以使用纯CSS:

.my_menu > :first-child,
.my_menu > :last-child {
    /* some styles */
}
jQuery浏览器支持甚至更好,但听起来您似乎在试图避免这种情况。

SO网友:Thomas

下面是一些更好的代码,用于添加第一个和最后一个菜单项类,其中包括对嵌套子菜单的支持。

add_filter( \'wp_nav_menu_objects\', \'tgm_filter_menu_class\', 10, 2 );
/**
 * Filters the first and last nav menu objects in your menus
 * to add custom classes.
 *
 * This also supports nested menus.
 *
 * @since 1.0.0
 *
 * @param array $objects An array of nav menu objects
 * @param object $args Nav menu object args
 * @return object $objects Amended array of nav menu objects with new class
 */
function tgm_filter_menu_class( $objects, $args ) {

    // Add first/last classes to nested menu items
    $ids        = array();
    $parent_ids = array();
    $top_ids    = array();
    foreach ( $objects as $i => $object ) {
        // If there is no menu item parent, store the ID and skip over the object
        if ( 0 == $object->menu_item_parent ) {
            $top_ids[$i] = $object;
            continue;
        }

        // Add first item class to nested menus
        if ( ! in_array( $object->menu_item_parent, $ids ) ) {
            $objects[$i]->classes[] = \'first-menu-item\';
            $ids[]          = $object->menu_item_parent;
        }

        // If we have just added the first menu item class, skip over adding the ID
        if ( in_array( \'first-menu-item\', $object->classes ) )
            continue;

        // Store the menu parent IDs in an array
        $parent_ids[$i] = $object->menu_item_parent;
    }

    // Remove any duplicate values and pull out the last menu item
    $sanitized_parent_ids = array_unique( array_reverse( $parent_ids, true ) );

    // Loop through the IDs and add the last menu item class to the appropriate objects
    foreach ( $sanitized_parent_ids as $i => $id )
        $objects[$i]->classes[] = \'last-menu-item\';

    // Finish it off by adding classes to the top level menu items
    $objects[1]->classes[] = \'first-menu-item\'; // We can be assured 1 will be the first item in the menu :-)
    $objects[end( array_keys( $top_ids ) )]->classes[] = \'last-menu-item\';

    // Return the menu objects
    return $objects;

}
你可以找到要点here 以及相关教程here.

SO网友:a.m.

怎么样:

 ul li:last-child{
     // do something with the last li
 }
也许还有一些http://selectivizr.com/

SO网友:Dan Green-Leipciger

纯CSS,适合我。这也适用于子菜单

ul.nav>li:last-of-type a

结束

相关推荐

是否将插件限制为仅在选定页面上加载其CSS和JS?

我想让一个插件将CSS样式表和JavaScript JS文件的加载限制为只加载需要的页面。我的问题的一个例子是插件Contact Form 7 我用它在我的网站上的一个页面上创建了一个表单contact me“页面)。但是,它会在网站上的每个页面/帖子中添加以下行:<link rel=\'stylesheet\' id=\'contact-form-7-css\' href=\'http://www.r-statistics.com/wp-content/plugins/contact-form-