ওয়েব ডিজাইন (পর্ব ১৮) ড্রপ ডাউন মেন্যু

ওয়েব ডিজাইন (পর্ব ১৮) ড্রপ ডাউন মেন্যু
বুধবার, ১৮ নভেম্বর, ২০২০

আস্‌সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে কিভাবে ড্রপডাউন মেনু এবং সাব ড্রপডাউন মেনু তৈরি করা যায়।

আমরা এর আগের পোস্টে অর্থাৎ ১৭ নম্বর পর্বে নেভিগেশন মেনু বানানো দেখেছিলাম। আমরা ওই নেভিগেশন মেনু দ্বারাই আজ Dropdown এবং Subdropdown মেনু বানাবো।
আমরা ১৭ নম্বরের পোস্টের কোড গুলোই ব্যবহার করবো তবে ড্রপ ডাউন বানানোর জন্য কাজের সুবিধার্থে কিছু  ক্লাস ব্যবহার করা হয়েছে। আপনারা অনুগ্রহ করে এই ব্লগটি মনোযোগ দিয়ে পড়বেন কারন ড্রপ ডাউন বানাতে ভালো করে না বুঝলে কিছু সমস্যা হতে পারে।

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

প্রথমে ব্লগ ১৭ এর যে কোড গুলো দ্বারা আমরা আমরা নেভিগেশন বার তৈরি করেছিলাম সেই গুলো আমাদের নোটপ্যাডে তুলুন।
আমরা এখন  করতে চাইতেছি FAQ মেনু তে ড্রপডাইন, এখানে আমরা এই ড্রপডাউনে ৪ সাব ড্রপডাইন রাখবো যেগুলো পর্যয়ক্রমে Demo 1 থেকে Demo 4 পর্যন্ত থাকবে।

নতুন কি কি ক্লাস যোগ করতে হবেঃ

এই ড্রপডাউন বানাতে নতুন করে আমাদের ৩টি নতুন ক্লাস যোগ করতে হবে। আমরা এই ট্যাগ গুলোর নাম এখানে তুলে ধরছি।
আমরা এখানে list ট্যাগের ভিতরে dropdown নামে একটা ক্লাস নিবো,
ওই লিস্ট ট্যাগের ভিতরে a ট্যাগের ক্লাস নাম btn নামে;
এই লিস্ট ট্যাগের ভিতর a ট্যাগের নিচে আমরা নতুন একটা ক্লাস নিবো যার নাম dcontent দিবো এবং এই dcontent ক্লাসের ভিতরে আলাদা a ট্যাগ নিবো।যে গুলো আমার সাবড্রপ ডাউন মেনু দরকার সেই গুলো।

তাইলে কোড গুলো এমন দেখা যাবেঃ
        <ul>
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Cotact us</a></li>
	<li><a href="#">Advertise</a></li>
	<li><a href="#">Team</a></li>
	<li class="dropdown">
	<a class="btn" href="#">FAQ</a>
	<div class="dcontent">
	<a href="#">Demo 1</a>
	<a href="#">Demo 2</a>
	<a href="#">Demo 3</a>
	<a href="#">Demo 4</a>
	</div>
	</li>	
	<li><a href="#">Copyright</a></li>
	</ul>
আমরা এখানে সেই CSS কোড টুকু (আগের ব্লগের) রেখে দিচ্ছি।
ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
	background-color:#4fae57;
	overflow:hidden;
}
ul li{	
	float:left;
	display:hidden;
}
ul li a{
	text-decoration:none;
	color:#000;
	padding:12px 22px;
	display:block;
	text-align:center;
}
ul li a:hover{
	background-color:#000;
	color:#fff;
}
আমরা এখন li ও a ট্যাগ ও btn ক্লাস কে ধরে প্যাডিং ও ডিসপ্লে দিতে হবে।
li a, .btn{
	padding:12px 16px;
	display:inline-block;

আমরা এবার dcontent ক্লাস কে   ধরে display সিলেক্ট করে দিবো।
.dcontent{
	position:absolute;
}
এইবার নিচের ছবির মতো দেখতে পারবেন।
Dropdown Menu
এবার আমাদের গুরুত্বপূর্ণ কাজ। এইবার আমরা FAQ তে যদি মাউস হবার করি তাইলে demo গুলো আসবে আর নয়তো আসবেনা।এই রকম করতে হবে তার জন্য আমাদের প্রথমে demo এর ক্লাসটাকে আমরা হাইড করে রাখবো এবং পরে হবার করলেই ওটা বের হয়ে আসবে এমন করবো।

dcontent কে হাইড করাঃ

এবার আমরা dcontent ক্লাসে নতুন css বসাতে হবে সেইটা হলো ডিসপ্লে প্রোপার্টি none করে দিতে হবে।

.dcontent{
	position:absolute;
	display:none;
}
এবার তো আমাদের ড্রপডাউন হারিয়ে গেলো । কিন্তু এবার আমাদের কাজ হলো যখনই মাউস হবার করবো তখন এটা আসবে।এবার আমরা এটাই করবো।

মাউস Hover করে কন্টেন্ট Show

এই Hover করে কন্টেন্ট সো করানোর জন্য আমাদের দরকার ক্লাসকে আমরা কাজে লাগাবো।
এইজন্য আমাদের প্রথমে dropdown ক্লাসের সাথে Hover Pseudo ক্লাস এড করতে হবে, এবং তারপর পরে এড করতে হবে যে ক্লাসটা হবার করলে সো করবে, তাইলে আমরা দিবো dcontent কারন আমরা এই ক্লাসকে প্রথমে হাইড করে দিছি আর যখনই হবার হবে display:none থেকে display:block হয়ে যাবে।

নিচের কোড খেয়াল করুন।
.dropdown:hover .dcontent{
	display:block;
}
এই ভাবে আপনারা ড্রপ ডাউন মেনু তৈরি করতে পারবেন সহজেই।

 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি WikiJana.Com সাইটের সম্পদ তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট কপিরাইটের অধিনে চলে যেতে পারে।






Samrat Raihan

I am a web designer and developer. I regularly work for different companies. I try to write a little on this blog when I have time. If you can learn something from this blog, then I will be successful.