نوار پیمایش CSS

به راحتی یک نوار پیمایش CSS عمودی یا افقی ایجاد کنید.

نوار پیمایش CSS لیستی از پیوندهایی است که به کاربران کمک می کند تا به قسمتهای مختلف وب سایت ها پیمایش کنند.

نکات اصلی نوار پیمایش CSS:

• Navbar در CSS به گروهی از پیوندها اشاره دارد که منجر به صفحات مختلف یک وب سایت می شود.
• نوارها یا عمودی هستند یا افقی.
• عنصر <nav> باید نوارهای اصلی مانند پیوندهای اصلی پیمایش وب سایتها را بپیچاند.

تعریف Navbars

نوار ناوبری CSS مجموعه پیوندها است. این مثال یک نوار ناوبری کاربردی و سبک را نشان می دهد:

ul {
    border: 2px solid #e7e7e8;
    background-color: #e7e7e8;
}

li a {
    color: white;
}

HTML پایه یک نوار نامی را با دو عنصر ایجاد می کند:

• <li> (موردی از لیست را تعریف می کند)
• <ul> (لیست نامرتبی را تعریف می کند)

1. سفارش داده شده
2. لیست

• مرتب نشده
• لیست

در این مثال ها ، عناصر لیست HTML بخش عملکردی نوارها را ایجاد می کنند:

• پیوند 1
• لینک 2
• لینک 3
• لینک 4

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

لازم است تنظیمات پیش فرض مرورگر را برای navbars حذف کنید:

• list-style-type: هیچ کدام گلوله ها را از میله های ناوبری CSS حذف نمی کند.
• حاشیه: 0؛ و پدینگ: 0؛ تنظیمات فاصله پیش فرض مرورگر را حذف می کند.
• این خصوصیات هم برای میله های ناوبری افقی و هم عمودی است.

در مثال ، padding ، حاشیه ها و گلوله ها را از لیست حذف می کنیم:

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

عنصر<nav>

عنصر <nav> نشان می دهد که گروهی از پیوندها برای پیمایش هستند. با این حال ، قرار دادن لیست های مرتب یا غیر مرتب در این عنصر الزامی نیست.

نکته: برای میله های اصلی باید نوار پیمایش خود را در <nav> قرار دهید.

نوار پیمایش عمودی

نوار ناوبری عمودی به عنوان یک لیست منظم از پیوندها ظاهر می شود. نوار عمودی برای پیمایش وب مفید است و می تواند به راحتی به یک فهرست کشویی تبدیل شود.

• پیوند 1
• لینک 2
• لینک 3
• لینک 4

li a {
    display: block;
    width: 50px;
    color: purple;
    background-color: cornsilk;
    text-decoration: none;
}

li a:hover {
    background-color:aliceblue;
}

در اینجا چند نکته در مورد مثال بالا آورده شده است:

• فراموش نکنید که سبک های پیش فرض مرورگر (حاشیه ، پد ، نقاط گلوله) را حذف کنید.
• تزئین متن را اضافه کنید: هیچکدام. زیر خط را حذف کنید.
• ویژگی های مختلفی را برای سفارشی کردن نوار ناوبری عمودی CSS اضافه کنید.
• انتخابگر: شناور نشان می دهد که هنگامی که نشانگر ماوس بر روی پیوندی در نوار CSS حرکت می کند ، رنگ پس زمینه تغییر می کند.

راه های سبک سازی نوارهای عمودی

ویژگی های یک ظاهر طراحی شده می تواند میله های ناوبری CSS را با طراحی های مختلف وب مطابقت دهد. می توانید با افزودن رنگ های مختلف پس زمینه ، تغییر خانواده قلم یا ترازبندی متن ، آزمایش کنید.

این مثال یک نوار ناوبری عمودی ایجاد می کند. با این حال ، ویژگی های یک ظاهر طراحی شده تغییر می کنند:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 250px;
    background-color: #8842d5;
}

li a {
    display: block;
    color: white;
    padding: 9px 17px;
    text-decoration: none;
}

/* When the link is hovered on, its color will change */
li a:hover {
    background-color: #7300ff;
    color: black;
}

پیوندهای فعال پیمایش

وقتی کاربران روی یکی از پیوندها کلیک می کنند می توانید سبک ها را به یک نوار پیمایش CSS اضافه کنید. برای نشان دادن حالتی که قوانین جدید برای یک ظاهر طراحی شده اند ، باید از انتخابگر فعال استفاده کنید:

.active {
    background-color: #7300ff;
    color: black;
}

ایجاد پیوندها در مرکز و افزودن مرزها

