ऐंकर पोज़िशनिंग टैब अंडरलाइन

टैब मेन्यू में, उपयोगकर्ताओं को विज़ुअल हिंट देने चाहिए, ताकि उन्हें पता चल सके कि वे किस पेज पर हैं. एक तरीका यह है कि टैब को अंडरलाइन किया जाए. ऐंकर पोज़िशनिंग की मदद से, अंडरलाइन की पोज़िशन के बीच एक स्मूद ऐनिमेशन बनाया जा सकता है. यह सुविधा तब काम नहीं करती, जब ऐक्टिव टैब बदलने पर कोई नया वेब पेज लोड होता है.

इस इफ़ेक्ट का इस्तेमाल करके, वर्टिकल टैब बार में ऐक्टिव टैब को दिखाने के लिए, ऐनिमेशन वाला बिंदु भी जोड़ा जा सकता है.

<li> एलिमेंट वाले <ul> पर ::before स्यूडो-एलिमेंट का इस्तेमाल करके, अंडरलाइन बनाएं. स्यूडो-एलिमेंट का इस्तेमाल करना सबसे सही तरीका है, क्योंकि इससे डीओएम साफ़ रहता है. साथ ही, सिर्फ़ सजावटी इफ़ेक्ट के लिए अतिरिक्त एलिमेंट जोड़ने की ज़रूरत नहीं पड़ती.

ul::before {
  /* Use a pseudo-element on the container to represent the animated indicator */
  content: '';
}

सूची में मौजूद ऐक्टिव आइटम को ऐंकर बनाने के लिए, anchor-name प्रॉपर्टी जोड़ें. इसकी वैल्यू -- से शुरू होती है.

li.active {
  /* Make a unique anchor-name for the active element. */
  anchor-name: --active;
}

अंडरलाइन को ऐक्टिव आइटम ऐंकर से जोड़ें. इसके लिए, position-anchor का इस्तेमाल करें, जो ऐंकर पर मौजूद anchor-name से मैच करता हो. साथ ही, इसे position: absolute बनाएं.

ul::before {
  /* Tether the underline to the active element. */
  position: absolute;
  position-anchor: --active;
}

इनसेट प्रॉपर्टी और anchor() फ़ंक्शन का इस्तेमाल करके, अंडरलाइन को ऐंकर के हिसाब से पोज़िशन करें.

ul::before {
  /* DO NOT use position-area, which can not be transitioned. */
  /* Use calc() to offset the top slightly */
  inset-block-start: calc(anchor(bottom) + .1lh);
  inset-inline-start: anchor(left);
  inset-inline-end: anchor(right);
}

ऊंचाई और अन्य विज़ुअल स्टाइल जोड़ें.

ul::before {
  /* Apply your project's styles for the indicator */
  block-size: .25lh;
  background: red;
}

आखिर में, inset प्रॉपर्टी पर ट्रांज़िशन जोड़ें.

ul::before {
  @media (prefers-reduced-motion: no-preference) {
    /* MANDATORY: The transition must be wrapped in a prefers-reduced-motion media query to respect user preferences. */
    transition: inset .2s;
  }
}

यह सिर्फ़ एक विज़ुअल इंडिकेटर है. इसे सही aria-current="page" या aria-selected aria वैल्यू सेट करने के विकल्प के तौर पर इस्तेमाल नहीं किया जाना चाहिए.

<!-- MANDATORY: Provide explicit assistive technology state alongside the visual tab underline -->
<nav aria-label="Primary">
  <ul>
    <li class="active">
      <a href="/home" aria-current="page">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</nav>

फ़ॉलबैक रणनीतियां

अगर ब्राउज़र में ऐंकर पोज़िशनिंग की सुविधा काम नहीं करती है, तो अंडरलाइन जोड़ने के लिए border-bottom का इस्तेमाल करें. यह ऐनिमेट नहीं होगा.

ul li.active {
  @supports not (position-anchor: auto) {
    /* Choose a color appropriate to the app theme. */
    border-bottom: .25lh var(--primary) solid;
  }
}