ওয়েব ডিজাইন (পর্ব ১৭) নেভিগেশন বার

ওয়েব ডিজাইন (পর্ব ১৭) নেভিগেশন বার
শুক্রবার, ৯ অক্টোবর, ২০২০

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

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

আমাদের প্রতিটি সাইটে নেভিগেশন বার দেখতে পায়। এই নেভিগেশন বার একটা ওয়েব সাইটের জন্য খুবই গুরুত্বপূর্ন। আজকে আমরা CSS আলাদা এবং HTML আলাদা করে CSS কে এক্সটার্নাল ভাবে এড করে কাজ করবো।
প্রথমে আপনি দুইটা ফাইল নিন।
  1. index.html
  2. 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 কোড গুলো বসাবো যাতে করে আপনারা বুঝতে পারেন।

আমাদের প্রথমে সিলেক্টর ঠিক করে নিতে হবে।
  1. ul = আনঅর্ডার লিস্ট পুরোটা সিলেক্ট করার জন্য।
  2. ul li = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগ টা কে সিলেক্ট করার জন্য।
  3. ul li a = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগের ভিতরে যে এংকর ট্যাগ আছে ওটাকে সিলেক্ট করার জন্য।
  4. 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;
	display:hidden;
}
এবার 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;
}
 এই আর্টিকেল টি পুরোটা পড়ার জন্য আপনাকে অনেক ধন্যবাদ, এই আর্টিকেল যদি বুঝতে অসুবিধা হয় অথবা কোনো প্রশ্ন থাকে তবে কমেন্ট করুন, আশা করি আপনি উত্তর পাবেন।আর নতুুন কিছু জানার থাকলে আমাদের জানান আমরা জানানোর চেস্টা করবো। এই আর্টিকেলটি 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.