CSS nav-right প্রোপার্টি

nav-right প্রোপার্টি কীপ্যাডের ডান তীর বাটন চাপলে ফোকাস কোন এলিমেন্টে যাবে তা নির্ধারণ করে। এটি CSS3 UI মডিউলের অংশ, কিন্তু ব্রাউজার সমর্থন সীমিত।

উদাহরণ

নিচের কোডটি চালিয়ে CSS nav-right প্রোপার্টির ব্যবহার দেখুন:

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      button { 
        position: absolute; 
      } 
      button#btn1 { 
        top: 10%; left: 15%; 
        nav-index: 1; 
        nav-right: #btn2; 
        nav-left: #btn4; 
        nav-down: #btn2; 
        nav-up: #btn4; 
      } 
      button#btn2 { 
        top: 30%; left: 30%; 
        nav-index: 2; 
        nav-right: #btn3; 
        nav-left: #btn1; 
        nav-down: #btn3; 
        nav-up: #btn1; 
      } 
      button#btn3 { 
        top: 50%; left: 15%; 
        nav-index: 3; 
        nav-right: #btn4; 
        nav-left: #btn2; 
        nav-down: #btn4; 
        nav-up: #btn2; 
      } 
      button#btn4 { 
        top: 30%; left: 0%; 
        nav-index: 4; 
        nav-right: #btn1; 
        nav-left: #btn3; 
        nav-down: #btn1; 
        nav-up: #btn3; 
      } 
    </style> 
  </head> 
  <body> 
    <button id="btn1">Result1</button> 
    <button id="btn2">Result2</button> 
    <button id="btn3">Result3</button> 
    <button id="btn4">Result4</button> 
  </body> 
</html>

ব্যাখ্যা: nav-index ফোকাস ক্রম নির্ধারণ করে। nav-right: #btn2 মানে ডান তীর চাপলে ফোকাস #btn2 এ যাবে। nav-left, nav-up, nav-down সমানভাবে কাজ করে। দ্রষ্টব্য: এই প্রোপার্টিগুলো অধিকাংশ মডার্ন ব্রাউজারই সাপোর্ট করে না; JavaScript-ভিত্তিক ফোকাস ম্যানেজমেন্ট ব্যবহার করা ভালো।