আসেন, শুধু html/css দিয়ে ড্রপডাউন মেন্যু বানাই (checkbox tricks-2)

কেমন আছেন ভাই-লোগ? শিরোনাম দেইখা আজীব লাগতেছে? এখনই তব্দা খাইয়েন না, আরও আজীব জিনিস আসতেছে, একবারে সবগুলা খাইয়েন।

আজকে আমরা শুধু html/css দিয়া একটা ড্রপডাউন মেন্যু বানায় ফেলবো, তাও :hover দিয়ে ড্রপডাউন মেন্যু না, onClick ড্রপডাউন মেন্যু। মানে- ক্লিক করলে মেন্যু আসবে, আবার ক্লিক করলে চলে যাবে।

আচ্ছা, সবার আগে নিচের ডেমোটা দেখেন-

এইটা একটা সিম্পল ড্রপডাউন মেন্যু। তবে এর মধ্যে html/css এর পাশাপাশি JQuery -এর কিছু কাজও আছে। আমাদের আজকের এই টিউটরিয়ালের উদ্দেশ্য- এই একই ধরনের মেন্যু আমরা শুধু এবং শুধু html/css দিয়ে করবো। অর্থাৎ- বাটনে ক্লিক করলে মেন্যু বাইর হয়া আসবে, তারপর আবার বাটনে ক্লিক করলে মেন্যু চইলা যাবে। html/css ছাড়া অন্য কোন ল্যাঙ্গুয়েজ ব্যবহার করবো না।

যা কিছু লাগবে

প্রথমে লাগবে একটি input type=”checkbox”। তারপর লাগবে একটি label ট্যাগ। আর একটি আন-অর্ডার লিস্ট (ul) এবং তার মধ্যে কিছু লিস্ট আইটেম (li) তো লাগবেই।

এগুলো ছাড়া … আগের পোস্টে আমরা কিছু সাইন বা চিহ্ন নিয়ে আলোচনা করেছিলাম, যেগুলোর সাহায্যে আমরা বিভিন্ন ধরণের সিলেক্টর তৈরি করতে পারি। সেগুলো থেকে কয়েকটি সাইন নিয়েও আজকে কাজ করবো।

ওকে … তাহলে প্রথমে মার্ক-আপ করে ফেলি। প্রথমে আমরা label ট্যাগ নেবো না, প্রথমে শুধু input ট্যাগ নেবো এবং সেটা দিয়েই কাজ করবো। তারপর আমরা input এবং label দুইটা নিয়েই কাজ করবো এবং দেখবো যে label কিভাবে input এর হয়ে কাজ করে। আরেকটি গুরুত্বপূর্ণ বিষয় হলো- input এবং ul একই প্যারেন্ট এলিমেন্টের চাইল্ড হতে হবে। অর্থাৎ- input এর পর অন্য আরেকটি এলিমেন্টের ভেতরে ul থাকতে পারবে না, input যে এলিমেন্টের মধ্যে থাকবে, ul ট্যাগও সেই একই এলিমেন্টর মধ্যে থাকতে হবে। ওকে … কোড দেখুন, বুঝতে পারবেন পুরোপুরি।

এটা হলো সঠিক কোড, মানে একই প্যারেন্ট এলিমেন্টের মধ্যে input এবং ul

 

আর এটি হলো যেভাবে করতে নিষেধ করলাম, সেটি। অর্থাৎ input এবং ul একই প্যারেন্টের মধ্যে না থেকে অন্য আরেকটি প্যারেন্টের মধ্যে চলে যাওয়া। এটি করা যাবে না।

 

এখন করবো CSS, প্রথমে header কে স্টাইল করবো তারপর মেন্যুবার। মেন্যুকে আমরা position: absolute; করে দেবো এবং হাইড করে রাখবো। তারপর কোড করবো যে, checkbox টি যদি চ্যাক করা হয়, তাহলে মেন্যু visible হবে, আর যদি চ্যাক করা না থাকে, মানে স্বাভাবিক অবস্থায় মেন্যু হাইড থাকবে। দ্যাটস্ অল ইয়োর অনার

এট্টু রিসেট করি

 

আর এখন শুরু হবে আমাদের মহাকাঙ্ক্ষিত কোড

 

 

এ পর্যন্ত যা কিছু করা হইল, তার আউটপুট এই রকম

