CSS ড্রপডাউন মেনু

আমাদের কোড নিম্নলিখিত প্রদান করে:

এখন পর্যন্ত, আমরা আমাদের ড্রপডাউন মেনুতে কোনো শৈলী যোগ করিনি, তাই এটি সরল HTML-এ প্রদর্শিত হয়। ব্যাডমিন্টন ক্লাবের ওয়েবসাইটের জন্য আমাদের ড্রপডাউন মেনু স্টাইল করতে আমরা যে কোডটি ব্যবহার করতে যাচ্ছি তা এখানে:

.dropdown_button {
	background-color: #90EE90;
	color: white;
	padding: 10px;
	font-size: 15px;
	border: none;
}

.menu {
	display: inline-block;
	position: relative;
}

.content {
	display: none;
	background-color: lightgray;
	min-width: 150px;
	z-index: 1;
	position: absolute;
}

.content a {
	text-decoration: none;
	display: block;
	color: black;
	padding: 16px;
}

.content a:hover {
	background-color: #f7f7f7;
}

.menu:hover .content {
	display: block;
}

আমাদের কোড ফিরে আসে:

[Code result here]


আসুন আমাদের কোড কীভাবে কাজ করে তা ভাঙ্গুন।

dropdown_button class ড্রপডাউন বোতাম স্টাইল করতে ব্যবহৃত হয়। আমাদের কোডে, আমরা বোতামের পটভূমির রঙ হালকা সবুজে সেট করি, বোতামের পাঠ্যের রঙ সাদাতে পরিবর্তন করি, বোতামের চারপাশে একটি 10px প্যাডিং যুক্ত করি, বোতামের ফন্টের আকার 15px এ সেট করি এবং আমরা চারপাশের সীমানা সরিয়ে ফেলি বোতামটি.

বিষয়বস্তু শ্রেণী আমাদের ড্রপডাউন মেনুর বিষয়বস্তুর শৈলী সংরক্ষণ করে। এই ক্লাসটি ডিফল্টরূপে লুকানো থাকে (ডিসপ্লে ব্যবহার করে:কোনটিই নয়) এবং একটি হালকা ধূসর পটভূমি রয়েছে। উপরন্তু, বিষয়বস্তু শ্রেণী ব্যবহার করে উপাদানগুলির ন্যূনতম প্রস্থ হল 150px, এবং উপাদানটি একেবারে অবস্থান করা হয়েছে৷ বিষয়বস্তু শ্রেণীতে 1-এর একটি x-সূচীও রয়েছে, যা এটিকে ওয়েব পৃষ্ঠায় অন্যান্য সমস্ত উপাদানের উপরে প্রদর্শিত করে।

মেনু ক্লাস আমাদের সম্পূর্ণ মেনুর শৈলী সংরক্ষণ করে। আমাদের কোডে, আমরা আমাদের <div class=”menu”>-এর বিষয়বস্তু রাখি ট্যাগ ওয়েব পৃষ্ঠার অন্যান্য উপাদানের সাথে আপেক্ষিক হতে হবে। এছাড়াও আমরা ইনলাইন-ব্লক স্টাইল ব্যবহার করে মেনু প্রদর্শন করি, যা আমাদের উপাদানটিকে ইনলাইন-ব্লক কন্টেইনার হিসেবে প্রদর্শন করে।

আমাদের ড্রপডাউন মেনুতে লিঙ্কগুলিকে স্টাইল করতে .content a স্টাইল ব্যবহার করা হয়। এই স্টাইলটি লিঙ্কগুলি থেকে সমস্ত আন্ডারলাইন সরিয়ে দেয় (টেক্সট-সজ্জা ব্যবহার করে:কোনটি নয়;), ব্লক স্টাইলে প্রতিটি লিঙ্ক প্রদর্শন করে, প্রতিটি লিঙ্কের রঙ কালোতে সেট করে এবং প্রতিটি লিঙ্কের চারপাশে 16px এ প্যাডিং সেট করে।

আমাদের কোডের শেষে, ব্যবহারকারী যখন তাদের কার্সার ব্যবহার করে আমাদের ড্রপডাউন মেনুতে একটি লিঙ্কের উপর ঘোরায় তখন কী ঘটবে তা নির্ধারণ করতে আমরা .content a:hover নিয়ম ব্যবহার করি। এই ক্ষেত্রে, ব্যবহারকারী যখন মেনুতে লিঙ্কের উপর ঘোরাফেরা করেন, তখন লিঙ্কটির পটভূমির রঙ হালকা ধূসর (#f7f7f7) তে পরিবর্তিত হয়।

আমরা একটি নিয়মও নির্দিষ্ট করেছি .menu:hover .content যা আমাদের মেনুর বিষয়বস্তুকে ব্লক হিসাবে প্রদর্শন করে যখন ব্যবহারকারী মেনুতে ঘোরাফেরা করে।

আপনি যদি CSS :hover নির্বাচক আরও গভীরে কীভাবে কাজ করে সে সম্পর্কে জানতে আগ্রহী হন, তাহলে আমাদের CSS :hover নির্বাচক নির্দেশিকা পড়ুন।

ডান ড্রপডাউন মেনু

আমাদের উপরের উদাহরণে, আমরা HTML এবং CSS ব্যবহার করে একটি ড্রপডাউন মেনু তৈরি করেছি যা স্ক্রিনের বাম দিকে প্রদর্শিত হয়। যাইহোক, আপনি সিদ্ধান্ত নিতে পারেন যে আপনি স্ক্রিনের ডানদিকে আপনার ড্রপডাউন মেনুটি দেখতে চান।

এটি ঘটানোর জন্য, আপনি উপরের কোডে নিম্নলিখিত CSS নিয়ম প্রয়োগ করতে পারেন:

.content {
	right: 0;
}

এই নিয়মটি ড্রপডাউন এবং এর বিষয়বস্তুকে স্ক্রিনের ডানদিকে নিয়ে যাবে।

উপসংহার

একটি ড্রপডাউন মেনুর মৌলিক কাঠামো তৈরি করতে HTML ব্যবহার করা যেতে পারে। তারপর, আপনি একটি সম্পূর্ণ এবং নান্দনিকভাবে আনন্দদায়ক ড্রপডাউন মেনু তৈরি করতে শৈলী প্রয়োগ করতে CSS ব্যবহার করতে পারেন।

এই টিউটোরিয়ালটি একটি উদাহরণের সাথে আলোচনা করা হয়েছে, কিভাবে HTML এবং CSS ব্যবহার করে একটি ড্রপডাউন মেনু তৈরি করা যায়। এই নিবন্ধে আমরা যে কোডটি আলোচনা করেছি তা ব্যবহার করে, আপনি HTML এবং CSS-এ আপনার নিজস্ব ড্রপডাউন মেনু তৈরি করতে সক্ষম হবেন৷