একটি sidenav উপাদান নির্মাণ

কিভাবে sidenav থেকে একটি প্রতিক্রিয়াশীল স্লাইড তৈরি করা যায় তার একটি মৌলিক ওভারভিউ

অ্যাডাম আর্গিল

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

আপনি যদি ভিডিও পছন্দ করেন তবে এখানে এই পোস্টটির একটি YouTube সংস্করণ রয়েছে:

ওভারভিউ

একটি প্রতিক্রিয়াশীল নেভিগেশন সিস্টেম তৈরি করা কঠিন। কিছু ব্যবহারকারী একটি কীবোর্ডে থাকবে, কারো কাছে শক্তিশালী ডেস্কটপ থাকবে, এবং কেউ একটি ছোট মোবাইল ডিভাইস থেকে ভিজিট করবে। পরিদর্শন করা প্রত্যেকেরই মেনু খুলতে এবং বন্ধ করতে সক্ষম হওয়া উচিত।

ডেস্কটপ থেকে মোবাইল প্রতিক্রিয়াশীল লেআউট ডেমো
আইওএস এবং অ্যান্ড্রয়েডে হালকা এবং অন্ধকার থিম

ওয়েব কৌশল

এই উপাদান অন্বেষণে আমি কয়েকটি সমালোচনামূলক ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্য একত্রিত করার আনন্দ পেয়েছি:

  1. CSS :target
  2. CSS গ্রিড
  3. CSS রূপান্তরিত করে
  4. ভিউপোর্ট এবং ব্যবহারকারীর পছন্দের জন্য CSS মিডিয়া ক্যোয়ারী
  5. focus UX বর্ধনের জন্য JS

আমার সমাধানের একটি সাইডবার আছে এবং শুধুমাত্র যখন 540px বা তার কম "মোবাইল" ভিউপোর্টে টগল করে। মোবাইল ইন্টারেক্টিভ লেআউট এবং স্ট্যাটিক ডেস্কটপ লেআউটের মধ্যে স্যুইচ করার জন্য 540px হবে আমাদের ব্রেকপয়েন্ট।

CSS :target সিউডো-ক্লাস

একটি <a> লিঙ্ক ইউআরএল হ্যাশকে #sidenav-open এবং অন্যটি খালি ( '' ) তে সেট করে। অবশেষে, একটি উপাদানের হ্যাশের সাথে মেলে id রয়েছে:

<a href="#sidenav-open" id="sidenav-button" title="Open Menu" aria-label="Open Menu">

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

<aside id="sidenav-open">
  …
</aside>

এই লিঙ্কগুলির প্রতিটিতে ক্লিক করলে আমাদের পৃষ্ঠার URL-এর হ্যাশ অবস্থার পরিবর্তন হয়, তারপর একটি ছদ্ম-শ্রেণীর সাহায্যে আমি সাইডেনাভ দেখাই এবং লুকাই:

@media (max-width: 540px) {
  #sidenav-open {
    visibility: hidden;
  }

  #sidenav-open:target {
    visibility: visible;
  }
}

CSS গ্রিড

অতীতে, আমি শুধুমাত্র পরম বা স্থির অবস্থান sidenav লেআউট এবং উপাদান ব্যবহার করতাম। গ্রিড যদিও, এর grid-area সিনট্যাক্স সহ, আমাদের একই সারি বা কলামে একাধিক উপাদান বরাদ্দ করতে দেয়।

স্ট্যাক

প্রাথমিক লেআউট উপাদান #sidenav-container হল একটি গ্রিড যা 1টি সারি এবং 2টি কলাম তৈরি করে, প্রতিটির 1টি stack নামে পরিচিত। যখন স্থান সীমাবদ্ধ থাকে, তখন CSS সমস্ত <main> উপাদানের সন্তানকে একই গ্রিড নামে বরাদ্দ করে, সমস্ত উপাদানকে একই স্থানে স্থাপন করে, একটি স্ট্যাক তৈরি করে।

#sidenav-container {
  display: grid;
  grid: [stack] 1fr / min-content [stack] 1fr;
  min-height: 100vh;
}

@media (max-width: 540px) {
  #sidenav-container > * {
    grid-area: stack;
  }
}

<aside> হল অ্যানিমেটিং উপাদান যা সাইড নেভিগেশন ধারণ করে। এটির 2টি শিশু রয়েছে: নেভিগেশন কন্টেইনার <nav> নামের [nav] এবং একটি ব্যাকড্রপ <a> নামে [escape] , যা মেনু বন্ধ করতে ব্যবহৃত হয়।

#sidenav-open {
  display: grid;
  grid-template-columns: [nav] 2fr [escape] 1fr;
}

