🌟 مقدمة تحفيزية  :

“أهلاً بك يا مهندس الويب ! هل لاحظت أن أقوى المواقع في العالم (مثل جوجل ، فيسبوك ، أو أكاديمية قياوي) تمتلك شريطاً علوياً ثابتاً يرافقك أينما ذهبت ؟ هذا هو الـ Navbar .

اليوم في أكاديمية قياوي ، سنتوقف عن بناء اجزاء متفرقة وسنبدا ببناء “هوية الموقع ” ستتعلم كيف تصمم واجهة موقعك الاحترافية التي يحتوي على الشعار، روابط الأقسام ، وزر التسجيل . اليوم سنجمع كل ما تعلمناه في CSS (من الألوان والـ Flexbox والـ Hover ) لنصنع أهم جزء في أي موقع ويب !”

🏗️ 1. الهيكل الأساسي (HTML) سنستخدم وسم <nav> ليكون الحاوية الرئيسية ، وقائمة غير مرتبة <ul> للروابط . 

<nav class="main-navbar">
    <div class="logo">أكاديمية قياوي</div>
    <ul class="nav-links">
        <li><a href="#">الرئيسية</a></li>
        <li><a href="#">دورات البرمجة</a></li>
        <li><a href="#">الاستشارات</a></li>
        <li><a href="#" class="btn-reg">سجل الآن</a></li>
    </ul>
</nav>

🎨 2. لمسة الإبداع (CSS) هنا سنستخدم Flexbox الذي تعلمناه سابقاً لتوزيع العناصر بذكاء .

.main-navbar {
    display: flex;
    justify-content: space-between; /* الشعار في طرف والروابط في طرف */
    align-items: center;
    background-color: #2c3e50; /* لون الأكاديمية الرسمي */
    padding: 15px 50px;
    color: white;
    position: sticky; /* جعل القائمة ثابتة عند التمرير */
    top: 0;
    z-index: 1000;
}

.nav-links {
    display: flex;
    list-style: none;
}

.nav-links li {
    margin-left: 25px;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #f1c40f; /* اللون الذهبي عند تمرير الفأرة */
}

/* تنسيق زر "سجل الآن" الخاص */
.btn-reg {
    background-color: #e67e22;
    padding: 8px 20px;
    border-radius: 5px;
}

