alex
  • 0
Учитель

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

  • 0

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

    • 0
  2. Лучший и простой подход:

    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');
    
    • 0
  3. Вот грубый фрагмент, который заботится об изменении вывода меню и добавлении первого/последнего к первому и последнему классу (внешний 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;
    }
    

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

    • 0
  4. Вот функция для добавления только первого/последнего классов в пункты родительского меню. Для большинства стилей 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 );
    
    • 0
  5. Узнайте больше о новом API меню в WordPress 3. Вы можете вручную присвоить любому элементу собственный класс. Кроме того, после освоения это делает редактирование меню удовольствием.

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

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

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

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

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

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

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

    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
  9. Как насчет:

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

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

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

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

Оставить ответ

You must login to add an answer.