X

X

X

CSS Navigation Bar । নেভিগেশন বার


নেভিগেশন বারের কিছু উদাহরণ

Vertical (লম্বিক)

Horizontal (আনুভূমিক)


Navigation Bar কি

খুব সহজে কোনো ওয়েবসাইটের গুরুত্বপূর্ণ লিংকসমূহকে একসাথে প্রকাশ করা হয় যে, ইলামেন্ট বা ওয়েব পেজ বা ইলামেন্টগ্রেুপের মাধ্যমে সেটিকে নেভিগেশন বার বা নেভিগেশন মেনু বলে। যেকোনো ওয়েবসাইটের জন্য সহজ এবং আকর্ষণীয় নেভিগেশন বার খুবই গুরুত্বপূর্ণ। একটি ওয়েবপেজে বা ওয়েবসাইটে এক বা একাধিক নেভিগেশন মেনু থাকতে পারে।

সিএসএস-এর মাধ্যমে যেকোনো HTML Menu -কে সুন্দরভাবে নেভিগেশন মেনুতে রূপান্তর করা যায়।


Navigation Bar = লিংকের তালিকা

নেভিগেশন বার তৈরি করার জন্য স্ট্যান্ডার্ড HTML element ব্যবহার করা উচিৎ। কারণ সার্চ ইঞ্জিনসমূহ সাধারণত কাস্টম ইলামেন্ট বুঝতে পারে না। কাজেই Standard HTML ইলামেন্ট ব্যবহার করে নেভিগেশন বার তৈরি করতে হবে।

নেভিগেশন বার মূলত একটি লিংকের তালিকা। কাজেই <ul> ও <li> ব্যবহার করে এটি খুব সহজে তৈরি করা যায়:

Code Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

নেভিগেশন বারের স্ট্রাকচার তো তৈরি করা হলো। এবার তাহলে আসুন ডিফল্ট বুলেট , মার্জিন ও প্যাডিং দূর করি:

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা নিম্নরূপ:

  • list-style-type: none; – এটি দ্বারা বুলেট দূর করা হয়। নেভিগেশন বারের লিস্ট মার্কারের প্রয়োজন নেই।
  • এবার ডিফল্ট মার্জিন ও প্যাডিং দূর করার জন্য যথাক্রমে margin: 0;padding: 0; সেট করতে হবে।

এই পর্যন্ত যতটুকু কোড লিখা হয়েছে, তা লম্বিক (Vertical ) ও আনুভূমিক (Horizontal ) উভয় ধরণের নেভিগেশন বারের ক্ষেত্রে প্রযোজ্য।


Vertical (লম্বিক) Navigation Bar

লম্বিক নেভিগেশন বার তৈরি করার জন্য লিস্টের ভেতরের <a> ইলামেন্টগুলোতে স্টাইল প্রয়োগ করতে হবে।

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li a {
    display: block;
    width: 60px;
    background-color: #dddddd;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদহারণের ব্যাখ্যা:

  • display: block; – এটি পুরো লিস্ট ইলামেন্টকে ব্লক লেভেল ইলামেন্ট হিসেবে উপস্থাপণ করে । সুতরাং, পুরো লিস্ট ইলামেন্ট এক্ষেত্রে ক্লিকেবল হয়। আপনি চাইলে ইচ্ছেমত মার্জিন ও প্যাডিং সেট করতে পারেন।
  • width: 60px; – Block element সাধারণত পুরো প্রস্থ বিশিষ্ট হয়ে থঅকে। তবে আমরা এক্ষেত্রে 60px নির্ধারণত করে দিবো।

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 60px;
} 

