ওয়েব ডিজাইন (পর্ব ১৩) নেভিগেশন বার,ড্রপডাউন

আমাদের প্রতিটি সাইটে নেভিগেশন বার দেখতে পায়। এই নেভিগেশন বার একটা ওয়েব সাইটের জন্য খুবই গুরুত্বপূর্ন। আজকে আমরা CSS আলাদা এবং HTML আলাদা করে CSS কে এক

ওয়েব ডিজাইন (পর্ব ১৩) নেভিগেশন বার,ড্রপডাউন

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

নেভিগেশন বারঃ

আমাদের প্রতিটি সাইটে নেভিগেশন বার দেখতে পায়। এই নেভিগেশন বার একটা ওয়েব সাইটের জন্য খুবই গুরুত্বপূর্ন। আজকে আমরা CSS আলাদা এবং HTML আলাদা করে CSS কে এক্সটার্নাল ভাবে এড করে কাজ করবো।

প্রথমে আপনি দুইটা ফাইল নিন।

index.html
style.css

এবার index ফাইল আপনার টেক্স এডিটর দ্বারা ওপেন করুন, HTML এর বেসিক কোড গুলো ‍লিখুন।আর আগেই বলেছি এখানে আমরা এক্সটার্নাল CSS ইউজ করবো তাই index.html ফাইলের হেড এর ভিতরে নিচের এই লিংক রিলেশন স্টাইল সিট এর কোড ইউজ করতে হবে।

	<link rel="stylesheet" href="style.css" />

আমরা নেভিগেশনের জন্য ul ট্যাগ ইউজ করবো অর্থাৎ আনঅর্ডার লিস্ট ট্যাগ। নিচে পুরো HTML কোডটি বসিয়ে দিলাম।

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css" />
</head>
<body>
	<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><a href="#">FAQ</a></li>
	<li><a href="#">Copyright</a></li>
	</ul>
</body>
</html>

এবার আমাদের style.css ফাইল ওপেন করতে হবে। এবং আমাদের css এর কোড গুলো বসাতে হবে। আমরা পর্যায়ক্রমে css কোড গুলো বসাবো যাতে করে আপনারা বুঝতে পারেন।

আমাদের প্রথমে সিলেক্টর ঠিক করে নিতে হবে।

ul = আনঅর্ডার লিস্ট পুরোটা সিলেক্ট করার জন্য।
ul li = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগ টা কে সিলেক্ট করার জন্য।
ul li a = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগের ভিতরে যে এংকর ট্যাগ আছে ওটাকে সিলেক্ট করার জন্য।
ul li a:hover = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগ এর এংকর ট্যাগ এর উপর যখন মাউস কার্সার নিবেন তখন কেমন হবে তা সিলেক্ট করার জন্য।

আমরা প্রথমে UL অর্থাৎ আনঅর্ডার লিস্ট এর বুলেট সিন্হ কে হাইড করবো list-style-type প্রোপার্টি দ্বারা,

এরপর আনঅর্ডার লিস্ট এর অটোমেটিক যে প্যাডিং মার্জিন থাকে তা হাইড করবো padding, margin প্রোপার্টি দ্বারা,

একটা ব্যকগ্রাউন্ড কালার দিবো background প্রোপার্টি দ্বারা

এবং অভারফ্লো টা বন্ধ করবো overflow প্রোপার্টি দ্বারা।

নিচের কোড গুলো ভালো করে বুঝার চেস্টা করুন।

ul{
	list-style-type:none;
	padding:0px;
	margin:0px;
	background-color:#4fae57;
	overflow:hidden;
}

এবার UL LI এর অর্থাৎ আনঅর্ডার লিস্ট এর ফ্লোট নির্ধারন করবো float প্রোপার্টি দ্বারা

এবং ডিসপ্লে হাইড করবো।

নিচের কোড গুলো ভালো করে বুঝার চেস্টা করুন।

ul li{	
	float:left;
}

এবার UL LI A এর অর্থাৎ আনঅর্ডার লিস্টের লিস্ট ট্যাগের এংকর ট্যাগের আন্ডার লাইনটা রিমুভ করবো text-decoration প্রোপার্টি দ্বারা ,

লেখার কালার করবো color প্রোপার্টি দ্বারা,

৪ পাশে জায়গা নিছি প্যাডিং প্রোপার্টি দ্বারা,

ডিসপ্লে ব্লক করবো display প্রোপার্টি দ্বারা,

লেখা মাঝ বরাবর করবো text-align প্রোপার্টি দ্বারা।

নিচের কোড গুলো ভালো করে বুঝার চেস্টা করুন।

ul li a{
	text-decoration:none;
	color:#000;
	padding:12px 22px;
	display:block;
	text-align:center;
}

এবার UL LI A:HOVER অর্থাৎ যখন আনঅর্ডার লিস্টের লিস্ট ট্যাগের এংকর ট্যাগের ব্যকগ্রাউন্ড কালার করবো background পোপার্টি দ্বারা এবং লেখা কালার করবো color প্রোপার্টি দ্বারা।

নিচের কোড গুলো ভালো করে বুঝার চেস্টা করুন

ul li a:hover{
	background-color:#000;
	color:#fff;
}

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

আমরা এখন করতে চাইতেছি FAQ মেনু তে ড্রপডাইন, এখানে আমরা এই ড্রপডাউনে ৪ সাব ড্রপডাইন রাখবো যেগুলো পর্যয়ক্রমে Demo 1 থেকে Demo 4 পর্যন্ত থাকবে।

  <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>

আমরা এখন li ও a ট্যাগ ও btn ক্লাস কে ধরে প্যাডিং ও ডিসপ্লে দিতে হবে।

li a, .btn{
	padding:12px 16px;
	display:inline-block;

আমরা এবার dcontent ক্লাস কে ধরে display সিলেক্ট করে দিবো।

.dcontent {
    position: absolute;
    background: #8bc34a;
}

এবার আমাদের গুরুত্বপূর্ণ কাজ। এইবার আমরা FAQ তে যদি মাউস হবার করি তাইলে demo গুলো আসবে আর নয়তো আসবেনা।এই রকম করতে হবে তার জন্য আমাদের প্রথমে demo এর ক্লাসটাকে আমরা হাইড করে রাখবো এবং পরে হবার করলেই ওটা বের হয়ে আসবে এমন করবো।

dcontent কে হাইড করাঃ

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

.dcontent{
	display:none;
}

উপরের .dcontent ক্লাস এর মধ্যেও ডিসপ্লে নান দিলেও হবে। আলাদা করে বুঝানোর জন্য আলাদা দিছি।

এবার তো আমাদের ড্রপডাউন হারিয়ে গেলো । কিন্তু এবার আমাদের কাজ হলো যখনই মাউস হবার করবো তখন এটা আসবে।এবার আমরা এটাই করবো।

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

এই Hover করে কন্টেন্ট সো করানোর জন্য আমাদের দরকার ক্লাসকে আমরা কাজে লাগাবো।

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

নিচের কোড খেয়াল করুন।

.dropdown:hover .dcontent{
	display:block;
}

এই ভাবে আপনারা ড্রপ ডাউন মেনু তৈরি করতে পারবেন সহজেই।

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