সিএসএস নেভিগেশনবার

নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য <ul> এবং <li> ট্যাগ ব্যবহার করবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>link test</title>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>

<p>বিঃ দ্র: লিংক টেস্টের জন্য href="#" ব্যবহার করা হয়। এই ওয়েব সাইটের মধ্যে URL থাকতে হবে।</p>

</body>
</html>

ফলাফল

কিছু স্টাইল যোগ করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>link test with style </title>
   <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>

<p> এই উদাহরণে, ডিফল্ট  padding ও margin ব্যবহার করা হয়েছে, এবং লিস্টের বুলেট গুলো remove করা হয়েছে।</p>

</body>
</html>

ফলাফল

উদাহরণের বর্ণনাঃ

list-style-type: none; - লিস্টের বুলেট চিহ্নকে মুছে দেয়। নেভিগেশনবারে বুলেট চিহ্ন দেখতে খারাপ দেখায়
ব্রাউজারের ডিফল্ট সেটিংস পরিবর্তন করার জন্য margin: 0; and padding: 0; সেট করুন

উপরের কোডটি হরিজন্টাল ও ভার্টিকাল দুই ধরনের নেভিগেশন বারের জন্য মানসম্মত কোড।

ভার্টিকাল নেভিগেশন বার

ভার্টিকাল নেভিগেশনবার তৈরির জন্য আপনি লিস্টের <a> এলিমেন্টকে স্টাইল করতে পারেন, এই জন্য উপরের কোডের সাথে নিচের অংশ ব্যবহার করতে হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>vertical navigation bar</title>
   <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li a {
    display: block;
    width: 80px;
    background-color: teal;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<p>লিংক ও লিংক এরিয়ার মধ্যে ব্যাকগ্রাউন্ড কালার যোগ করা হয়েছে।</p>
<p>লিংক ও লিংক এরিয়ার সমস্ত যায়গায় ক্লিক করা যাবে।</p>

</body>
</html>

ফলাফল

উদাহরণের বর্ণনাঃ

display: block; - লিঙ্কগুলোকে ব্লক এলিমেন্ট এবং পুরো লিঙ্ক এরিয়াকে ক্লিকযোগ্য করে, এবং ইহা আমাদেরকে অতিরিক্ত স্টাইল করতে সাহায্য করে
width: 80px; - ব্লক এলিমেন্ট পুরো প্রস্থ ডিফল্ট আকারে নিয়ে নেয়। আমরা ৬০ পিক্সেল প্রস্থ নির্ধারণ করে দিয়েছি

উপরের কোডের পরিবর্তে আপনি নিচের মত করেও লিখতে পারেনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>vertical navigation bar</title>
   <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100px;
}
li a {
    display: block;
    background-color: aqua;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<p>লিংক ও লিংক এরিয়ার মধ্যে ব্যাকগ্রাউন্ড কালার যোগ করা হয়েছে।</p>
<p>লিংক ও লিংক এরিয়ার সমস্ত যায়গায় ক্লিক করা যাবে।</p>

</body>
</html>

ফলাফল

ভার্টিকাল নেভিগেশন বারের উদাহরণ

একটি সাধারণ নেভিগেশনবারের উদাহরণঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>vertical navigation bar</title>
   <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color:aqua;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a:hover {
    background-color: white;
    color: teal;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<h3>Vertical নেভিগেশন বার</h3>

</body>
</html>

ফলাফল

এক্টিভ/কারেন্ট নেভিগেশন লিংক

ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <title>vertical navigation bar</title>
   <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color:#fdf5e6;
}
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
li a.active {
    background-color:  #009688;
    color: white;
}
li a:hover:not(.active) {
    background-color: white;
    color: teal;
}
</style>
</head>
<body>

<ul>
<li><a class="active" href="#home"> হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<h3>Vertical নেভিগেশন বার</h3>
<p>এই উদাহরণে, "active" class তৈরি করতে
background কালার সবুজ এবং টেক্সট কালার সাদা ব্যবহার করা
হয়েছে। class শুধু "Home" লিংকে যোগ করা
হয়েছে।</p>

</body>
</html>

ফলাফল

সেন্টার এলাইন লিংক এবং বর্ডার যোগ

লিংককে মাঝে আনতে <li> অথবা <a> এলিমেন্টে text-align:center ব্যবহার করুন।

নেভিগেশনবারের চারপাশে বর্ডার দিতে <ul> এর মধ্যে border প্রোপার্টি দিন। নেভিগেশনবারের মাঝে বর্ডার দিতে <li> এলিমেন্টে border-bottom ব্যবহার করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color:#fdf5e6;
    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: #009688;
    color: white;
}
li a:hover:not(.active) {
    background-color:white;
    color: teal;
}
</style>
</head>
<body>

<ul>
  <li><a class="active"  href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<h2>Vertical নেভিগেশন বার</h2>
