كيفية إنشاء navBar

نافبار أو شريط التنقل Navbar هو عبارة عن عنصر واجهة المستخدم يستخدم عادة في مواقع الويب لعرض روابط الصفحات الأساسية والمهمة للمستخدم. يتم عرض النافبار عادة في أعلى الصفحة ويحتوي على روابط الصفحات الرئيسية والقائمة المنسدلة dropdown لروابط الصفحات الفرعية.

إليك خطوات إنشاء نافبار:

1. تحديد العناصر المطلوبة: قبل البدء في إنشاء نافبار، يجب تحديد العناصر التي تريد عرضها فيها. عادةً ما تتضمن هذه العناصر الروابط الرئيسية والقائمة المنسدلة dropdown وشعار الموقع.


2. بناء هيكل HTML: بعد تحديد العناصر المطلوبة، يمكنك بناء هيكل HTML لنافبار. يمكنك استخدام عنصر <nav> لإنشاء عنصر النافبار. يمكنك استخدام العناصر <ul> و <li> لإنشاء الروابط الرئيسية والروابط الفرعية.


3. تصميم النافبار: يمكنك استخدام CSS لتصميم نافبارك. يمكنك تغيير لون الخلفية ولون النص وتحديد نمط الخط والمسافة بين العناصر وغيرها من الأساليب لتصميم نافبارك.


4. إضافة الوظائف البرمجية: يمكنك استخدام JavaScript لإضافة وظائف إلى نافبارك مثل الانزلاق sliding للروابط الفرعية أو إظهار وإخفاء النافبار في الهواتف النقالة.

كما ترى هذا مثال بسيط لكيفية إنشاء النافبار هذا هو الهيكل الخاص بلغة HTML كما ترى هنا نستخدم العديد من العناصر سنقوم بتوزيع العناصر الخاصة بنا بإستخدام flex كما ترى هذا مثال معقد قليلا سوف نعمل مثال بسيط في الأسفل هذا المثال هو ما يعتمده أغلب المصميمين لتصميم نافبار بشكل جداب يمكنك التمرن عليه خد هذا المثال وحاول عمل به نافبار بتصميم جميل لم يتبقي سوى CSS تحدي لك كي تتعلم أكثر

HTML

<nav>
    <div class="logo">
        <a href="#">شعار الموقع</a>
    </div>
    <ul class="nav-links">
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Services</a>
                <ul class="dropdown-content">
                    <li><a href="#">Service 1</a></li>
                    <li><a href="#">Service 2</a></li>
                    <li><a href="#">Service 3</a></li>
                    <li><a href="#">Service 4</a></li>
                </ul>
            </li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

الآن سوف ننشئ Navbar باستخدام HTML و CSS. ستكون هذه Navbar بسيطة وتحتوي على روابط لصفحتي Home و About و Contact هذا المثال سيفتح لك الباب لتحل التحدي المطلوب منك نحن هنا لكي نتدرب على تصميم نافبار ليس إعطاءك تصميم رائع وجداب يكون جاهز لن تستفيد أي شيء نحن هنا لكي نعطيك كيف تنشىء نافبار ومن ثم نتركك مع خيالك لتصميمها وجعليها أفضل بألوانك الخاصة وتترك عليها بصمتك.
الآن نبدأ مع بنية لغة HTML حيث ستحتوي على عناصر nav ul li سنعطي للعنصر nav كلاس بإسم navbar كي نتحكم به من خلال CSS وسندرج بداخله عنصر القوائم لكي نضيف له جميع الروابط التي سيتنقل منها المستخدم طبها للتنقل بين الصفحات أو الروابط طبعا سنستعمل عنصر ال a ليس لذينا روابط الآن لذي سنستعمل علامة الهاش # يمكنك إضافة الصفحات التي تريدها مستقبلا.
وهنا مثال لكل شيء مذكور في الأعلى على شكل كود:

HTML

<nav class="navbar">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

وهنا مع تنسيقات لغة CSS:

CSS

.navbar {
    background-color: #f45;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    border-radius: 10px;
}

.navbar ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
}

.navbar li {
    float: left;
}

.navbar a {
    display: block;
    color: white;
    text-align: center;
    padding: 13px;
    text-decoration: none;
    margin-right: 5px;
}

.navbar a:hover {
    background-color: #fff;
    color: black;
    border-radius: 20px;
}

كما ترون هنا قمنا بإستخدام ال float لجعل العناصر تعوم شمالا أنت في التحدي قم بإستعمال flex وهنا أيضا قمنا بإستعمال ال position بقيمة fixed وإستعملنا خاصية top مع قيمة 0 لماذا؟ كي تبقى في الأعلى كاملا و بالنسبة لل fixed عند عمل سكرول أي عن الهبوض بالصفحة للأسفل كي تبقى تابثة في مكانها ولا تتحرك وأعطينا للنافبار الخاصة بنا لون أحمر خفيف والروابط إذا مررت عليهم بالمواس تصبح خلفية باللون الأبيط مع بعض التنسيقات شرحنا الأشياء المهمة الباقي فقط تنسيقات يمكنك التحكم بها بنفسك متعلم أصلا اللغة إذا الباقي سهل أتمنى تستفيد معنا وتعرف كيفية عمل النافبار وأتمنى أكثر تعمل التحدي إذا عملته يمكنك ترسل لي صورة التحدي على حساي في فايسبوك.
نتيجةالكود السابق قمت فقط بإزالة خاصائص position and top كي لا تذهب للأعلى كاملا لكي تنظر للنتيجة بشكل أوضح:


وهكذا إنتهينا إذا أعجبكم الدرس أتمنى تدعومنا بمشاركته وشكرا لكم و وفقكم الله.