মেনুতে প্রথম / শেষ সিএসএস ক্লাস যুক্ত করা হচ্ছে

Question

জাভাস্ক্রিপ্ট হ্যাক ছাড়া এটি কি সম্ভব? এটার মত:

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

Comments

জাভাস্ক্রিপ্ট ব্যবহারে কী দোষ আছে? এটি কি তাদের জন্য মূল কার্যকারিতা? অথবা এটি কি প্রগতিশীল বৃদ্ধি হিসাবে দেখা যেতে পারে?

— হালকা Fuzz

Answer 1

একটি ভাল এবং সহজ পদ্ধতির:

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

Comments

সুন্দর এবং সহজ। আমি এটা পছন্দ করি!

— জোনাথন ওল্ড

আমি দেখতে পাচ্ছি যে এই কোডটি কাস্টম এনএভি মেনুগুলির জন্য কাজ করে (আমি দেখেছি এটি একটি কাস্টম মেনু উইজেটে কাজ করে) তবে এটি প্রাথমিক ম্যান বারে ব্যবহৃত একই মেনুতে কাজ করছে না (বিশ টানা একাদশে পরীক্ষিত)। এটা করা উচিত? বা যে ভিন্ন কোড হবে? বা অন্য একটি ফিল্টার? ধন্যবাদ!

— ইভান ম্যাটসন

এটি একক স্তরের মেনুর জন্য কাজ করবে, তবে এটি আরও জটিল কোনওটির জন্য নাও হতে পারে কারণ এই মুহুর্তে এটি শীর্ষ স্তরেরগুলি নয়, সমস্ত আইটেমের সাথে অ্যারে।

— রাস্ট

Answer 2

এখানে মোটামুটি স্নিপেট যা মেনু আউটপুট পরিবর্তন করতে এবং প্রথম / শেষ থেকে প্রথম এবং শেষ শ্রেণিতে যোগ করার যত্ন নেয় (বাইরের ulএই পর্যায়ে প্রয়োগ হয় না তাই গণনা করা হয় না)। দ্রষ্টব্য - এর জন্য পিএইচপি 5 প্রয়োজন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;
}

এটিকে নেস্টেড তালিকাগুলি কীভাবে পরিচালনা করতে হয় সে সম্পর্কে আমি কিছুটা আটকে আছি, তবে এটি আপনাকে কমপক্ষে শুরু করা উচিত।

Answer 3

এখানে প্যারেন্ট মেনু আইটেমগুলিতে কেবল প্রথম / শেষ শ্রেণি যুক্ত করার জন্য একটি ফাংশন দেওয়া আছে। বেশিরভাগ সিএসএস স্টাইলিংয়ের জন্য, এটি প্রয়োজনীয়।

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

Comments

ঠিক আমি খুঁজছেন ছিল কি. ধন্যবাদ। এটি এক ধরণের অবাক করা wp_nav_menu স্বয়ংক্রিয়ভাবে এটি করে না

— ywwail

আমি রাজী. আমি বিশ্বাস করি কিছুক্ষণের জন্য ওয়ার্ডপ্রেস বাগ-ট্র্যাকারটিতে একটি বৈশিষ্ট্য অনুরোধ ছিল, তবে কিছুই এলো না। কমপক্ষে যথাযথ ফিল্টার উপস্থিত রয়েছে তাই আমরা এই ক্লাসগুলি যুক্ত করতে পারি;)।

— চৌইক্স

ধন্যবাদ। কাউন্টারটি খুঁজছিল, যা মেনু ওয়াকারে ব্যবহৃত হতে পারে। আপনার উত্তর এটি অনুমতি দেয়। সবেমাত্র $ আইটেম-> নম্বর = $ i; এবং এটি ওয়াকারে পেয়েছি। ধন্যবাদ !!!

— BasTaller

Answer 4

ওয়ার্ডপ্রেস 3 এ নতুন মেনু এপিআই সম্পর্কে আরও জানুন আপনি নিজের শ্রেণীর যেকোন উপাদান ম্যানুয়ালি দিতে পারেন। এছাড়াও, একবার আয়ত্ত হওয়ার পরে এটি মেনুগুলি সম্পাদনা করার জন্য আনন্দিত করে তোলে।

Comments

এটি যাওয়ার উপায় হবে, কেবল অ্যাডমিনে এনএভি মেনু স্ক্রিনটি নিয়ে আসুন এবং প্রথম এবং শেষ আইটেমগুলিতে একটি শ্রেণি যুক্ত করুন। অবশ্যই যদি ব্যবহারকারী এই মেনু আইটেমগুলি সরিয়ে দেয় তবে ক্লাসগুলি পুনরায় বরাদ্দ করতে হবে, তবে এটি আমার মনে হয় সবচেয়ে কার্যকর / সেরা উত্তর (কারণ কোনও কোডিং এর সাথে জড়িত নেই)।

— t31os

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

ইসমাইলজের উত্তরের সরলতা আমি পছন্দ করি তবে আপনি সাব-মেনু ক্লাস চাইলে আরও কিছু হওয়া দরকার।

Answer 6

আপনার যদি আইই 8 বা তার চেয়ে কম সমর্থন প্রয়োজন না, তবে ভুলে যাবেন না যে আপনি খাঁটি সিএসএসও ব্যবহার করতে পারেন:

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

jQuery ব্রাউজার সমর্থন আরও ভাল, তবে আপনি এটি এড়ানোর চেষ্টা করছেন বলে মনে হচ্ছে।

Comments

আমি এটি ব্যবহার করছি, কারণ শেষ শিশুটি এখন IE 9 দ্বারা সমর্থিত, এবং আমি 8, 7 সম্পর্কে এত বেশি যত্ন করি না

— অ্যালেক্স

Answer 7

প্রথম এবং শেষ মেনু আইটেম ক্লাস যুক্ত করার জন্য এখানে আরও ভাল কোড দেওয়া হয়েছে যা নেস্টেড সাবমেনাসের জন্য সমর্থন অন্তর্ভুক্ত করে।

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;

}

আপনি সারকথা জানতে পারেন এখানে এবং সংশ্লিষ্ট টিউটোরিয়াল এখানে ।

Answer 8

কেমন:

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

এবং সম্ভবত কিছু http://selectivizr.com/

Comments

এটি <li>কেবল মেনুতে নয়, সাইটের প্রতিটি অ-নিয়ন্ত্রিত তালিকার মধ্যে প্রথম স্টাইল করবে । এছাড়া অত্যান্ত এই উত্তর অভিন্ন এর wordpress.stackexchange.com/a/63128/9844

— mrwweb

দুঃখিত, ছদ্ম কোড।

— am

Answer 9

খাঁটি সিএসএস, আমার জন্য কাজ করে। এটি সাবমেনাসের সাথেও কাজ করবে

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

Comments

কেবল আই

— মিলো