كيفية إنشاء شريط تنقل (Navigation Bar) باستخدام HTML و CSS
تمت الكتابة بواسطة: عبد الحكيم
تارخ آخر تحديث: 18 ديسمبر 2024محتوى المقال
- الخطوات الأساسية لإنشاء شريط التنقل
- إضافة CSS لتنسيق شريط التنقل
- جعل شريط التنقل متجاوبًا
- إضافة قائمة تنقل منسدلة (Dropdown)
- الخلاصة
شريط التنقل (Navigation Bar) هو عنصر مهم في تصميم مواقع الويب، حيث يساعد المستخدمين على التنقل بسهولة بين صفحات وأقسام الموقع. باستخدام HTML و CSS، يمكن تصميم شريط تنقل متجاوب وسهل الاستخدام. في هذا المقال، سنشرح كيفية إنشاء شريط تنقل بسيط ومرن باستخدام HTML و CSS.
الخطوات الأساسية لإنشاء شريط التنقل
سنبدأ بإنشاء شريط تنقل بسيط يحتوي على روابط لعدة صفحات، ثم نضيف له التنسيقات الأساسية باستخدام CSS لجعله مرنًا وجذابًا. سنحرص على أن يكون شريط التنقل متجاوبًا بحيث يظهر بشكل جيد على الأجهزة المحمولة والمكتبية.
إنشاء الهيكل الأساسي لشريط التنقل باستخدام HTML
الخطوة الأولى هي إنشاء الهيكل الأساسي لشريط التنقل باستخدام HTML. سنستخدم عنصر <nav> لاحتواء الروابط، وعناصر <ul> و<li> لعرض الروابط بشكل مرتب.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>شريط التنقل</title>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">الرئيسية</a></li>
<li><a href="about.html">من نحن</a></li>
<li><a href="services.html">الخدمات</a></li>
<li><a href="contact.html">اتصل بنا</a></li>
</ul>
</nav>
</body>
</html>
في هذا الكود، نستخدم قائمة غير مرتبة <ul> تحتوي على عناصر <li>، وكل عنصر يحتوي على رابط <a> يؤدي إلى صفحات أخرى مثل "الرئيسية"، "من نحن"، "الخدمات"، و"اتصل بنا".
إضافة CSS لتنسيق شريط التنقل
الخطوة التالية هي تنسيق شريط التنقل باستخدام CSS لجعله جذابًا وسهل الاستخدام. سنقوم بكتابة تنسيق لشريط التنقل في ملف style.css.
تنسيق شريط التنقل باستخدام CSS
إليك الكود الأساسي لتنسيق شريط التنقل:
nav {
background-color: #333;;
padding: 10px;;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align: center;
}
nav ul li {
display: inline;
margin-right: 20px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 18px;
}
nav ul li a:hover {
color: #ff9900;
}
في هذا الكود، نقوم بتنظيم الروابط داخل شريط التنقل بطريقة أفقية باستخدام خاصية display: inline لعناصر <li>، ونحدد لون الخلفية لشريط التنقل، مع إضافة تأثير تغيير اللون عند تمرير المؤشر فوق الروابط باستخدام :hover.
جعل شريط التنقل متجاوبًا
لتحسين تجربة المستخدم على الأجهزة المحمولة، يجب أن يكون شريط التنقل متجاوبًا. يمكننا استخدام استعلامات الوسائط (Media Queries) لضبط التنسيق بناءً على عرض الشاشة.
إضافة استعلامات الوسائط لشريط التنقل
سنقوم بتعديل التنسيق ليصبح عموديًا على الأجهزة ذات الشاشات الصغيرة مثل الهواتف المحمولة:
@media only screen and (max-width: 600px) {
nav ul li {
display: block;
margin-right: 0;
margin-bottom: 10px;
}
}
في هذا الكود، نستخدم استعلام الوسائط لجعل شريط التنقل يظهر كقائمة عمودية عند عرض الصفحة على أجهزة ذات عرض شاشة أقل من 600 بكسل.
إضافة قائمة تنقل منسدلة (Dropdown)
يمكنك تحسين شريط التنقل بإضافة قائمة منسدلة لعرض روابط إضافية عند التمرير فوق عنصر معين. إليك كيفية إضافة قائمة منسدلة:
هيكل HTML للقائمة المنسدلة
أضف الكود التالي ضمن شريط التنقل:
<li class="dropdown">
<a href="#" class="dropbtn">المزيد</a>
<div class="dropdown-content">
<a href="#section1">القسم 1</a>
<a href="#section2">القسم 2</a>
</div>
</li>
تنسيق القائمة المنسدلة باستخدام CSS
ثم نضيف التنسيق الخاص بالقائمة المنسدلة:
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
الآن، ستظهر القائمة المنسدلة عند تمرير المستخدم المؤشر فوق عنصر "المزيد".
الخلاصة
إنشاء شريط تنقل باستخدام HTML وCSS هو خطوة أساسية في بناء موقع ويب. يمكنك تخصيص شريط التنقل ليتناسب مع تصميم موقعك واحتياجاتك، مع التأكد من جعله متجاوبًا مع الأجهزة المختلفة. باستخدام استعلامات الوسائط وخصائص CSS مثل Flexbox أو Grid، يمكنك تحسين تجربة المستخدم وضمان التنقل السهل بين صفحات الموقع.
طور مهاراتك: مقالات يجب قراءتها في البرمجة
- كيفية إنشاء معرض صور (Gallery) باستخدام PHP و HTML
- كيفية إنشاء ملفات PDF باستخدام PHP
- كيفية تصميم واجهات مستخدم ملائمة للجوال باستخدام HTML و CSS
- كيفية تحسين سرعة تحميل صفحات HTML
- كيفية استخدام الجداول التفاعلية في HTML باستخدام JavaScript
- كيفية إنشاء نظام تعليقات باستخدام PHP و HTML
- كيفية إنشاء أزرار قابلة للضغط باستخدام HTML و CSS
- كيفية استخدام PHP لإنشاء تقارير Excel
- كيفية إنشاء قائمة أفقية باستخدام HTML و CSS
- كيفية إرسال إشعارات البريد الإلكتروني عند تسجيل مستخدم جديد باستخدام PHP