কম্পিউটার টিউটোরিয়াল

CSS দিয়ে অনুভূমিক নেভিগেশন বার তৈরি করুন

অনুভূমিক নেভিগেশন বার তৈরি করার পদ্ধতি

একটি অনুভূমিক (horizontal) নেভিগেশন বার তৈরি করতে, <li> উপাদানগুলোকে ইনলাইন (inline) ডিসপ্লে হিসেবে সেট করতে হবে।

উদাহরণ

নিচের কোডটি চালিয়ে অনুভূমিক নেভিগেশন বার তৈরি করুন:

<!DOCTYPE html> <html>    <head>       <style>          ul {             list-style-type: none;             margin: 0;             padding: 0;          }          .active {             background-color: #4CAF50;             color: white;          }          li {             border-bottom: 1px solid #555;             display: inline;          }       </style>    </head>    <body>       <ul>          <li><a href = "#home">Home</a></li>          <li><a href = "#company" class = "active">Company</a></li>          <li><a href = "#product">Product</a></li>          <li><a href = "#services">Services</a></li>          <li><a href = "#contact">Contact</a></li>       </ul>    </body> </html>

ব্যাখ্যা: এখানে ul-এর ডিফল্ট বুলেট এবং মার্জিন/প্যাডিং সরানো হয়েছে। .active ক্লাসে সক্রিয় লিংকের স্টাইল দেওয়া হয়েছে। li তে display: inline ব্যবহার করে তালিকা আইটেমগুলো সাইড বাই সাইড দেখানো হয়েছে।

  1. CSS দিয়ে কার্ড তৈরি করার পদ্ধতি

  2. CSS দিয়ে কুপন তৈরি করার পদ্ধতি

  3. CSS দিয়ে অ্যারো (Arrow) তৈরি

  4. CSS position প্রোপার্টি ব্যবহার করে অন-স্ক্রোল ফিক্সড নেভিগেশন বার তৈরি করা