Off-canvas মেনু এবং Drilldown মেনু

Foundation ফ্রেমওয়ার্ক-এ দুটি জনপ্রিয় মেনু অপশন হলো Off-canvas মেনু এবং Drilldown মেনু। এই দুটি মেনু টাইপ রেসপনসিভ ডিজাইনের জন্য অত্যন্ত উপযোগী, এবং এগুলি ব্যবহারকারী অভিজ্ঞতাকে উন্নত করতে সহায়তা করে। Foundation-এর এই দুটি মেনু মডিউল তৈরি করতে খুবই সহজ এবং এগুলির মাধ্যমে ব্যবহারকারীরা একটি ইন্টারেক্টিভ এবং মোবাইল-ফ্রেন্ডলি মেনু পেতে পারেন।

Off-canvas মেনু

Off-canvas মেনু হলো একটি সাইড মেনু, যা স্ক্রীনের বাইরে থাকে এবং ইউজার ক্লিক বা সুইপ করার মাধ্যমে দৃশ্যে আনে। এটি সাধারণত মোবাইল এবং ট্যাবলেট ডিভাইসে ব্যবহৃত হয়, যেখানে স্ক্রীন স্পেস সীমিত থাকে।

বৈশিষ্ট্য:

• মেনুটি স্ক্রীনের বাইরে থাকে এবং ইউজার ক্লিক বা স্ক্রীন স্লাইডের মাধ্যমে এটি খোলা হয়।
• ব্যবহারকারী ইন্টারফেসকে অপরিবর্তিত রাখে, কারণ মেনুটা স্ক্রীনের বাইরে থাকে এবং সিস্টেমের মূল কন্টেন্টের উপরিভাগে চলে আসে।
• সাধারণত মোবাইল ডিভাইসে ব্যবহৃত হয়।

Off-canvas মেনু তৈরির উদাহরণ:

<!-- মেনু বাটন -->
<a href="#" class="button" data-toggle="offCanvas">Menu</a>

<!-- Off-canvas মেনু -->
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  <ul class="vertical menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

<!-- Main content -->
<div class="off-canvas-content" data-off-canvas-content>
  <h1>Main Content</h1>
  <p>Content goes here...</p>
</div>

এখানে:

• data-toggle="offCanvas" মেনু বাটন ক্লিক করলে মেনুটি খোলার জন্য ব্যবহৃত হয়।
• off-canvas position-left ক্লাসটি মেনুর অবস্থান নির্ধারণ করে (এখানে বাম দিকে রাখা হয়েছে)।
• data-off-canvas অ্যাট্রিবিউটটি মেনুকে off-canvas হিসেবে চিহ্নিত করে।

Off-canvas মেনুর স্টাইলিং:

Foundation স্বয়ংক্রিয়ভাবে মেনু স্লাইড করার এনিমেশন এবং স্টাইলিং প্রয়োগ করবে। আপনি যদি প্রয়োজন হয়, তবে CSS বা Sass দিয়ে আরও কাস্টমাইজ করতে পারেন।

Drilldown মেনু

Drilldown মেনু একটি স্ট্যাকড মেনু, যেখানে একাধিক সাব-মেনু থাকে এবং একটিতে ক্লিক করলে পরবর্তী স্তরের মেনু খুলে যায়। এটি ব্যবহারকারীদের পছন্দ অনুযায়ী বিভিন্ন স্তরের মেনুতে নেভিগেট করতে সহায়তা করে।

বৈশিষ্ট্য:

• সাব-মেনু Drilldown করে, অর্থাৎ একটি মেনু আইটেমে ক্লিক করলে তার নিচের সাব-মেনু দেখানো হয়।
• এটি সাধারণত ডেস্কটপ অথবা ট্যাবলেট ডিভাইসে ব্যবহৃত হয়, যেখানে মেনু উপাদানগুলো একটি স্থানে রাখা সম্ভব।
• একাধিক স্তরের মেনু প্রোভাইড করে যা সহজে নেভিগেট করা যায়।

Drilldown মেনু তৈরির উদাহরণ:

<!-- Drilldown মেনু -->
<ul class="menu drilldown" data-drilldown>
  <li><a href="#">Home</a></li>
  <li><a href="#">Services</a>
    <ul class="menu">
      <li><a href="#">Web Development</a></li>
      <li><a href="#">App Development</a></li>
      <li><a href="#">SEO</a></li>
    </ul>
  </li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

এখানে:

• data-drilldown অ্যাট্রিবিউটটি মেনুতে Drilldown কার্যকারিতা চালু করে।
• প্রথম স্তরের মেনুর একটি আইটেমে ক্লিক করলে সাব-আইটেমগুলো drill down করে দেখানো হয়।

Drilldown মেনুর বৈশিষ্ট্য:

• মেনুতে স্তরের ডাউনলিংকিং সিস্টেম থাকে, অর্থাৎ সাব মেনুতে ক্লিক করলে নীচের স্তরের মেনু দেখা যায়।
• এটি অটোমেটিকভাবে ডিভাইসের আকার অনুযায়ী রেসপনসিভ হয়ে কাজ করে।

Off-canvas মেনু এবং Drilldown মেনুর মধ্যে পার্থক্য

Off-canvas মেনু এবং Drilldown মেনু দুইটি অত্যন্ত শক্তিশালী উপাদান Foundation ফ্রেমওয়ার্কের অংশ। Off-canvas মেনু মোবাইল-ফার্স্ট ডিজাইন এবং স্ক্রীন স্পেসের জন্য উপযুক্ত, যেখানে মেনুটি স্ক্রীনের বাইরে থাকে এবং ইউজার ক্লিক বা সুইপের মাধ্যমে দেখানো হয়। অপরদিকে, Drilldown মেনু ডেস্কটপ এবং বড় স্ক্রীনে ব্যবহৃত হয়, যেখানে একাধিক স্তরের মেনু থাকে এবং প্রতিটি স্তরে ক্লিক করলে পরবর্তী স্তর খোলা হয়। Foundation এই দুটি মেনু তৈরি করার জন্য সহজেই কাস্টমাইজযোগ্য টুল প্রদান করে।