দেখেন, ব্ল্যাক একটা হেডার আছে, সেটার মাঝখানে একটা ছোট্ট চ্যাকবক্স। চ্যাকবক্সটাতে ক্লিক করেন, দেখবেন আমাদের মেন্যু সাহেব কত্ত সুন্দর করে বাইর হয়। তারপর আবার চ্যাকবক্সে ক্লিক করেন, দেখবেন মেন্যু সাহেব সেই একই স্টাইলে হারায় যাইতেছে। এখন প্রশ্ন হইল এই কাজটা আমরা CSS দিয়ে করলাম কিভাবে। উত্তর: এই সাইনটি দিয়ে ~

~ এই সাইনটির অনেক নাম আছে। তবে CSS এর ভাষায় এটির নাম General sibling combinator

এর কাজ হলো, একই প্যারেন্টের চাইল্ড এলিমেন্টগুলোকে সিলেক্ট করা। যেমন ধরা যাক, একটি প্যারেন্ট এলিমেন্ট হলো section  তো … এই section  এর প্রথমে একটি প্যারাগ্রাফ আছে। এই প্রথম প্যারাগ্রাফের পর আরও ছোট ছোট তিনটি প্যারাগ্রাফ আছে এবং প্রতিটি প্যাগ্রাফের আগে একটি করে হেডিং রয়েছে। আমি চাচ্ছি প্রথম প্যারাগ্রাফটির ফন্ট সাইজ পরেরগুলোর তুলনায় একটু বড় হবে। এটি করার জন্য আমি ~  এই সাইনটি ব্যবহার করতে পারি। উদাহরণ

 

তো এই ~ সাইনই হচ্ছে আমাদের আজকের CSS trick এর মূল।

এখন আসা যাক আমাদের আজকের টিউটরিয়ালের শেষ অংশে। বলেছিলাম যে প্রথমে আমরা label ট্যাগটি ব্যবহার করবো না। পরে করবো। কিভাবে input এর হয়ে label কাজ করে সেটি দেখবো এখন।

label ট্যাগটির জন্য html এ একটি এট্রিবিউট আছে। এই এট্রিবিউটটির নাম for  … যারা কোড এডিটরে Emmet প্লাগিনটি ব্যবহার করেন, তারা হয়ত জানেন যে, এই for এট্রিউটটি label ট্যাগের সাথে অটোমেটিকলি চলে আসে।

যাক … সম্পূর্ণ ভিন্ন একটি এলিমেন্টের id এর ভ্যালু হলো এই এট্রিবিউটের ভ্যালু। যদি কোন এলিমেন্টের আইডির ভ্যালু কোন label ট্যাগের for এট্রিবিউটের ভ্যালুতে দেয়া হবে, তাহলে label ট্যাগটি সেই এলিমেন্টের হয়ে কাজ করবে। আর এর সবচে’ বেশি ব্যবহার হয় input type=”checkbox” এবং input type=”radio” তে।  আমি নিজেও বুঝতে পারতেছি যে, এখানে বয়ানের চেয়ে উদাহরণ দিলে বেশি কাজে লাগবে, তাই নিচের উদাহরণটি দেখুন

বিষয়টা দেখেন, চ্যাকবক্স বা রেডিও বাটনে আপনার ক্লিক করা লাগতেছে না, আপনি যদি টেক্সটের মধ্যেও ক্লিক করেন, তাহলে এই ইনপুটগুলা চ্যাকড হয়ে যাচ্ছে। এর কারণ হলো, এই টেক্সটগুলা যে label ট্যাগে আছে, তার for এট্রিবিউটের ভ্যালু আর input ট্যাগের id এর ভ্যালু এক, এই জন্য label ট্যাগের মধ্যে যে টেক্সট আছে, সেগুলো input এর হয়ে কাজ করছে।

 

তো … এখন আমরা আমাদের ড্রপডাউন মেন্যুর চ্যাকবক্সের জন্য একটি label ট্যাগ নেবো এবং সেটিকে একটি সুন্দর বাটনের স্টাইল দেবো। তারপর আমরা আমাদের চ্যাকবক্সটিকে display: none এর মাধ্যমে হাইড করে দেবো, যেন চ্যাকবক্সের যে ডিফল্ট বাটনটি আছে, সেটি দেখা না যায়। ফাইনাল কোড

 

ওকে ভাইলোগ … বিরাট পোস্ট হইছে। কিন্তু কাজ তেমন কিছু না, যদি বুঝতে পারেন, ট্রাই করেন, করতে থাকেন, করতেই থাকেন। হ্যাপি কোডিং

 

Live Demo

মন্তব্য

মন্তব্য

Leave a Reply

Your email address will not be published.