Koyan horizontal navigation bar CSS

水平导航栏

有两种创建水平导航栏的方法：使用行内或浮动列表项。

行内列表项

构建水平导航栏的一种方法是，除了上一章中的“标准”代码外，还要将

  • 元素指定为 inline：

    مثال

    li {
  display: inline;
}

    亲自试一试

    例子解释：

    display: inline; -默认情况下，

  • 元素是块元素。在这里，我们删除每个列表项之前和之后的换行符，这样它们才能显示在一行。

    • 浮动列表项

    创建水平导航栏的另一种方法是浮动

  • 元素，并为导航链接规定布局：

    مثال

    li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

    亲自试一试

    例子解释：

    • float: left; - 使用 float 使块元素滑动为彼此相邻
    • display: block; - 将链接显示为块元素可以使整个链接区域都可单击（不仅是文本），而且允许我们指定填充（如果需要，还可以指定高度，宽度，边距等）
    • padding: 8px; - Yiyar da yankuna na kai tsuntsaye su zama mai rarraba
    • background-color: #dddddd; - Kona kowane yanki da kai tsuntsaye da gudun

    Tuntubarin:Domin samar rarraba ceke kai tsuntsaye, kama ya kan <ul> kuma kuma kan kowane <a> da yake:

    مثال

    ul {
  background-color: #dddddd;
}

    亲自试一试

    • An fassa ce tawararun da nuna

    An fassa ce tawararun da abin da gudun kai tsuntsaye, kuma ya canza zane kai tsuntsaye na rarraba lokaci domin kuma yau shekarin aiki shekarin:

    مثال

    ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  تنسيق النص: وسط;
  ملء: 14px 16px;
  تنسيق النص: لا شيء;
}
/* عند التمرير بالفأرة على الروابط، قم بتغيير لون الروابط إلى #111 (أسود) */
li a:hover {
  لون الخلفية: #111;
}

    亲自试一试

    رابط توجيهي نشط/حالي

    أضف فئة "active" إلى الرابط الحالي، حتى يعلم المستخدم أنه في أي صفحة:

    مثال

    .active {
  لون الخلفية: #4CAF50;
}

    亲自试一试

    توجيه الروابط إلى اليمين

    من خلال توجيه عناصر القائمة إلى اليمين لتحقيق توجيه الروابط إلى اليمين (float:right;):

    مثال

    <ul>
  <li><a href="#home">المنزل</a></li>
  <li><a href="#news">أخبار</a></li>
  <li><a href="#contact">اتصل بنا</a></li>
  <li style="float:right"><a class="active" href="#about">معلومات عامة</a></li>
</ul>

    亲自试一试

    حواف الفصل

    ضع حدود تمديد الحدود إلى <li>، لإنشاء علامة تقسيم للروابط:

    مثال

    /* أضف حواف رمادية إلى جميع عناصر القائمة، باستثناء العنصر الأخير (last-child) */
li {
  حدود اليمين: 1px متموجة #bbb;
}
li:last-child {
  حدود اليمين: لا شيء;
}

    亲自试一试

    قائمة توجيهية ثابتة

    لحفظ قائمة التوجيه في أعلى أو أسفل الصفحة، حتى إذا كان المستخدم يتجول في الصفحة:

    ثابت في الأعلى

    ul {
  الموقع: مطلق;
  top: 0;
  عرض: 100%;
}

    亲自试一试

    ثابت في الأسفل

    ul {
  الموقع: مطلق;
  الأسفل: 0;
  عرض: 100%;
}

    亲自试一试

    注意：قد لا يعمل بشكل صحيح في الأجهزة المحمولة المزودة بمواقع مطلقة.

    شريط توجيهي أفقي رمادي

    مثال على شريط توجيهي أفقي رمادي مع حواف رمادية فاتحة

    مثال

    ul {
  حدود: 1px متموجة #e7e7e7;
  لون الخلفية: #f3f3f3;
}
li a {
  اللون: #666;
}

    亲自试一试

    قائمة توجيهية تثبيت

    أضف إلى <ul> position: sticky;لإنشاء قائمة توجيهية تثبيت.

    عناصر التثبيت تشبه بين المطلق والمتجول بناءً على موقع التمرير. إنها مطلقة حتى يجد الوجهة المحددة في نطاق العرض - ثم يتم تثبيتها في الموقع المناسب (مثل position:fixed).

    مثال

    ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

    亲自试一试

    注意：Internet Explorer、Edge 15 和更早版本不支持粘性定位。 Safari 需要 -webkit- 前缀（请参见上面的例子）。您还必须指定 top、right、bottom 或 left 至少之一，以使粘性定位起作用。

    更多实例

    响应式的上导航栏
    如何使用 CSS 媒体查询来创建响应式顶部导航。
    响应式的侧导航栏
    如何使用 CSS 媒体查询来创建响应式侧导航。
    下拉式导航栏
    如何在导航栏中添加下拉菜单。