سی ایس ای عمودی ناویگیشن بار

دوره‌های انتخابی

پیشنهادات دوره:

مثال

یک ناوبری عمودی بنفش ایجاد کنید و رنگ پس‌زمینه لینک‌ها را در حالت قرارگیری موس تغییر دهید:
  width: 200px;
  - به صورت پیش‌فرض، عنصر بلوک تمام عرض قابل استفاده را اشغال می‌کند. باید عرض 60 پیکسل را مشخص کنیم.
}

خود کو کچھ کوشش کریئے

ناوبری عمودی

  • width: 200px; برای ساخت ناوبری عمودی، علاوه بر کد‌های قبلی، می‌توانید به استایل‌های عناصر <a> در لیست نیز توجه کنید:
  • - به صورت پیش‌فرض، عنصر بلوک تمام عرض قابل استفاده را اشغال می‌کند. باید عرض 60 پیکسل را مشخص کنیم. مثال توضیحی:

- نمایش لینک به عنوان عنصر بلوک باعث می‌شود که کل منطقه لینک قابل کلیک باشد (و نه تنها متن)، و می‌توانیم عرض را نیز مشخص کنیم (اگر نیاز باشد، می‌توانیم عرض داخلی و خارجی و ارتفاع نیز مشخص کنیم).

مثال

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  - به صورت پیش‌فرض، عنصر بلوک تمام عرض قابل استفاده را اشغال می‌کند. باید عرض 60 پیکسل را مشخص کنیم.
} 
یک ناوبری عمودی بنفش ایجاد کنید و رنگ پس‌زمینه لینک‌ها را در حالت قرارگیری موس تغییر دهید:
  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

اضافه کنید تا لینک‌ها را در وسط قرار دهید. 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; /* اگر سائیڈ بار کا محتوا بہت زیادہ ہو تو اس میں اسکرول کا استعمال کریئے */
}

خود کو کچھ کوشش کریئے

توجہ:ممکن ہے کہ اس مثال کو موبائل اپلی کیشن میں کار کردگی نہ ہو