يعتبر النافبار واحد من أهم العناصر الأساسية في أغلب مواقع الويب، فهي الوسيلة التي يستطيع بها الزائر التنقل بين أقسامك الرئيسية وهي كذلك وسيلتك أنت كصاحب الموقع لتوضيح ما هي التصنيفات التي تقدمها أو الصفحات الأهم في موقعك.
لذا أحببنا أن يكون أول مشروع برمجي للمبتدئيين في تصميم وتطوير مواقع الويب هو إنشاء نافبار بسيط Simple Navbar، وحتى يكون متناهي البساطة سيكون بإستخدام لغات HTML و CSS فقط وبدون الحاجة للجافاسكريبت.
مرفق في هذا المقال فيديو من قناتنا EGY Programmer لتعليم تصميم وتطوير مواقع الويب.
فلنبدأ على بركة الله
تصميم نافبار بسيط بإستخدام HTML و CSS فقط
قبل أن تبدأ يجب عليك أن يكون لديك التالي:
برنامج لكتابة الكود (أنصح بشدة ببرنامج VSCode)
متصفح إنترنت حديث (مثل جوجل كروم أو فايرفوكس في أحدث إصداراته)
فيديو إنشاء نافبار بسيط
كود النافبار النهائي
إليك كود المشروع كامل HTML و CSS
<!-- html Code -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<span class="logo"><a href="#">Egy Programmer</a></span>
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>/* CSS Code */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #ddd;
}
a:hover {
color: #fff;
}
nav {
display: flex;
justify-content: space-between;
padding: 20px 30px;
background-color: #222;
}
.menu-list {
display: flex;
gap: 20px;
}شرح تفصيلي لطريقة إنشاء نافبار بسيط
في البداية قم بإنشاء مجلد على جهازك وتسميته بإسم المشروع أو موقعك، أو فتح فولدر مشروعك الحالي الذي ترغب بإضافة هذا الكود عليه
عن نفسي قمت بإنشاء فولدر جديد وتسميته simple-navbar
بعدها قم بفتح المجلد بإستخدام برنامج كتابة الكود المفضل لديك، أنا فتحته بإستخدام VSCode
قم الأن بإنشاء ملف html جديد وليكن مثلًا index.html لنبدأ بالعمل عليه
إنشاء عناصر صفحة HTML للنافبار
الأن قم بداخل الملف الجديد بالضغط من الكيبورد على مفاتيح shift مع مفتاح رقم 1 ، وبعدها أترك المفتاحين وإضغط على tab وستجد أنه قد تم إنشاء الكود المبدئي لمشروعك Basic Code
لو لم تكن مرتاحًا لهذه الطريقة يمكنك كتاته من الصفر بنفسك أو نسخه من الأسفل
الكود المبدئي لصفحة html على vscode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>الأن بداخل عنصر body قم بإضافة عنصر nav وهو الذي سيحمل كل ما يخص النافبار الخاص بك
وهنا دعنا نقسم النافبار إلى جزئين أساسيين هما: اللوجو، والقائمة، دعنا نضع اللوجو في سبان بكلاس logo وبه لينك، وكذلك دعنا نضع قائمة ul بكلاس menu-list أو أي إسم يعجبك وستسخدم هذا الكلاس لاحقًا في css لتنسيق القائمة.
كذلك بداخل عنصر ال ul علينا البدء بإنشاء عناصر li وهي اللينكات الرئيسية التي ستضفها بالقائمة. لذا فكل li سيكون بداخله لينك a
وأخيرًا لا تنسى إنشاء ملف إستايل جديد وليكن مثلًا بإسم style.css بجانب ملف ال index.html وقم بداخل عنصر head بعمل عنصر ميتا جديد لإضافة عنصر الإستايل
بذلك تكون قد إنتهيت من إضافة جميع العناصر المطلوبة حاليًا لإنشاء Navbar بسيط على صفحة ال html وهذا هو الكود لهذه الصفحة بالكامل
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<span class="logo"><a href="#">Egy Programmer</a></span>
<ul class="menu-list">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>إضافة تنسيقات الإستايل CSS للنافبار
الأن عليك بفتح ملف css لإضافة التنسيقات عليه
قم بتجربة الملف بأي كود css أولًا ، في الفيديو ستلاحظ إني قمت بتجربة تغيير خلفية ال body وتأكدت من المعاينة المباشرة أن ملف الإستايل مرتبط بالفعل بملف index.html
قد يهمك أيضًا: طريقة معاينة الكود لايف على VSCode
الأن يمكنك البدء بتغيير نوع الخط المستخدم بإضافة font-family بداخل body وإخيتار عائلة الخط التي تفضلها, عن نفسي إستحدمت:
body {
font-family: Arial, Helvetica, sans-serif;
}والأن دعنا نقوم بتغيير نوع عرض عنصر nav الذي يحوي كل عناصر النافبار ليكون flex بدلًا من block الإفتراضي. وذلك لتكون العناصر على صف واحد بدلًا من ما كانوا متتاليين عموديًا، وستلاحظ أن العنصر الثاني ألا وهو القائمة قد أصبح بعدها بجانب اللوجو بدلًا من ما كان أسفله.
ولكن الأن العنصرين متلاصقين، لذا علينا أن نضع بينهما مسافة، لا نعلم ما هي المسافة المطلوبة بالظبط، وبنفس الوقت بما إننا إستخدمنا الفليكسبوكس على الأب فقد أصبح بإمكاننا إستخدام المحاذاة justify-content وما يهمنا منها هو إستخدام ميزة (المسافة بينهم) أي space-between ليقوم المتصفح تلقائيًا بتحديد كل المساحة الفارعة داخل عنصر الناف ويضعها بين العنصرين لوجو والقائمة تلقائيًا.
كذلك نحن نرغب بأن يكون هناك مسافة حول العناصر التي توجد بداخل الناف لذا فسنستخدم padding ويمكنك تخصيصها كما ترغب
وأخيرًا دعني أغير الخلفية أيضًا بلون مقارب للأسمر
ليصيح الكود النهائي للناف كالتالي:
nav {
display: flex;
justify-content: space-between;
padding: 20px 30px;
background-color: #222;
}ولكن هناك تعديلات إضافية نرغب بعملها، مثلًأ هناك مسافات أساسًا حول جميع عناصر الصفحة، يمكننا إلغائها من خلال تحديد كل العناصر بعلامة النجمة Asterix (*) وإزالة كل المارجين والبادين وحتى إحتساب سماكة البوردر بالكود التالي، ولا تنسى وضع هذا الكود بأعلى الملف تمامًا.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}كذلك بعد أن قمنا بتغيير لون الخلفية أصبح لون اللينكات الأزرق غير ملائمًا، ولتغييره فلا نستطيع تغيير لون النصوص العادي بإضافة color لل body او ال nav، بل علينا بتغيير لون التكست الخاص بالروابط بتحديد عنصر a وكذلك دعنا بنفس الوقت نتخلص من الخط أسفل الروابط.
a {
text-decoration: none;
color: #ddd;
}وهناك أيضًا نقاط تظهر أمام كل عنصر من عناصر li الخاصين بالقائمة ul، دعنا نتخلص منها بالكود:
ul {
list-style-type: none;
}كذلك دعنا نضيف لمسة جمالية على الروابط عند عمل هوفر بالماوس عليها ليتغير لونها للون الأبيض مثلًا بالكود:
a:hover {
color: #fff;
}وأخيرًا القائمة نفسها مازالت بشكل عمودي، دعنا نجعلها أفقية كما عملنا بعناصر الناف وذلك بإستخدام الفليكسبوكس مرة أخرى كالتالي:
.menu-list {
display: flex;
gap: 20px;
}مبروك، بذلك قمت بإنشاء النافبار بمنتهى السرعة والبساطة، سعداء بنجاحك معنا وفهمك وإٍستيعابك لبعض أسباب كتابة الكود بهذا الشكل.
وبرغغم إنك بإمكانك إستخدام هذا النافبار وعرضه بشكل جيد على الشاشات الضخمة والكمبيوتر واللابتوب إلا إنه لن يكون عمليًا على اجهزة السمارت فون والتابلت وبالاخص لو أردت إضافة المزيد من العناص لقائمة النافبار، لذا سيكون عليك معرفة طريقة جعل هذا النافبار متجاوب Responsive ليختلف في طريقة عرضه بناءًا على حجم شاشة المستخدم، وهو الدرس القادم لنا بمشيئة الرحمن.
تابعنا ولأي إستفسارات يرجى ترك تعليقك أسفل المقال وسيتم الرد عليك بأقرب وقت بإذن الله ♥
تحياتي – محمد شاكر
Wow, awesome blog format! How long have you ever been blogging for?
you made blogging glance easy. The overall look of your site is fantastic, as smartly as
the content! You can see similar: e-commerce and here e-commerce