li a {
    display: block;
    background-color: #dddddd;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Vertical Navigation Bar এর উদাহরণ

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

/* Change the link color on hover */
li a:hover {
    background-color: #555;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Active/Current Navigation Link

একটি “active” class যুক্ত করে ব্যবহারকারীকে জানান সে কোন পেজে আছে:

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

লিংকে কেন্দ্র বরাবর উপস্থাপণ

কেন্দ্র বরারবর লিংককে উপস্থাপণ করার জন্য text-align:center <li> অথবা <a> ইলামেন্টে যুক্ত করুণ।
নেভবারের চারপাশে বর্ডার যুক্ত করার জন্য <ul> ইলামেন্টে border property যুক্ত করুন। If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one:

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
    border: 1px solid #555;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li {
    text-align: center;
    border-bottom: 1px solid #555;
}

li:last-child {
    border-bottom: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Full-height Fixed Vertical Navbar

Code Example

body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    position: fixed;
    height: 100%;
    overflow: auto;
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


বি:দ্র: মোবাইল ডিভাইসে এটি ভালোভাবে কাজ নাও করতে পারে।


Horizontal Navigation Bar

দুই পদ্ধতিতে Horizontal Navigation Bar তৈরি করা যায়। যথা, inline অথবা floating list item ব্যবহার করে।

Inline List Item

<li> element কে ইনলাইন ইলামেন্ট হিসেবে ব্যবহার করে এটি তৈরি করা যায়।

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li {
    display: inline;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণের ব্যাখ্যা:

  • display: inline; – ডিফল্ট অবস্থায়, <li> element সমূহ ব্লক ইলামেন্ট। কাজেই এগুলোকে ইনলাইন ইলামেন্ট হিসেবে উপস্থাপণ করা হয়, যাতে লিংকসমূহ পাশাপাশি উপস্থাপিত হয়।

Floating List Item

আরও একটি পদ্ধতি হচ্ছে <li> element গুলোকে floating ইলামেন্ট হিসেবে একটি পরে আরেকটিকে উপস্থাপণ করা।

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
    background-color: #dddddd;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

উদাহরণরে ব্যাখ্যা:

  • float: left; – একটির পরে আরেকটিকে উপস্থাপণ করার জন্য ব্যবহৃত হয়েছে।
  • display: block; – লিস্ট ইলামেন্টের ভেতরে লিংকে ব্লক লেভেল ইলামেন্ট হিসেবে উপস্থাপণ করার জন্য ব্যবহৃত হয়। ফলে শুধুমাত্র উক্ত লিংক নয়, বরং পুরো লিস্ট ইলামেন্ট ক্লিকেবল হয়। চাইলে এটিতে মার্জিন ও প্যাডিং যুক্ত করা যাবে।
  • padding: 8px; – লিস্ট ইলামেন্টকে সুন্দরভাবে উপস্থাপণ করার জন্য একটু প্যাডিং যুক্ত করা ভালো।
  • background-color: #dddddd; – প্রতিটি ইলামেন্টের ব্যাকগ্রাউন্ড হিসেবে এই রং যুক্ত করা হছৈ।

টিপস: যদি পুরো নেভিগেশনের জন্য ব্যাকগ্রাউন্ড কালার সেট করতে চান তবে প্রতিটি <li> এ ব্যাকগ্রাউন্ড সেট না করে <ul> এর জন্য ব্যাকগ্রাউন্ড সেট করুন।

Code Example

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

li {
    float: left;
}

li a {
    display: block;
    padding: 8px;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Horizontal Navigation Bar এর উদাহরণ

Code Example

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

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Active/Current Navigation Link

একটি “active” class তৈরি করুন এবং কারেন্ট পেজের লিংকের জন্য নেভিগেশনের উক্ত লিংকে সেই ক্লাস যুক্ত করুন:

নিচের উদাহরণটি লক্ষ্য করুণ:

Code Example

.active {
    background-color: #4CAF50;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

ডানদিকে লিংক উপস্থাপণ

ডানদিকে কোনো লিংককে উপস্থাপণ করার জন্য (float:right;) ব্যবহার করুন:

Code Example

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Border Divider

লিংকসমূহের মধ্যে ডিভাইডার যুক্ত করার জন্য প্রতিটি <li> ইলামেন্টে border-right property যুক্ত করুন:

Code Example

li {
    float: left;
    border-right:1px solid #bbb;
}

li:last-child {
    border-right: none;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

Fixed Navigation Bar

নেভিগেশনবারকে পেজ স্ক্রল করার সাথে তার অবস্থোনের পরিবর্তন না করাতে চাইলে অর্থাৎ, একটি নির্দিষ্ট অবস্থানে নেভিগেশন বারকে স্থির রাখার জন্য নিচের পদ্ধাতি অনুসরণ করুন।


Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।

বি:দ্র: এই উদাহরণগুলো মোবাইল ডিভাইসে সঠিকভাবে কাজ নাও করতে পারে।


Gray Horizontal Navbar

Code Example

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}

নিজে নিজে চেষ্টা করুন বাটনে ক্লিক করে দেখুন এটি কিভাবে কাজ করে।


আরও কিছু উদাহরণ

Responsive Topnav

মিডিয়া কুয়েরিসমূহ ব্যবহার করে রেসপনসিভ নেভাবার তৈরি করার উপায়:

নিজে নিজে চেষ্টা করুন »

Responsive Sidenav

মিডিয়া কুয়েরিসমূহ ব্যবহার করে রেসপনসিভ সাইডনেভ তৈরি করার উপায়:

নিজে নিজে চেষ্টা করুন »

Dropdown Navbar

নেভিগেশন বারের ভেতরে ড্রপডাইন মেনু যুক্ত করার উপায়:

নিজে নিজে চেষ্টা করুন »