CSS অনুভূমিক নেভিগেশন বার

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

ভিক্টিক্যাল নেভিগেশন বার্তালাইন তৈরির জন্য, আগের চাপ্পার কোড ছাড়াও, তালিকায় <a> ইলেকট্রনিক এলিমেন্টগুলির স্টাইল নির্ধারণ করুন:

ইনস্ট্যান্স

একটি কালো রঙের প্রকৃতির ভিত্তি ভিক্টিক্যাল নেভিগেশন বার্তালাইন তৈরি করুন এবং ব্যবহারকারী লিঙ্কের উপর মাউস লাগানোর সময় লিঙ্কের প্রকৃতির রঙ পরিবর্তন করুন:
  width: 200px;
  - ডিফল্টে, ব্লক ইলেকট্রনিক পূর্ণ উপলব্ধ প্রস্থবর্তীত্ব দখল করবে।আমরা ৬০ পিক্সেলের প্রস্থবর্তীত্ব নির্ধারণ করতে হবে।
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

কোর্স সুপারিশ:

  • width: 200px; ভিক্টিক্যাল নেভিগেশন বার্তালাইন
  • - ডিফল্টে, ব্লক ইলেকট্রনিক পূর্ণ উপলব্ধ প্রস্থবর্তীত্ব দখল করবে।আমরা ৬০ পিক্সেলের প্রস্থবর্তীত্ব নির্ধারণ করতে হবে। উদাহরণ ব্যাখ্যা:

- লিঙ্ককে ব্লক ইলেকট্রনিক হিসাবে প্রদর্শিত করার মাধ্যমে, সমগ্র লিঙ্ক এলাকা ক্লিক করা যাবে (শুধুমাত্র টেক্সট নয়), আমরা প্রস্থবর্তীত্ব (যদি প্রয়োজন, তবে মাইনিউম, মার্গিন, উচ্চতা ইত্যাদি) নির্ধারণ করতে পারি।

ইনস্ট্যান্স

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  - ডিফল্টে, ব্লক ইলেকট্রনিক পূর্ণ উপলব্ধ প্রস্থবর্তীত্ব দখল করবে।আমরা ৬০ পিক্সেলের প্রস্থবর্তীত্ব নির্ধারণ করতে হবে।
} 
একটি কালো রঙের প্রকৃতির ভিত্তি ভিক্টিক্যাল নেভিগেশন বার্তালাইন তৈরি করুন এবং ব্যবহারকারী লিঙ্কের উপর মাউস লাগানোর সময় লিঙ্কের প্রকৃতির রঙ পরিবর্তন করুন:
  width: 200px;
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

আপনি আরও <ul> এর প্রস্থবর্তীত্ব নির্ধারণ করতে পারেন, এবং <a> এর প্রস্থবর্তীত্ব মুক্ত করতে পারেন, কারণ যখন তারা ব্লক ইলেকট্রনিক হিসাবে প্রদর্শিত হয়, তখন তারা সকল উপলব্ধ প্রস্থবর্তীত্ব দখল করবে।এটি আমাদের পূর্ববর্তী উদাহরণের সমতুল্য ফলাফল প্রদান করবে:

width: 60px;

ইনস্ট্যান্স

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  ভিক্টিক্যাল নেভিগেশন বার্তালাইন প্রয়োগ
  background-color: #f1f1f1;
}
একটি কালো রঙের প্রকৃতির ভিত্তি ভিক্টিক্যাল নেভিগেশন বার্তালাইন তৈরি করুন এবং ব্যবহারকারী লিঙ্কের উপর মাউস লাগানোর সময় লিঙ্কের প্রকৃতির রঙ পরিবর্তন করুন:
  width: 200px;
  li a {
  display: block;
  color: #000;
}
padding: 8px 16px;
text-decoration: none;
  /* মাউস হট হলে লিঙ্ক রঙ পরিবর্তন করুন */
  .active {
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

li a:hover {

background-color: #555;

ইনস্ট্যান্স

সক্রিয়/বর্তমান নেভিগেশন লিঙ্ক
  বর্তমান লিঙ্কে "active" শ্রেণী যোগ করুন, যাতে ব্যবহারকারী জানতে পারেন কোন পৃষ্ঠাতে তিনি/তিনি আছেন:
  .active {
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

background-color: #4CAF50;

color: white; মধ্যস্থানে রাখা লিঙ্ক এবং হাড়বাড়ি যোগ করুন text-align:center

নিম্নোক্ত যোগ করুন <li> বা <a> এ, লিঙ্কগুলিকে মধ্যস্থানে রাখুন。 border প্রতিশ্রুতি প্রদান করুন <ul> এ, নেভিগেশন বার্তালাইন চারপাশে হাড়বাড়ি যোগ করুন।আপনি নেভিগেশন বার্তালাইনের ভিতরেও হাড়বাড়ি যোগ করতে চান, তবেলো সকল <li> ইলেকট্রনিক এলিমেন্টগুলিতে border-bottom，শেষ তথ্যটি ছাড়া

ইনস্ট্যান্স

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

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

পূর্ণ উচ্চতার স্থায়ী ভিক্টরিকাল নেভিগেশন বার

পূর্ণ উচ্চতার 'চিকনা' পাশাপাশি নেভিগেশন করুন

ইনস্ট্যান্স

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* পুরো উচ্চতা */
  position: fixed; /* এটা চিকনা করে তোলবে, যদি সরলানুয়ায়ী সরকারকে অনুসরণ করে */
  overflow: auto; /* যদি সাইডবারের কনটেন্ট অনেক বেশি হয়, তবে স্ক্রোলবার সক্ষম করা হবে */
}

স্বয়ংক্রিয়ভাবে চেষ্টা করুন

মন্তব্য:এই উদাহরণটি মোবাইল ডিভাইসে সঠিকভাবে কাজ করতে পারে না。