بسم الله الرحمن الرحيم


دورة تكويد الاستايلات | تكويد نافبار
ها نحن نكمل معكم في دورة تكويد الاستايلات بعد ان انتهينا من دروس تكويد الهيدر بدرس جديد لتكويد النافبار والنفبار او NAVIGATION او شريط التنقل هو شريط يكون اعلى الهيدر او اسفله يحتوي على روابط وايقونات التواصل الاجتماعي احيانا.
يساعد على التنقل بين الصفحات المهمه في المنتدى او الموقع بسهولة مثل عارضه التصفح في منتديات احلى منتدى والتي احيانا يتم استبدالها نفسها بالنافبار.


وكالعادة يمكنك ايضا استخدام محرر اكواد اونلاين Front-end editor لتطبيق الدرس والاكواد المستخدمه فيه. وايضا يمكنك استخدام موقع HTML color codes للحصول على الالوان التي تريد تطبيقها او استعمالها في الهيدر وغيره.
وأخيرا يمكنك استخدام موقع fontface للحصول على الخطوط المنوعه والتي ستحتاجها من اجل أن يكون تصميمك متناسق ويظهر بشكل جميل.
دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) Separa10
مثال على تطبيق الدرس
دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) 37710
https://i.servimg.com/u/f93/15/47/21/99/37710.png
دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) Separa10
نبدأ الدرس :


سنبدأ كما نبدأ دائما باكواد الـ HTML نقوم بانشاء محدد النافبار

الكود:

<div class="navbar">
</div>




ونقوم بوضع روابط داخله يمكن استخدام محدد القائمة li ويمكن روابط عادية فانا عشان اسهل عليكم الموضوع اخترت الروابط العادية بدون قائمة

الكود:

<div class="navbar">
<a href="#">الرئيسية</a>
<a href="#">البوابة</a>
<a href="#">القوانين</a>
<a href="#">اتصل بنا</a>
</div>

دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) Separa10
والان نبدأ باضافة خصائص الـ Css


خصائص النافبار والخلفية والتي ستكون على الشكل التالي :
- الخلفية | Background
- المسافة | Padding
- اتجاه النص | Text-align
- اللون| Color
وهذا هو التطبيق :

الكود:

.navbar {
background: #474747;
padding: 10px;
text-align: right;
color: white;
}




والان نبدأ بمحدد الروابط ونضيف الخصائص والتي ستكون على الشكل التالي :
- اللون | Color
- ديكور النص | Text-decoration
- المسافة | Padding
- الخلفية | Background
وهذا هو التطبيق :

الكود:

.navbar a {
color: white;
text-decoration: none;
padding: 6px;
background: #252525;
}


قمت بوضع خلفية للروابط لتتميز وتظهر على شكل ازرار على النافبار والان سنضيف اليها تأثير بسيط عند مرور المؤشر عليها بتقنية  hover css
وسيكون التأثير على الشكل التالي :
- اللون | Color
- الخلفية | Background
وهذا هو التطبيق :

الكود:

.navbar a:hover {
color: #000;
background: #c6c6;
}




وهذا مثال على التطبيق :
دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) 37810

https://i.servimg.com/u/f93/15/47/21/99/37810.png

لاحظ تغير لون الخلفية ولون الخط عند مرور المؤشر على رابط البوابة
دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) Separa10
وهكذا اخواني الاعزاء اصبح لدينا نافبار كامل وجاهز للاستخدام ووضعه اينما أردت وهذه هي الاكواد المستخدمة في الدرس كاملة :

الكود:

<style>
.navbar {
background: #474747;
padding: 10px;
text-align: right;
color: white;
}
.navbar a {
color: white;
text-decoration: none;
padding: 6px;
background: #252525;
}

.navbar a:hover {
color: #000;
background: #c6c6;
}
</style>

<div class="navbar">
<a href="#">الرئيسية</a>
<a href="#">البوابة</a>
<a href="#">القوانين</a>
<a href="#">اتصل بنا</a>
</div>

دورة تكويد الاستايلات | تكويد شريط التنقل (نافبار) Separa10

والى هنا اعزائي اعضاء وزوار دليل الاشهار العربي ينتهي درسنا لليوم من دورة تكويد استايلات احلى منتدى على دليل الاشهار العربي
والذي شرحت فيه ما تحتاج معرفته لانشاء نافبار لوضعه وربطه باستايل موقعك بطريقة سهلة وبسيطة ويمكنك اضافة عرض للنافبار على الخصائص

الكود:

width : 100%


وذلك لجعله بعرض اي شاشة في حل وجد خلل في ظهوره في موقعك
وفي حل اي استفسار او سؤال لديكم لا تترددوا في فتح موضوع جديد في قسم الدعم الفني وساجيب واساعدكم في حدود معرفتي ان شاء الله


بالتوفيق للجميع
والسلام ختام