متن داخل نوار پیمایش CSS به طور پیش فرض در سمت چپ نشان داده می شود. برای اطمینان از اینکه همه پیوندها در مرکز نوار ظاهر می شوند ، می توانید با افزودن متن-align: center این قانون را به راحتی تغییر دهید.

توجه: ویژگی متن را به چپ یا راست تنظیم کنید تا متن به آن جهت ها منتقل شود.

با افزودن حاشیه می توان منوی پیمایش CSS را از بقیه وب سایت جدا کرد.

این مثال حاشیه ها را اضافه می کند و متن را مرکز می کند:

ul {
    border: 2px solid black;
}

li {
  text-align: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}

li:last-child {
  border-bottom: none;
}

ارتفاع ثابت نوار عمودی

می توانید نوار پیمایش CSS را در سمت مشخص شده تنظیم کرده و تا انتهای صفحه ادامه دهید:

• ارتفاع را روی 100٪ تنظیم کنید.
• موقعیت ثابت را با ثابت نشان دهید.
• اضافه کردن سرریز: خودکار برای قرار دادن یک نوار پیمایشی به نوار پیمایش.

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 30%;
    background-color: #8842d5;
    height: 100%; /* This enables full height */
    position: fixed; /* The position will be constant */
    overflow: auto; /* This enables scrolling */
}

نوار پیمایش افقی

CSS میله های ناوبری افقی را بوسیله:

• اختصاص صفحه نمایش: ویژگی درون خطی به لیست پیوندها.
• با استفاده از شناور.

موارد لیست شده درون خطی

CSS یک نوار افقی CSS با صفحه نمایش ایجاد می کند: ویژگی inline اختصاص داده شده به عناصر <li>.

نکته: عناصر <li> به طور پیش فرض عناصر بلوک هستند. مقدار inline پیوندها را به جای خطوط جدید ، یک ردیف نشان می دهد.

li {
    display: inline;
}

موارد لیست شناور

روش دوم ایجاد نوار افقی خاصیت float است. با شناور کردن عناصر <li> طرح پیوندهای ناوبری را تنظیم می کند.

ویژگی float می تواند از دو کلمه کلیدی استفاده کند: چپ یا راست.

در مثال زیر ، با استفاده از float: right یک نوار پیمایش CSS ایجاد می کنیم:

li {
    float: right;
}

a {
    display: block;
    padding: 9px;
    background-color: #8842d5;
}

در مثال ، یکی از پیوندها با float به سمت راست حرکت می کند: right:

<ul>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link1</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link2</a></li>
  <li><a href="https://www.bitdegree.org/" target="_blank">Link3</a></li>
  <li style="float: right;"><a class="active" href="https://www.bitdegree.org/" target="_blank">Link4</a></li>
</ul>

شناور روی نوار پیمایش افقی

این مثال اضافه می کند: برای تغییر رنگ پس زمینه هنگام نشانگرها ، به نوار پیمایش افقی بروید:

ul {
    list-style-type: none;
    margin: 1px;
    padding: 1px;
    overflow: hidden;
    background-color: #8842d5;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: left;
    padding: 15px 17px;
    text-decoration: none;
}

/* A color changes when hovered over */
li a:hover {
    background-color: #7300ff;
}

پیوندهای فعال پیمایش

این مثال برای تغییر حالت دادن به پیوند وقتی کاربران روی آن کلیک می کنند ، انتخابگر فعال را اضافه می کند:

li a.active {
    background-color: #7300ff;
}

افزودن مرزها

حاشیه های CSS یک جدایی قابل مشاهده بین نوار و بقیه مطالب اضافه می کنند.

/* All items except the last one will have a border on the right side */
li {
    border-right: 2px solid white;
}

li:last-child {
    border-right: none;
}

موقعیت ثابت

می توانید بدون توجه به پیمایش ، نوار پیمایش CSS را برای همیشه در پایین یا بالای صفحه قرار دهید.

موقعیت: ثابت و بالا: 0 میله های ناوبری ایجاد کنید که در بالا ثابت شده اند:

ul {
    position: fixed;
    top: 0;
    width: 100%;
}

موقعیت: ثابت و پایین: 0 میله های ناوبری ایجاد کنید که در پایین ثابت شده اند:

ul {
    position: fixed;
    bottom: 0;
    width: 100%;
}

نکات مهم نوار پیمایش CSS:

• بوت استرپ همچنین می تواند با نوارهای ناوبری به شما در بهبود وب سایت ها کمک کند.
• در مورد پاسخگو نگه داشتن وب سایت ها فراموش نکنید. درباره تضمین ظاهر نوارهای CSS در همه دستگاه ها ، در مورد سوالات رسانه مطالعه کنید.

در دوره آموزش CSS بین المللی آکادمی دویکس به صورت رایگان ثبت نام کنید.