আস্সালামু আলাইকুম! আশা করি আল্লাহ এর অশেষ রহমতে আপনারা সবাই ভালো আছেন।আমিও আপনাদের দোয়াই ভালো আছি। আজকের নতুন টপিকে আপনাকে স্বাগতম! আজকে আপনাদের দেখাবো কিভাবে নেভিগেশন বার বানানো যায়।
নেভিগেশন বারঃ
আমাদের প্রতিটি সাইটে নেভিগেশন বার দেখতে পায়। এই নেভিগেশন বার একটা ওয়েব
সাইটের জন্য খুবই গুরুত্বপূর্ন। আজকে আমরা CSS আলাদা এবং HTML আলাদা করে CSS কে
এক্সটার্নাল ভাবে এড করে কাজ করবো।
প্রথমে আপনি দুইটা ফাইল নিন।
- index.html
- style.css
<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 = আনঅর্ডার লিস্ট এর লিস্ট ট্যাগ এর এংকর ট্যাগ এর উপর যখন মাউস কার্সার নিবেন তখন কেমন হবে তা সিলেক্ট করার জন্য।
এরপর আনঅর্ডার লিস্ট এর অটোমেটিক যে প্যাডিং মার্জিন থাকে তা হাইড করবো
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 সাইটের সম্পদ
তাই যদি কেউ কপি করেন তবে আপনারা অবশ্যই ক্রেডিট দিবেন নয়ত আপনার সাইট
কপিরাইটের অধিনে চলে যেতে পারে।