شريط التنقل الأفقي CSS
شريط التنقل الأفقي
هناك طريقتان لإنشاء شريط تنقل أفقي. استخدام عناصر القائمة المضمنة أو العائمة .
عناصر القائمة المضمنة
تتمثل إحدى طرق إنشاء شريط تنقل أفقي في تحديد <li> العناصر على أنها مضمنة ، بالإضافة إلى الشفرة "القياسية" من الصفحة السابقة:
مثال
li
{
display: inline;
}
شرح المثال:
display: inline;
- بشكل افتراضي ، <li> العناصر هي عناصر كتلة. هنا ، نقوم بإزالة فواصل الأسطر قبل وبعد كل عنصر من عناصر القائمة ، لعرضها في سطر واحد
عناصر القائمة العائمة
هناك طريقة أخرى لإنشاء شريط تنقل أفقي وهي تعويم <li> العناصر ، وتحديد تخطيط لارتباطات التنقل:
مثال
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
شرح المثال:
float: left;
- استخدم الطفو لجعل عناصر الكتلة تطفو بجانب بعضها البعضdisplay: block;
- يسمح لنا بتحديد المساحة المتروكة (والارتفاع والعرض والهوامش وما إلى ذلك إذا أردت)padding: 8px;
- حدد بعض المساحة المتروكة بين كل <a> عنصر لجعلها تبدو جيدةbackground-color: #dddddd;
- أضف لون خلفية رمادي لكل عنصر <a>
نصيحة: أضف لون الخلفية إلى <ul> بدلاً من كل عنصر <a> إذا كنت تريد لون خلفية كامل العرض:
مثال
ul
{
background-color: #dddddd;
}
أمثلة على شريط التنقل الأفقي
أنشئ شريط تنقل أفقيًا أساسيًا بلون خلفية داكن وقم بتغيير لون خلفية الروابط عندما يحرك المستخدم الماوس فوقها:
مثال
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
رابط التنقل النشط / الحالي
أضف فصل دراسي "نشط" إلى الرابط الحالي للسماح للمستخدم بمعرفة الصفحة التي يتواجد فيها:
مثال
.active {
background-color: #04AA6D;
}
روابط يمين محاذاة
قم بمحاذاة الروابط إلى اليمين عن طريق تعويم عناصر القائمة إلى اليمين ( float:right;
):
مثال
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
فواصل الحدود
أضف border-right
الخاصية إلى <li> لإنشاء فواصل الروابط:
مثال
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
شريط التنقل الثابت
اجعل شريط التنقل يظل في الجزء العلوي أو السفلي من الصفحة ، حتى عندما يقوم المستخدم بتمرير الصفحة:
قمة ثابتة
ul {
position: fixed;
top: 0;
width: 100%;
}
قاع ثابت
ul {
position: fixed;
bottom: 0;
width: 100%;
}
ملاحظة: قد لا يعمل الوضع الثابت بشكل صحيح على الأجهزة المحمولة.
نافبار رمادي أفقي
مثال على شريط تنقل أفقي رمادي بحدود رمادية رفيعة:
مثال
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
شريط التنقل اللزج
أضف position: sticky;
إلى <ul> لإنشاء شريط تنقل ثابت.
يبدل العنصر اللاصق بين النسبي والثابت ، اعتمادًا على موضع التمرير. يتم وضعه نسبيًا حتى يتم استيفاء موضع إزاحة معين في منفذ العرض - ثم "يتم تثبيته" في مكانه (مثل الموضع: ثابت).
مثال
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
ملاحظة: لا يدعم Internet Explorer تحديد المواقع الثابتة. يتطلب Safari بادئة -webkit- (انظر المثال أعلاه). يجب عليك أيضًا تحديد واحد على الأقل من top
، right
أو للموضع الثابت للعمل bottom
.left
مزيد من الأمثلة
توبناف مستجيب
كيفية استخدام استعلامات وسائط CSS لإنشاء تنقل علوي متجاوب.
Sidenav المتجاوب
كيفية استخدام استعلامات وسائط CSS لإنشاء تنقل جانبي سريع الاستجابة.
القائمة المنسدلة Navbar
كيفية إضافة قائمة منسدلة داخل شريط التنقل.
هل سمعت عن W3Schools Spaces ؟ هنا يمكنك إنشاء موقع الويب الخاص بك من البداية أو استخدام قالب واستضافته مجانًا.
ابدأ مجانًا ❯* بطاقة الإئتمان غير مطالب بها