এই কোডল্যাব আপনাকে শেখায় কিভাবে ওয়েবে একটি প্রতিক্রিয়াশীল স্লাইড আউট সাইড নেভিগেশন লেআউট উপাদান তৈরি করতে হয়। আমরা এইচটিএমএল, তারপর CSS, তারপর জাভাস্ক্রিপ্ট দিয়ে শুরু করে কম্পোনেন্ট তৈরি করব।
এই উপাদানটি তৈরি করার জন্য নির্বাচিত CSS ওয়েব প্ল্যাটফর্ম বৈশিষ্ট্যগুলি সম্পর্কে জানতে আমার ব্লগ পোস্টটি দেখুন একটি সিডেনাভ উপাদান তৈরি করা ।
সেটআপ
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
-
app/index.htmlখুলুন।
এইচটিএমএল
প্রথমে, এইচটিএমএল সেটআপের প্রয়োজনীয় জিনিসগুলি পান যাতে কাজ করার জন্য সামগ্রী এবং কিছু বাক্স থাকে৷
<body> ট্যাগে নিম্নলিখিত HTML ড্রপ করুন।
<aside></aside>
<main></main>
<aside> ন্যাভিগেশন মেনুকে <main> এর জন্য একটি প্রশংসাসূচক উপাদান হিসেবে ধরে রাখে, যা প্রাথমিক পৃষ্ঠার বিষয়বস্তু ধারণ করে।
পরবর্তীতে আমরা পৃষ্ঠার বাকি বিষয়বস্তুর সাথে সেই শব্দার্থিক উপাদানগুলি পূরণ করব।
<aside> উপাদানের ভিতরে একটি নেভিগেশন উপাদান, কিছু নেভিগেশন লিঙ্ক এবং একটি বন্ধ লিঙ্ক যোগ করুন।
<aside>
<nav>
<h4>My</h4>
<a href="#">Dashboard</a>
<a href="#">Profile</a>
<a href="#">Preferences</a>
<a href="#">Archive</a>
<h4>Settings</h4>
<a href="#">Accessibility</a>
<a href="#">Theme</a>
<a href="#">Admin</a>
</nav>
<a href="#"></a>
</aside>
লিঙ্কগুলি <nav> উপাদানগুলির মধ্যে দুর্দান্ত যায় এবং <nav> উপাদানগুলি <aside> সাইডবারগুলিতে দুর্দান্ত হয়। তবুও, উন্নতি করার জন্য আমরা আরও কিছু করতে পারি।
মূল বিষয়বস্তুর উপাদানে, লেআউট বিষয়বস্তুকে শব্দার্থগতভাবে ধরে রাখতে একটি শিরোনাম এবং একটি নিবন্ধ যোগ করুন।
<main>
<header>
<a href="#sidenav-open" class="hamburger">
<svg viewBox="0 0 50 40">
<line x1="0" x2="100%" y1="10%" y2="10%" />
<line x1="0" x2="100%" y1="50%" y2="50%" />
<line x1="0" x2="100%" y1="90%" y2="90%" />
</svg>
</a>
<h1>Site Title</h1>
</header>
<article>
{put some placeholder content here}
</article>
</main>
হেডারে মেনু খোলা লিঙ্ক আছে। পাশের ক্লোজ বোতাম রয়েছে। আমরা শীঘ্রই ভিউপোর্ট আকারের উপর ভিত্তি করে উপাদানগুলি দেখাব এবং লুকাব৷
<article> উপাদানে, আমরা একটি স্থানধারক বাক্য পেস্ট করেছি। আপনার নিজের জিনিস দিয়ে `` প্রতিস্থাপন করুন, অথবা নিচে দেওয়া লরেম পেস্ট করুন:
<h2>Totam Header</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cum consectetur, necessitatibus velit officia ut impedit veritatis temporibus soluta? Totam odit cupiditate facilis nisi sunt hic necessitatibus voluptatem nihil doloribus! Enim.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<h3>Subhead Totam Odit</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<h3>Subhead</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugit rerum, amet odio explicabo voluptas eos cum libero, ex esse quasi optio incidunt soluta eligendi labore error corrupti! Dolore, cupiditate porro.</p>
এই বিষয়বস্তু, এবং এর দৈর্ঘ্য, যা আপনার ভিউপোর্টের উচ্চতা অতিক্রম করলে পৃষ্ঠাটিকে স্ক্রোলযোগ্য করে তোলে।
এখন পর্যন্ত আপনি একটি নেভি, লিঙ্ক এবং sidenav বন্ধ করার একটি উপায় সহ একটি আলাদা উপাদান যোগ করেছেন। আপনি একটি শিরোনাম, sidenav খোলার একটি উপায় এবং মূল উপাদানটিতে একটি নিবন্ধ যোগ করেছেন। এটি ইতিমধ্যেই পরিষ্কার, শব্দার্থিক এবং বেশ নিরবধি, কিন্তু আমরা প্রত্যেকের জন্য এটিকে আরও পরিষ্কার এবং পরিষ্কার করতে পারি৷ সাইডেনাভের খোলা লিঙ্কটি আরও স্পষ্টভাবে চিহ্নিত করা যেতে পারে।
হেডার ওপেন লিঙ্ক এলিমেন্টে অ্যাট্রিবিউট title এবং aria-label যোগ করুন:
<a href="#sidenav-open" class="hamburger">
<a href="#sidenav-open" title="Open Menu" aria-label="Open Menu" class="hamburger">
খোলা SVG আইকনটি আরও স্পষ্টভাবে চিহ্নিত করা যেতে পারে। খোলা লিঙ্ক উপাদানের ভিতরে SVG-তে নিম্নলিখিত বৈশিষ্ট্যগুলি যোগ করুন:
<svg viewBox="0 0 50 40">
<svg viewBox="0 0 50 40" role="presentation" focusable="false" aria-label="trigram for heaven symbol">
সাইডেনাভের ঘনিষ্ঠ লিঙ্কটি আরও স্পষ্টভাবে চিহ্নিত করা যেতে পারে। সাইডেনাভ ক্লোজ লিঙ্ক এলিমেন্টে অ্যাট্রিবিউট title এবং aria-label যোগ করুন:
<a href="#"></a>
<a href="#" title="Close Menu" aria-label="Close Menu"></a>
সিএসএস
উপাদান লেআউট করার সময়. মূল বিষয়বস্তু এবং sidenav হল <body> ট্যাগের সরাসরি সন্তান, তাই এটি শুরু করার জন্য একটি ভাল জায়গা।
css/sidenav.css এ নিচের CSS যোগ করুন যাতে <body> উপাদানটি বাচ্চাদের সাজাতে পারে।
body {
display: grid;
grid: [stack] 1fr / min-content [stack] 1fr;
@media (max-width: 540px) {
& > :matches(aside, main) {
grid-area: stack;
}
}
}
এই লেআউটটি মূলত বলে: এটিতে থাকা সমস্ত কিছু সহ একটি নামযুক্ত সারি stack তৈরি করুন এবং সেই সারিতে 2টি কলাম, যার 2য়টির নামও stack । 1ম কলামটি তার ন্যূনতম বিষয়বস্তুর চাহিদা অনুসারে মাপ করা উচিত এবং 2য় কলামটি বাকি অংশ নিতে পারে৷ তারপর, যদি 540px বা তার কম সীমাবদ্ধ ভিউপোর্টে থাকে, তাহলে sidenav এবং প্রধান বিষয়বস্তু উপাদানগুলিকে একই সারি এবং কলামে রাখুন, যার ফলে তারা 1x1 গ্রিডে একে অপরের উপরে থাকবে।
বেস হিসাবে এই প্রতিক্রিয়াশীল স্ট্যাকিং কার্যকারিতা সহ, আমরা এখন sidenav-এর দৃশ্যমানতা এবং রূপান্তর শৈলী টগল করতে URL বারের অবস্থার সুবিধা নিতে পারি।
app/index.html এ <aside> উপাদানটি আপডেট করুন :
<aside>
<aside id="sidenav-open">
এটি একটি উপাদান এবং URL হ্যাশকে একসাথে মেলাতে CSS সক্ষম করে। এটির জন্য গুরুত্বপূর্ণ :target ব্যবহার। এখন উপাদানটির আইডি URL হ্যাশের সাথে মিলতে পারে যা আমরা <a> ট্যাগের সাথে সেট করব।
উপরন্তু, সহজ জাভাস্ক্রিপ্ট টার্গেটিং জন্য, sidenav নিয়ন্ত্রণ করে এমন মূল উপাদানগুলির জন্য ID যোগ করুন। প্রথমে, sidenav ওপেন লিঙ্কে একটি আইডি যোগ করুন:
<a href="#sidenav-open" class="hamburger" title="Open Menu" aria-label="Open Menu">
<a href="#sidenav-open" id="sidenav-button" class="hamburger" title="Open Menu" aria-label="Open Menu">
পরবর্তী, sidenav বন্ধ লিঙ্কে একটি আইডি যোগ করুন:
<a href="#" title="Close Menu" aria-label="Close Menu"></a>
<a href="#" id="sidenav-close" title="Close Menu" aria-label="Close Menu"></a>
এটি ম্যাক্রো <body> রেসপন্সিভ স্ট্যাকিং লেআউটকে গুটিয়ে রাখে এবং আমাদেরকে ইউআরএল বারে আবদ্ধ করে। চলো যেতে থাকি!
<aside> একটি ঝরঝরে বিন্যাস আছে. এটিতে 2টি শিশু রয়েছে, একটি <nav> যা কাগজের মতো দেখতে উপাদান যা স্লাইড করে, এবং একটি ক্লোজিং <a> লিঙ্ক উপাদান যা url সেট করে # । লিঙ্কটি পেপার স্লাইডের ডানদিকে অদৃশ্য। এটা তাই লোকেরা এটিকে খারিজ করার জন্য ভিজ্যুয়াল উপাদানটিকে "ক্লিক অফ" করতে পারে।
css/sidenav.css এ নিম্নলিখিত CSS যোগ করুন:
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
}
আমি ভেবেছিলাম অনুপাত এবং নামগুলি এখানে সত্যিই একটি চমৎকার স্পর্শ, যেখানে গ্রিড উজ্জ্বল হতে পারে এবং একজন ডিজাইনারকে অনেক নিয়ন্ত্রণ দিতে পারে।
পরবর্তীতে আমাকে শর্তসাপেক্ষে মূল বিষয়বস্তুকে ওভারলে করতে হবে এবং যেকোনো ডকুমেন্ট স্ক্রলিংয়ের মাধ্যমে আমার অবস্থান ধরে রাখতে হবে। এটি position: sticky এবং কিছু overscroll-behavior ।
sidenav এর জন্য নিম্নলিখিত শৈলী যোগ করুন:
#sidenav-open {
display: grid;
grid-template-columns: [nav] 2fr [escape] 1fr;
@media (max-width: 540px) {
position: sticky;
top: 0;
max-height: 100vh;
overflow: hidden auto;
overscroll-behavior: contain;
visibility: hidden; /* not keyboard accessible when closed */
}
}
এই স্টাইলগুলি নিশ্চিত করে যে sidenav হল ভিউপোর্টের উচ্চতা, উল্লম্বভাবে স্ক্রল করে এবং স্ক্রোল ধারণ করে। খুব গুরুত্বপূর্ণ, এটি উপাদানটি লুকিয়ে রাখে। ডিফল্টরূপে, যখন ভিউপোর্ট 540px বা ছোট হয়, সেই sidenav লুকান। যদি না!
#sidenav-open এলিমেন্টে একটি :target pseudo-selector যোগ করুন:
#sidenav-open {
@media (max-width: 540px) {
&:target {
visibility: visible;
}
}
}
যখন সেই উপাদানটির ID এবং URL বার একই হয়, তখন visibility visible হিসাবে সেট করুন। এগিয়ে যান এবং পৃষ্ঠাটি স্ক্রোল করার পরে পাশের মেনুটি খুলুন, বা sidenav খোলা থাকা অবস্থায় পৃষ্ঠাটি স্ক্রোল করার চেষ্টা করুন। আপনি কি মনে করেন?
app/sidenav.css এর নীচে নিম্নলিখিত CSS যোগ করুন:
#sidenav-button,
#sidenav-close {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
touch-action: manipulation;
@media (min-width: 540px) {
display: none;
}
}
এই শৈলীগুলি আমাদের খোলা এবং বন্ধ বোতামগুলিকে লক্ষ্য করে, তাদের ট্যাপ এবং স্পর্শ শৈলীগুলি নির্দিষ্ট করে এবং ভিউপোর্টগুলি 540px বা বড় হলে সেগুলি লুকিয়ে রাখে৷
কিছু ফ্লেয়ারের জন্য, আসুন সম্মানজনক অ্যাক্সেসযোগ্যতার সাথে CSS রূপান্তর যোগ করি। css/sidenav.css এ নিম্নলিখিত CSS যোগ করুন:
#sidenav-open {
--easeOutExpo: cubic-bezier(0.16, 1, 0.3, 1);
--duration: .6s;
...
@media (max-width: 540px) {
...
transform: translateX(-110vw);
will-change: transform;
transition:
transform var(--duration) var(--easeOutExpo),
visibility 0s linear var(--duration);
&:target {
visibility: visible;
transform: translateX(0);
transition: transform var(--duration) var(--easeOutExpo);
}
}
@media (prefers-reduced-motion: reduce) {
--duration: 1ms;
}
}
কিছু জাভাস্ক্রিপ্টে ছিটিয়ে দিন
Escape কী মেনু বন্ধ করা উচিত। এই JS যোগ করুন js/index.js :
const sidenav = document.querySelector('#sidenav-open');
sidenav.addEventListener('keyup', e => {
if (e.code === 'Escape') {
document.location.hash = '';
}
});
এটি sidenav উপাদানের একটি মূল ইভেন্টের জন্য শোনে। যদি এটি Escape , তাহলে এটি ইউআরএল হ্যাশকে খালি করতে সেট করে, যা sidenav ট্রানজিশন আউট করে দেয়।
UX JS-এর এই পরবর্তী অংশটি হল ফোকাস ব্যবস্থাপনা। আমি ওপেনিং এবং ক্লোজিং সহজ করতে চাই, তাই আমি যতক্ষণ পর্যন্ত না sidenav কোনো ধরনের ট্রানজিশন শেষ না হয় ততক্ষণ পর্যন্ত অপেক্ষা করি, তারপর এটি ইন বা আউট কিনা তা নির্ণয় করতে URL হ্যাশের বিপরীতে চেক করুন। আমি তখন জাভাস্ক্রিপ্ট ব্যবহার করি বোতামের উপর ফোকাস সেট করার জন্য যেটি তারা এইমাত্র টিপেছে।
js/index.js এ নিম্নলিখিত জাভাস্ক্রিপ্ট যোগ করুন:
const closenav = document.querySelector('#sidenav-close');
const opennav = document.querySelector('#sidenav-button');
sidenav.addEventListener('transitionend', e => {
if (e.propertyName !== 'transform') {
return;
}
const isOpen = document.location.hash === '#sidenav-open';
isOpen
? closenav.focus()
: opennav.focus();
});
চেষ্টা কর
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.
উপসংহার
যে আমি উপাদান সঙ্গে ছিল প্রয়োজনের জন্য একটি মোড়ানো. নির্দ্বিধায় এটি তৈরি করুন, এটিকে ইউআরএলের পরিবর্তে জাভাস্ক্রিপ্ট স্টেট দিয়ে চালান এবং সাধারণভাবে এটিকে আপনার করুন! কভার করার জন্য সবসময় যোগ করার জন্য আরও বেশি বা আরও বেশি ব্যবহার করা হয়।
আমি এই উপাদানটিতে প্রয়োগ করেছি এমন নন-লেআউট সম্পর্কিত শৈলীগুলি পরীক্ষা করতে css/brandnav.css খুলুন। আমি যে বৈশিষ্ট্য সেটে ফোকাস করছিলাম তার জন্য এটি গুরুত্বপূর্ণ বলে মনে হয়নি এবং আমি আশা করেছিলাম যে বিন্যাস থেকে শৈলী আলাদা করা কপি এবং পেস্টকে উত্সাহিত করবে। সেখানে আপনার জন্য আরো শেখার হতে পারে!
আপনি কিভাবে প্রতিক্রিয়াশীল sidenav উপাদান আউট স্লাইড করতে? আপনি কি কখনও 1 এর বেশি আছে, উভয় পক্ষের এক মত? আমি একটি YouTube ভিডিওতে আপনার সমাধানটি দেখাতে চাই, আমাকে টুইট করতে বা আপনার কোড সহ YouTube-এ মন্তব্য করতে ভুলবেন না, এটি সবাইকে সাহায্য করবে!