Добавление первых / последних классов CSS в меню

15

это возможно, без взлома 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>
Alex
источник
1
что не так с использованием JavaScript? для чего они нужны? Или это можно рассматривать как прогрессивное улучшение?
Мягкий пух

Ответы:

14

Лучший и более простой подход:

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');
Ismaelj
источник
1
Красиво и просто. Мне это нравится!
Джонатан Уолд
Я вижу, что этот код работает для пользовательских навигационных меню (я видел, как он работает в виджете пользовательского меню), но он не работает в том же меню, которое используется в основной навигационной панели (протестировано в Twenty Eleven). Должно ли это быть? или это будет другой код? или просто другой фильтр? Благодарность!
Эван Мэтсон
2
Это будет работать для одноуровневого меню, но не для более сложного, потому что на данный момент это массив со всеми элементами, а не с верхними уровнями.
Первый
6

Вот грубый фрагмент, который заботится об изменении вывода меню и добавлении первого / последнего к первому и последнему классу (внешний ulне применяется на этом этапе, поэтому не считается). Примечание - требуется PHP5 дляstrripos()

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;
}

Я немного застрял в том, как сделать так, чтобы он обрабатывал вложенные списки, но, по крайней мере, он поможет вам начать.

Rarst
источник
6

Вот функция для добавления только первого / последнего классов в родительские пункты меню. Для большинства стилей 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 );
Chaoix
источник
1
именно то, что я искал. Благодарю. удивительно, что wp_nav_menu не делает этого автоматически
yitwail
Я согласен. Я полагаю, что некоторое время в багтрекере Wordpress был запрос функции, но ничего из этого не вышло. По крайней мере, существуют надлежащие фильтры, чтобы мы могли добавить эти классы;).
Chaoix
1
Благодарю. Искал счетчик, который можно было бы использовать в меню ходунков. ваш ответ позволяет это. Просто добавил $ item-> number = $ i; и получил это в ходунках. Благодарность!!!
BasTaller
5

Узнайте больше о новом Menus API в WordPress 3. Вы можете назначить любой элемент его классу вручную. Кроме того, однажды освоив, он делает меню приятным для редактирования.

Мягкий пух
источник
2
Это будет путь, просто вызовите экран меню навигации в админке и добавьте класс к первому и последнему пунктам. Конечно, если пользователь перемещает эти пункты меню, классы должны быть переназначены, но это, я считаю, самый правильный / лучший ответ (потому что здесь не требуется никакого кодирования).
t31os
5

Если у вас есть вложенные меню

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');

Мне нравится простота ответа Исмаэля, но должно быть больше, если вы хотите подменю классов.

казарка
источник
2

Если вам не нужна поддержка IE8 или ниже, не забудьте, что вы также можете использовать чистый CSS:

.my_menu > :first-child,
.my_menu > :last-child {
    /* some styles */
}

Поддержка браузера jQuery еще лучше, но, похоже, вы пытаетесь этого избежать.

mrwweb
источник
Я использую это, потому что last-child теперь также поддерживается IE 9, и меня больше не волнует то есть 8, 7 ..
Alex
2

Вот некоторый лучший код для добавления первого и последнего классов пунктов меню, который включает поддержку вложенных подменю.

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;

}

Вы можете найти суть здесь и соответствующий учебник здесь .

Томас
источник
0

Как насчет:

 ul li:last-child{
     // do something with the last li
 }

и, возможно, некоторые http://selectivizr.com/

утра
источник
Это будет стиль первым <li>в каждом неупорядоченном списке на сайте, а не только в меню. Он также практически идентичен этому ответу wordpress.stackexchange.com/a/63128/9844
mrwweb
Извините, псевдокод.
утра
0

Чистый CSS, у меня работает. Это также будет работать с подменю

ul.nav>li:last-of-type a
Дэн Грин-Лейпцигер
источник
только в IE9 и выше, что исключает практически все, что я делаю :)
Milo