عمودی

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Css-menu.jpg
موارد آموزشی
۱خانه
۲مقدمه
۳شیوهٔ نوشتار
۴انتخابگرها
۵اضافه‌کردن CSS
۶نظرات
۷رنگ‌ها
۸پس‌زمینه‌ها
۹کادرها
۱۰حاشیه‌ها
۱۱Padding
۱۲ارتفاع/عرض
۱۳Box Model
۱۴Outline
۱۵متن
۱۶قلم‌ها
۱۷آیکن‌ها
۱۸لینک‌ها
۱۹لیست‌ها
۲۰جداول
۲۱ویژگی Display
۲۲ویژگی Max-Width
۲۳ویژگی Position
۲۴ویژگی Overflow
۲۵ویژگی Float
۲۶مقدار Inline-block
۲۷ترازکردن
۲۸ترکیب کننده‌ها
۲۹شبه کلاس
۳۰شبه عنصر
۳۱ویژگی Opacity
۳۲نوار Navigation
۳۳منو آبشاری
۳۴گالری تصویر
۳۵Image Sprites
۳۶انتخاب‌گرهای خاصیت
۳۷فرم‌ها
۳۸شمارنده‌ها
۳۹چیدمان وب‌سایت
۴۰واحدها
۴۱اولویت‌بندی
CSS پیشرفته
واکنش‌گرایی
Grid در CSS
مثال‌ها
مرجع‌ها

Navigation Bar عمودی

برای ساخت یک navigation bar عمودی، علامه بر کد صفحه قبل، می‌توانید عناصر <a> درون لیست را استایل دهی کنید:[۱]

مثال
li a {
  display: block;
  width: 60px;
}


توضیح مثال:

  • display: block; - لینک‌ها را به صورت عناصر block نمایش می‌دهد که موجب می‌شود کل ناحیه لینک (نه فقط متن) قابل کلیک باشد، و به ما اجازه می‌دهد که عرض (به انگلیسی: width) (و padding ,حاشیه، ارتفاع و… را در صورت نیاز) مشخص کنیم
  • width: 60px; - عناصر block به صورت پیش‌فرض کل عرض موجود را اشغال می‌کنند. می‌خواهیم عرضی به اندازه 60px را مشخص کنیم


همچنین می‌توانید عرض <ul> را تنظیم کنید، و عرض <a> را حذف کنید، چرا که آنها تمامی عرض موجود را در هنگامی که به صورت عناصر block نمایش داده می‌شوند، اشغال می‌کنند. کد زیر نتیجه ای مشابه نتیجه مثال قبل خواهد داشت:

مثال
 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 60px;
 6 }
 7 
 8 li a {
 9   display: block;
10 }


مثال Navigation Bar عمودی

ساخت یک navigation bar عمومی ساده با پس زمینه خاکستری و تغییر رنگ پس زمینه لینک‌ها هنگامی که کاربر نشانه‌گر موس را روی آنها قرار می‌دهد:

مثال
 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 200px;
 6   background-color: #f1f1f1;
 7 }
 8 
 9 li a {
10   display: block;
11   color: #000;
12   padding: 8px 16px;
13   text-decoration: none;
14 }
15 
16 /* Change the link color on hover */
17 li a:hover {
18   background-color: #555;
19   color: white;
20 }


لینک Navigation فعال/ جاری

یک کلاس "active" به لینک جاری اضافه کنید تا به کاربر اجازه دهید که بداند در کدام صفحه است؟

مثال
1 .active {
2   background-color: #4CAF50;
3   color: white;
4 }


وسط‌چین کردن لینک‌ها و اضافه‌کردن کادرها

text-align:center را به <li> یا <a> اضافه کنید تا لینک‌ها وسط چین شوند.

اضافه‌کردن ویژگی border به <ul> موجب اضافه شدن یک کادر در اطراف navbar می‌شود. همچنین اگر شما می‌خواهید درون navbar هم کادر داشته باشید، ویژگی border-bottom را به تمامی عناصر <li> ، به جز آخری، اضافه کنید:

مثال
 1 ul {
 2   border: 1px solid #555;
 3 }
 4 
 5 li {
 6   text-align: center;
 7   border-bottom: 1px solid #555;
 8 }
 9 
10 li:last-child {
11   border-bottom: none;
12 }


Navbar تمام قد عمودی ثابت

ساخت یک navigation جانبی تمام قد، «چسبیده»:

مثال
 1 ul {
 2   list-style-type: none;
 3   margin: 0;
 4   padding: 0;
 5   width: 25%;
 6   background-color: #f1f1f1;
 7   height: 100%; /* Full height */
 8   position: fixed; /* Make it stick, even on scroll */
 9   overflow: auto; /* Enable scrolling if the sidenav has too much content */
10 }


نکته: این مثال بر روی دستگاه‌های موبایلی ممکن است کار نکند.


منابع آموزشی