মেনু ওভারলে এবং এর নেতিবাচক স্থান বন্ধ বোতামের জন্য আপনার পছন্দের অনুপাত খুঁজে পেতে 2fr এবং 1fr সামঞ্জস্য করুন।

আপনি অনুপাত পরিবর্তন করলে কি হয় তার একটি ডেমো।

CSS 3D রূপান্তর এবং রূপান্তর

আমাদের লেআউট এখন একটি মোবাইল ভিউপোর্ট আকারে স্ট্যাক করা হয়েছে৷ যতক্ষণ না আমি কিছু নতুন শৈলী যোগ করি, এটি ডিফল্টরূপে আমাদের নিবন্ধকে ওভারলে করছে। এখানে কিছু UX আছে যার জন্য আমি এই পরবর্তী বিভাগে শুটিং করছি:

  • খোলা এবং বন্ধ অ্যানিমেট
  • শুধুমাত্র গতির সাথে অ্যানিমেট করুন যদি ব্যবহারকারী এটির সাথে ঠিক থাকে
  • visibility অ্যানিমেট করুন যাতে কীবোর্ড ফোকাস অফস্ক্রিন উপাদানে প্রবেশ না করে

আমি মোশন অ্যানিমেশন বাস্তবায়ন শুরু করার সাথে সাথে, আমি মনের শীর্ষে অ্যাক্সেসযোগ্যতা দিয়ে শুরু করতে চাই।

অ্যাক্সেসযোগ্য গতি

সবাই স্লাইড আউট মোশন অভিজ্ঞতা চাইবে না। আমাদের সমাধানে এই পছন্দটি একটি মিডিয়া কোয়েরির ভিতরে একটি --duration CSS ভেরিয়েবল সামঞ্জস্য করে প্রয়োগ করা হয়। এই মিডিয়া ক্যোয়ারী মানটি গতির জন্য ব্যবহারকারীর অপারেটিং সিস্টেমের পছন্দকে প্রতিনিধিত্ব করে (যদি উপলব্ধ থাকে)।

#sidenav-open {
  --duration: .6s;
}

@media (prefers-reduced-motion: reduce) {
  #sidenav-open {
    --duration: 1ms;
  }
}
প্রয়োগের সময়কালের সাথে এবং ছাড়া ইন্টারঅ্যাকশনের একটি ডেমো।

এখন যখন আমাদের sidenav খোলা এবং বন্ধ স্লাইড করা হয়, যদি একজন ব্যবহারকারী হ্রাস করা গতি পছন্দ করে, আমি অবিলম্বে উপাদানটিকে দৃশ্যে স্থানান্তরিত করি, গতি ছাড়াই অবস্থা বজায় রাখি।

রূপান্তর, রূপান্তর, অনুবাদ

সিডেনাভ আউট (ডিফল্ট)

মোবাইলে আমাদের sidenav-এর ডিফল্ট অবস্থাকে অফস্ক্রিন অবস্থায় সেট করতে, আমি উপাদানটিকে transform: translateX(-110vw) দিয়ে অবস্থান করি।

দ্রষ্টব্য, আমি -100vw এর সাধারণ অফস্ক্রিন কোডে আরেকটি 10vw যোগ করেছি, যাতে নিশ্চিত করা যায় যে sidenav-এর box-shadow লুকানো অবস্থায় মূল ভিউপোর্টে উঁকি দেয় না।

@media (max-width: 540px) {
  #sidenav-open {
    visibility: hidden;
    transform: translateX(-110vw);
    will-change: transform;
    transition:
      transform var(--duration) var(--easeOutExpo),
      visibility 0s linear var(--duration);
  }
}
সিডেনভ ইন

যখন #sidenav উপাদানটি :target হিসাবে মেলে, তখন translateX() অবস্থানটি হোমবেস 0 এ সেট করুন এবং দেখুন CSS উপাদানটিকে তার -110vw এর আউট অবস্থান থেকে 0 ওভার var(--duration) এর "ইন" অবস্থানে স্লাইড করে। যখন URL হ্যাশ পরিবর্তন করা হয়।

@media (max-width: 540px) {
  #sidenav-open:target {
    visibility: visible;
    transform: translateX(0);
    transition:
      transform var(--duration) var(--easeOutExpo);
  }
}

স্থানান্তর দৃশ্যমানতা