<p>এই উদাহরণে, নেভিগেশন বারে border যোগ করা হয়েছে এবং নেভিগেশন লিংক সেন্টারে  রাখা হয়েছে।</p>

</body>
</html>

ফলাফল

সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার

একটি সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার তৈরি করিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
   <style>
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;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3> এই পেইজ স্ক্রল করে দেখুন কিভাবে কয়েকটা  sidenav একই জায়গায় অবস্থান করে আছে।</h3>
  <p>লক্ষ্য করুন  div এলিমেন্টের বামদিকে margin  25% দেয়া হয়েছে।
  কারণ side navigation  25% width সেট করা আছে। আপনি  চাইলে sidenav  এর margin মুছে ফেলতে পারেন। </p>
  <p> লক্ষ্য করুন, সবসময় sidenav এ overflow:auto সেট করা হয়েছে। sidenav   দীর্ঘ হলে স্ক্রল বার
 যোগ করতে হবে ( যেমন-50 টি লিংক বা তার বেশী).</p>
  <p>আমি বাংলাদেশী..</p>
  <p>আমি বাংলাদেশী..</p>
  <p>আমি বাংলাদেশী...</p>
  <p>আমি বাংলাদেশী..</p>
  <p>আমি বাংলাদেশী...</p>
  <p>আমি বাংলাদেশী...</p>
  <p>আমি বাংলাদেশী...</p>
</div>

</body>
</html>

ফলাফল

দ্রষ্টব্যঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

হরিজন্টাল নেভিগেশন বার

হরিজন্টাল নেভিগেশনবার তৈরির ২টি পদ্ধতি আছে। inline, float লিস্ট স্টাইল ব্যবহার করে।

ইনলাইন লিস্ট আইটেম

<li> এলিমেন্টকে ইনলাইন ডিফাইন করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    display: inline;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>


</body>
</html>

ফলাফল

উদাহরণের বর্ণনাঃ

display: inline; - ডিফল্টভাবে লিস্ট আইটেমগুলো ব্লক এলিমেন্ট হিসেবে থাকে। আমরা এখানে লিস্টকে একই লাইনে দেখানোর জন্য আইটেমের উভয় পাশের লাইনব্রেক সরিয়ে দিলাম

ফ্লোটিং লিস্ট আইটেম

float ব্যবহার করেও হরিজন্টাল নেভিগেশনবার তৈরি করা যায়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: aqua;
}
li {
    float: left;
}
li a {
    display: block;
    padding: 5px;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<p> <b>বিঃ দ্রঃ</b> যদি !DOCTYPE ডিক্লেয়ার করা না হয়  তাহলে, floating এর ক্ষেত্রে অপ্রত্যাশিত ফলাফল দেখাতে পারে।</p>
<p> লিংক area দেখার জন্য লিংক এর পিছনে কালার যোগ করা হয়েছে। লিংক area এর সমস্ত জায়গায়ই ক্লিক করা যাবে</p>
<p><b>বিঃ দ্রঃ</b>li এলিমেন্টকে লিস্টের বাইরে নেয়ার জন্য ul এলিমেন্ট এ overflow:hidden যোগ করা হয়।</p>


</body>
</html>

ফলাফল

উদাহরণের বর্ণনাঃ

float: left; ব্যবহার করে ব্লক এলিমেন্টকে একটির পাশে আরেকটিকে রাখা হয়েছে
display: block; লিঙ্কগুলোকে ব্লক এলিমেন্ট হিসেবে এবং সম্পূর্ণ এড়িয়াকে ক্লিকযোগ্য করে তোলে
padding: 5px; সৌন্দর্যের জন্য ব্লক এলিমেন্টগুলোর চারপাশে প্যাডিং ডিফাইন করা হয়েছে
background-color: aqua; রঙয়ের ব্যাকগ্রাউন্ড কালার দেয়া হল

হরিজন্টাল নেভিগেশন বারের উদাহরণ

একটি সাধারণ হরিজন্টাল নেভিগেশনবার তৈরি করে দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: green;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 10px 15px;
    text-decoration: none;
}
li a:hover {
    background-color: aqua;
    color:black;
}
    display: block;
    padding: 8px;
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>
<p> <b>বিঃ দ্রঃ</b> যদি !DOCTYPE ডিক্লেয়ার করা না হয়  তাহলে, floating এর ক্ষেত্রে অপ্রত্যাশিত ফলাফল দেখাতে পারে।</p>
<p> লিংক area দেখার জন্য লিংক এর পিছনে কালার যোগ করা হয়েছে। লিংক area এর সমস্ত জায়গায়ই ক্লিক করা যাবে</p>
<p><b>বিঃ দ্রঃ</b>li এলিমেন্টকে লিস্টের বাইরে নেয়ার জন্য ul এলিমেন্ট এ overflow:hidden যোগ করা হয়।</p>


</body>
</html>

ফলাফল

এক্টিভ/কারেন্ট নেভিগেশন লিংক

