সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট পিএইচপি এসকিউএল জেকুয়েরি বুটস্ট্রাপ সি প্রোগ্রামিং
ফোরাম
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

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

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

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

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

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


নেভিগেশনবার হচ্ছে কিছু লিংকের লিস্ট। একটি নেভিগেশনবার যেহেতু কিছু লিঙ্কের লিস্ট, তাই আমরা এই লিস্ট তৈরি করার জন্য <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>

ফলাফল