এখন লক্ষ্য হল স্ক্রীনরিডারদের থেকে মেনুটি লুকিয়ে রাখা যখন এটি আউট হয়ে যায়, তাই সিস্টেমগুলি অফস্ক্রিন মেনুতে ফোকাস রাখে না। যখন :target পরিবর্তিত হয় তখন আমি একটি দৃশ্যমান রূপান্তর সেট করে এটি সম্পন্ন করি।

  • ভিতরে যাওয়ার সময়, দৃশ্যমানতা পরিবর্তন করবেন না; এখনই দৃশ্যমান হবে যাতে আমি উপাদানটি স্লাইড দেখতে পারি এবং ফোকাস গ্রহণ করতে পারি।
  • বাইরে যাওয়ার সময়, ট্রানজিশন ভিজিবিলিটি কিন্তু দেরি করে, তাই ট্রানজিশন আউটের শেষে লুকিয়ে hidden করে।

অ্যাক্সেসযোগ্যতা UX বর্ধিতকরণ

এই সমাধানটি রাষ্ট্র পরিচালনার জন্য URL পরিবর্তনের উপর নির্ভর করে। স্বাভাবিকভাবেই, <a> উপাদানটি এখানে ব্যবহার করা উচিত, এবং এটি বিনামূল্যে কিছু চমৎকার অ্যাক্সেসিবিলিটি বৈশিষ্ট্য পায়। আসুন আমাদের ইন্টারেক্টিভ উপাদানগুলিকে লেবেলগুলির সাথে স্পষ্টভাবে অভিপ্রায়ে সজ্জিত করি৷

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>

<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
  <svg>...</svg>
</a>
ভয়েসওভার এবং কীবোর্ড মিথস্ক্রিয়া UX এর একটি ডেমো।

এখন আমাদের প্রাথমিক মিথস্ক্রিয়া বোতামগুলি মাউস এবং কীবোর্ড উভয়ের জন্যই তাদের অভিপ্রায় স্পষ্টভাবে বর্ণনা করে৷

:is(:hover, :focus)

এই সুবিধাজনক CSS কার্যকরী ছদ্ম-নির্বাচক আমাদেরকে ফোকাসের সাথে শেয়ার করার মাধ্যমে আমাদের হোভার শৈলীগুলির সাথে দ্রুত অন্তর্ভুক্ত করতে দেয়।

.hamburger:is(:hover, :focus) svg > line {
  stroke: hsl(var(--brandHSL));
}

জাভাস্ক্রিপ্টে ছিটিয়ে দিন

বন্ধ করতে escape টিপুন

আপনার কীবোর্ডের Escape কীটি মেনুটি বন্ধ করতে হবে? চলুন যে আপ তারের.

const sidenav = document.querySelector('#sidenav-open');

sidenav.addEventListener('keyup', event => {
  if (event.code === 'Escape') document.location.hash = '';
});
ব্রাউজার ইতিহাস

ব্রাউজারের ইতিহাসে একাধিক এন্ট্রি স্ট্যাক করা থেকে খোলা এবং বন্ধ মিথস্ক্রিয়া প্রতিরোধ করার জন্য, বন্ধ বোতামে নিম্নলিখিত জাভাস্ক্রিপ্ট ইনলাইন যোগ করুন:

<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu" onchange="history.go(-1)"></a>

এটি বন্ধ করার সময় ইউআরএল ইতিহাসের এন্ট্রি মুছে ফেলবে, এটি এমনভাবে তৈরি করবে যেন মেনুটি কখনই খোলা হয়নি।

UX ফোকাস করুন

পরবর্তী স্নিপেটটি খোলা বা বন্ধ করার পরে খোলা এবং বন্ধ বোতামগুলিতে ফোকাস রাখতে সাহায্য করে। আমি টগল করা সহজ করতে চাই।

sidenav.addEventListener('transitionend', e => {
  const isOpen = document.location.hash === '#sidenav-open';

  isOpen
      ? document.querySelector('#sidenav-close').focus()
      : document.querySelector('#sidenav-button').focus();
})

যখন sidenav খোলে, বন্ধ বোতামে ফোকাস করুন। সিডেনাভ বন্ধ হয়ে গেলে, খোলা বোতামে ফোকাস করুন। আমি জাভাস্ক্রিপ্টের উপাদানটিতে focus() কল করে এটি করি।

উপসংহার

এখন আপনি জানেন যে আমি কীভাবে এটি করেছি, আপনি কীভাবে করবেন?! এটি কিছু মজার উপাদান আর্কিটেকচারের জন্য তৈরি করে! কে স্লট সহ 1 ম সংস্করণ করতে যাচ্ছে? 🙂

আসুন আমাদের পদ্ধতির বৈচিত্র্য আনুন এবং ওয়েবে তৈরি করার সমস্ত উপায় শিখি। একটি ত্রুটি তৈরি করুন, আমাকে আপনার সংস্করণ টুইট করুন , এবং আমি এটিকে নীচের সম্প্রদায়ের রিমিক্স বিভাগে যোগ করব৷

কমিউনিটি রিমিক্স