ইউজারকে বুঝানোর জন্য একটি "active" ক্লাস যোগ করে দিনঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2196f3;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: white;
    color:teal;
}.active {
    background-color:#009688;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>


</body>
</html>

ফলাফল

রাইট-এলাইন লিংক

লিস্ট আইটেমে float:right; ব্যবহার করে রাইট-এলাইন লিংক তৈরি করা হলঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: green;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color:white;
    color:teal;
}
.active {
    background-color: #009688;    
}
</style>
</head>
<body>

<ul>
  <li><a href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li style="float:right"><a class="active" href="#about"> আমাদের সম্পর্কে</a></li>
</ul>


</body>
</html>

ফলাফল

লিংক ডিভাইডার

<li> এর মধ্যে border-right প্রোপার্টি যুক্ত করে লিঙ্ক ডিভাইডার তৈরি করা হয়ঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color:#2196f3;
}
li {
    float: left;
    border-right:1px solid #bbb;
}
li:last-child {
    border-right: none;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
  background-color:white;
    color:teal;
}
.active {
    background-color:#009688;
}
</style>
</head>
<body>

<ul>
  <li><a class="active"  href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
   <li style="float:right"><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>


</body>
</html>

ফলাফল

ফিক্সড নেভিগেশন বার

ইউজার যদি পেজকে স্ক্রল করে তবুও নেভিগেশন বার পেজের উপরে অথবা নিচে ফিক্সড থাকবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>

body {margin:0;}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">হোম</a></li>
 <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about">সম্পর্কে</a></li>
</ul>
<div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Top Navigation Bar</h1>
<h2>স্ক্রল করে এই পেইজের ফলাফল দেখুন</h2>
<h2> পেইজ স্ক্রলিং করলে  উপরের নেভিগেশন বার একই জায়গায় অবস্থান করবে</h2>

<p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p>
<p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p>
<p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> 
<div>

</body>
</html>

ফলাফল

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    bottom: 0;
    width: 100%;
}
li {
    float: left;
}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">হোম</a></li>
 <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">কন্টাক</a></li>
  <li><a href="#about">সম্পর্কে</a></li>
</ul>

<div style="padding:20px;background-color:#1abc9c;height:1500px;">
<h1>Fixed Bottom Navigation Bar</h1>
<h2>স্ক্রল করে এই পেইজের ফলাফল দেখুন</h2>
<h2> পেইজ স্ক্রলিং করলে  বটমের নেভিগেশন বার একই জায়গায় অবস্থান করবে</h2>

<p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p>
<p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p><p> সবুজ-শ্যামলী, সোনালী-রুপালী আমাদের এই বাংলাদেশ।</p>


</div>

</body>
</html>

ফলাফল

বিঃদ্রঃ মোবাইলে এই উদাহরণটি ঠিকভাবে নাও দেখাতে পারে।

বর্ডারসহ হরিজন্টাল নেভিগেশনবার

হালকা ধূসর বর্ডারসহ একটি ধূসর হরিজন্টাল নেভিগেশন বারের উদাহরণঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}
li {
    float: left;
}
li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #ddd;
}
li a.active {
    color: white;
    background-color: #4CAF50;
}
</style>
</head>
<body>

<ul>
  <li><a class="active"  href="#home">হোম</a></li>
  <li><a href="#news"> নিউজ</a></li>
  <li><a href="#contact">যোগাযোগ</a></li>
  <li><a href="#about"> আমাদের সম্পর্কে</a></li>
</ul>


</body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

সিএসএস টিউটোরিয়াল

সিএসএস-৩

সিএসএস রেসপন্সিভ

সিএসএস রেফারেন্স

সিএসএস নেভিগেশনবার

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

ভার্টিকাল নেভিগেশন বার

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

ভার্টিকাল নেভিগেশন বারের উদাহরণ

উদাহরণ

ফলাফল

এক্টিভ/কারেন্ট নেভিগেশন লিংক

উদাহরণ

ফলাফল

সেন্টার এলাইন লিংক এবং বর্ডার যোগ

উদাহরণ

ফলাফল

সম্পূর্ণ দৈর্ঘ্যের ফিক্সড ভার্টিকাল নেভিগেশনবার

উদাহরণ

ফলাফল

হরিজন্টাল নেভিগেশন বার

ইনলাইন লিস্ট আইটেম

উদাহরণ

ফলাফল

ফ্লোটিং লিস্ট আইটেম

উদাহরণ

ফলাফল

হরিজন্টাল নেভিগেশন বারের উদাহরণ

উদাহরণ

ফলাফল

এক্টিভ/কারেন্ট নেভিগেশন লিংক

উদাহরণ

ফলাফল

রাইট-এলাইন লিংক

উদাহরণ

ফলাফল

লিংক ডিভাইডার

উদাহরণ

ফলাফল

ফিক্সড নেভিগেশন বার

উদাহরণ

ফলাফল

উদাহরণ

ফলাফল

বর্ডারসহ হরিজন্টাল নেভিগেশনবার

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য