CSS নেভিগেশন বার

প্রদর্শন: নেভিগেশন বার

উপরোক্ত নেভিগেশন বার

সমস্তক্ষেত্র নেভিগেশন বার


নেভিগেশন বার

সহজ নেভিগেশন কোনও ওয়েবসাইটেই অত্যন্ত গুরুত্বপূর্ণ:

সিএসএস ব্যবহার করে আপনি অসহজ এইচটিএমএল মেনুকে সুন্দর নেভিগেশন বারে রূপান্তরিত করতে পারেন:

নেভিগেশন বার = লিঙ্ক তালিকা

নেভিগেশন বারকের জন্য স্ট্যান্ডার্ড এইচটিএমএল হলো ভিত্তি:

আমাদের উদাহরণে, নেভিগেশন বারকে স্ট্যান্ডার্ড এইচটিএমএল তালিকা দ্বারা নির্মাণ করা হবে。

নেভিগেশন বার সাধারণত লিঙ্ক তালিকা হিসাবে ব্যবহৃত হয় তাই <ul> এবং <li> ইলেকট্রনিক ইঞ্জিন ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ:

ইনস্ট্যান্স

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

আপনার নিজেই চেষ্টা করুন

এখন, তালিকা থেকে আইটেম স্কেল, মার্গিন এবং প্যাডিং (ফিল্লিং) মুক্ত করুন:

ইনস্ট্যান্স

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

আপনার নিজেই চেষ্টা করুন

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

  • list-style-type: none; - আইটেম স্কেল মুক্ত করুন।নেভিগেশন টেক্সটটি তালিকাভুক্ত করা হয় না।
  • সেট করুন margin: 0; এবং padding: 0; ব্রাউজারের ডিফল্ট সেটিংস মুক্ত করুন。

এই উদাহরণটির কোডটি ভিক্টরিক্যাল এবং হোরিজন্টাল নেভিগেশন বার্টে ব্যবহৃত হয়, আপনি পরবর্তী চাপ্তারে আরও বেশি শিখবেন。