Navigation Bar  شريط التنقل Une barre de navigation (ou navigation bar) est un composant d’interface utilisateur de site web qui permet aux visiteurs d’accéder facilement aux principales sections d’un site. Élément essentiel de l’architecture de l’information, elle sert à orienter l’utilisateur et à renforcer la cohérence visuelle et fonctionnelle du design. شريط التنقل هو مكون واجهة مستخدم يتيح للزوار التنقل بسهولة إلى الأقسام الرئيسية للموقع . يعد عنصرا أساسيا في هندسة المعلومات ، حيث يهدف إلى توجيه المستخدم وتعزيز التماسك البصري والوظيفي للتصميم . Faits clés حقائق رئيسية Fonction principale : guider les utilisateurs vers les pages clés. الوظيفة الرئيسية: توجيه المستخدمين إلى الصفحات الرئيسية . Emplacement courant : en haut de page, parfois sur le côté ou en pied de page. الموقع الشائع: في أعلى الصفحة، وأحيانا على الجانب أو عند التذييل. Formes typiques : horizontale, verticale, fixe, ou mobile. الأشكال النموذجية: أفقية، عمودية، ثابتة، أو متحركة. Éléments : liens, menus déroulants, icônes, champ de recherche. العناصر: روابط، قوائم منسدلة، أيقونات، حقل بحث. Structure et composition التركيب والتركيب Une barre de navigation regroupe généralement le logo du site, un ensemble de liens vers les sections principales et parfois un moteur de recherche ou des boutons d’action. Sur les sites modernes, elle est souvent intégrée dans un header fixe pour rester visible lors du défilement. Les menus peuvent être hiérarchisés pour afficher des sous-catégories, facilitant la navigation dans des structures complexes. عادة ما يتضمن شريط التنقل شعار الموقع، ومجموعة من الروابط للأقسام الرئيسية، وأحيانا محرك بحث أو أزرار إجراءات. في المواقع الحديثة، غالبا ما يكون مدمجا في رأس ثابت ليبقى مرئيا أثناء التمرير. يمكن إعطاء الأولوية للقوائم لعرض الفئات الفرعية، مما يسهل التنقل بين الهياكل المعقدة. Importance pour l’expérience utilisateur أهمية تجربة المستخدم Un design clair et cohérent de la barre de navigation améliore la découvrabilité du contenu et la satisfaction des visiteurs. Elle joue un rôle clé dans la réduction du taux de rebond et l’optimisation du parcours utilisateur, notamment en renforçant la compréhension de la hiérarchie du site et la confiance envers la marque. تصميم شريط التنقل الواضح والمتسق يحسن من سهولة اكتشاف المحتوى ورضا الزوار. يلعب دورا رئيسيا في تقليل معدلات الارتداد وتحسين رحلة المستخدم، بما في ذلك بناء فهم للتسلسل الهرمي للموقع وثقته بالعلامة التجارية. Conception et adaptabilité التصميم والقدرة على التكيف Les concepteurs utilisent des pratiques telles que le responsive design pour garantir que la barre de navigation s’adapte aux écrans mobiles, souvent sous forme de hamburger menu. Les couleurs, typographies et animations sont choisies pour s’intégrer au style visuel du site tout en maintenant la lisibilité et l’accessibilité. يستخدم المصممون ممارسات مثل التصميم الاستجابي لضمان تكيف شريط التنقل مع شاشات الهواتف المحمولة، وغالبا ما يكون ذلك على شكل قائمة برغر. تم اختيار الألوان والطباعة والرسوم المتحركة لتتناسب مع الأسلوب البصري للموقع مع الحفاظ على سهولة القراءة والوصول. Tendances et variantes الاتجاهات والمتغيرات Les tendances récentes incluent les barres translucides, les menus contextuels dynamiques et les mega menus pour les sites à contenu dense. Ces évolutions visent à allier esthétique, performance et facilité d’usage. تشمل الاتجاهات الحديثة أشرطة شفافة، قوائم سياقات ديناميكية، وقوائم ضخمة للمواقع ذات المحتوى الكثيف. تهدف هذه التطورات إلى الجمع بين الجماليات والأداء وسهولة الاستخدام .

🖼 مثال شكل Navbar

كما ترى:  ✔ الشعار في اليسار  ،  ✔ الروابط في اليمين  ،  ✔ خلفية واضحة .

🟢 الخطوة 1: إنشاء الهيكل في HTML  افتح ملف index.html في VS Code ، وضع هذا الكود داخل <body> .

<nav class="navbar">

<div class="logo">Qiyaoui Academy</div>

<ul class="menu">

<li><a href="#">الرئيسية</a></li>

<li><a href="#">الدورات</a></li>

<li><a href="#">المقالات</a></li>

<li><a href="#">اتصل بنا</a></li>

</ul>

</nav>

🟢 الخطوة 2: تصميم Navbar بالألوان أضف هذا الكود داخل <style>.

.navbar{

display:flex;

justify-content:space-between;

align-items:center;

background:#2c7be5;

padding:15px 30px;

}

.logo{

color:white;

font-size:20px;

font-weight:bold;

}

.menu{

list-style:none;

display:flex;

gap:20px;

}

.menu a{

color:white;

text-decoration:none;

font-size:16px;

}

.menu a:hover{

text-decoration:underline;

}

🟢 النتيجة سيظهر :  ✔ شريط أزرق في الأعلى  ،  ✔ اسم الموقع في اليسار  ،  ✔ الروابط في اليمين  ،  ✔ تأثير جميل عند المرور بالماوس  .

🟢 جعل Navbar مناسب للهاتف . أضف هذا الكود :

@media (max-width:768px){

.menu{

flex-direction:column;

background:#2c7be5;

padding:10px;

}

}

📱 عندما تكون الشاشة صغيرة ، القائمة تصبح عمودية .

🧠 نصائح احترافية ، اجعل Navbar دائماً : ✔ بسيط ، ✔ واضح ، ✔ لا يحتوي روابط كثيرة ، ✔ ألوانه متناسقة  .