درس صنع قائمة متجاوبة مع الهواتف الذكية بإستخدام CSS
في هذا الدرس سنتعلم معاً كيفة عمل قائمة متجاولة مع الهواتف الذكية بإستخدام CSS ودون استخدام أو كتابة ولو حتى سطر واحد جافاسكريبت
السلام عليكم ورحمة الله وبركاته
في هذا الدرس سنتعلم معاً كيفية صنع قائمة بسيطة متجاوبة مع الهواتف الذكية سنقوم باستخدم الـ CSS فقط دون استخدام أي كود جافاسكريبت، لذلك لا داعي للقلق إن لم يكن لديك معرفة بلغة جافاسكريبت
النتيجة النهائية للدرس :
النتيجة النهائية للدرس :
متطلبات الدرس :
HTML & CSS بمستوى جيد جداً
أهم خصائص الـCSS التي يتوجب عليك معرفتها والتي سنستخدمها في الدرس
في حال لم تكن على معرفة بأي من هذه الخصائص كل مع عليك هو الضغط على الخاصية وسيأخذك الرابط لمعلومات عن الخاصية بالتفصيل على موقع W3School
* ملاحظات هامة :
- لن نتطرق لشرح الخصائص الإساسية لكل من HTML & CSS في الدرس حيث يتوجب عليك معرفتها مسبقاً وسنشرح فقط الأشياء المهمة
- وسيكون الدرس بمثابة إعطاء فكرة عن كيفة العمل واستخدام ما تعلمته اكثر مما هو شرح للـ HTML & CSS
- لن نركز كثيراً على جمالية التصميم والأشياء الثانوية ، فالغرض من الدرس توضيح فكرة وطريقة العمل
والآن دعونا نبدأ في في درسنا
في البداية سنقوم بإنشاء صفحة الـ HTML الخاصة بنا كالتالي :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<!--مكتبة font-awesome-->
<link rel="stylesheet" href="font-awesome.css">
<title>Document</title>
</head>
<body>
<input type="checkbox" id="menu" class="menu">
<label for="menu" class="burger">
<!--هنا قمنا باستخدام أيقونة من مكتبة font-awesome التي ادرجناها -->
<i class="fa fa-bars" aria-hidden="true"></i>
</label>
<!--القائمة-->
<nav>
<ul>
<li><a href="#">الرئيسية</a></li>
<li><a href="#">المدونة</a></li>
<li><a href="#">عن الموقع</a></li>
<li><a href="#">اتصل بنا</a></li>
</ul>
</nav>
</body>
</html>
في الكود أعلاه قمنا أولاً بإضافة input من نوع checkbox سنستخدم هذا الحقل في إظهار أو أخفاء القائمة عند تصفح الصفحة على الشاشات الصغيرة أو الهواتف المحملولة في حال قمنا بتحديدها
بعد ذلك ببساطة قمنا بإنشاء قائمة بسيطة فيها عدة روابط
لاحظ أننا في البداية قمنا بإدراج مكتبة font-awesome وهي مكتبة تقوم بتوفير أيقوانات متنوعة سنحتاجها لإضافة أيقونة الهامبرجر والتي بالفعل قمنا بإضافتها في الكود
النتيجة :
الآن سنبدأ العمل على الـ CSS
في البداية وبشكل سريع سنقوم بإضافة الأكواد التالية :
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
direction: rtl;
font-family: "droid arabic kufi";
}
الآن سنبدأ في نسيق القائمة الخاصة بنا وسنبدأ بالعمل مباشرة مع الـ Media Query
أولاً سنعمل على القائمة لمقاسات الشاشة الكبيرة فوق 500 بيكسل حيث أننا سنعمل على عمل تصميم مختلف لحجم كل شاشة بإستخدام الـ Media Query كما في التالي :
@media (min-width: 500px){
nav {
background: #009688;
width: 100%;
height: 30px;
}
nav ul {
width: 100%;
list-style: none;
padding: 0;
}
nav ul li{
width: 100px;
height: 30px;
float: right;
text-align: center;
line-height: 30px;
border-left: 1px solid #fff;
font-size: 16px;
font-weight: 800;
position: relative;
}
nav ul li a {
color: #fff;
text-decoration: none;
position: absolute;
top:0;
right: 0;
left: 0;
bottom: 0;
}
}
هنا لا يوجد شيء غير طبيعيى كل ماقمنا به هو تتنسيق القائمة لا أكثر
الشيء الوحد المهم هنا هو استخدام ( @media (min-width: 500px) أي أن هذا التنسيق لن يعمل إلى في حال كان حجم الشاسة التي التي عليها التصميم 500 بكسل أو اكبر
فلو قمت بفتح التصميم على شاشة صغير أو قمت بتصغير نافذة المتصفح فلن يعمل
النتيجة :
لكن في المقابل لو قمت بتصغير شاشة المتصفح إلى حجم أقل من 500بكسل ستكون النتيجة كالتالي :
لكن لا تقلق سنقوم بإضافة تصميم خاص لها وبنفس الطريقة ولكن لاحقاً
قبل ذلك سنقوم بإخفاء علامة (checkbox) وايضاً سأقوم بعمل تأثير بسيط على روابط القائمة عند مرور المؤشر عليها
li:hover {
background: #03a797;
}
#menu{
display: none;
}
دعنا نقوم ايضاً بتنسيق تلك الإيقونة الهامبرجر الصغيرة ولكننا ايضاً في نفس الوقت سنقوم بإخفائها ولن تظهر إلى على الشاشات الصغيرة
.burger{
display: none;
background: #009688;
padding: 5px 12px;
color: #fff;
position:absolute;
top: 0;
left: 0;
cursor: pointer;
}
والنتيجة كما نرى :
الآن سنكمل تنسيق قائمتنا على أحجام الشاشات الصغيرة
وبنفس الطريق التي فعلنا مع حجم الشاشات الكبيرة فقط هذه المرة سنستخدم @media (max-width: 500px)
هذه تعني بأن أي تغييرات نقوم بالعمل بداخلها لن تظهر إلى فقط في حجم الشاشات التي لا يتجاوز عرضا 500 بكسل
الآن دعنا نضيف الكود التالي ونرى النتجية :
@media (max-width: 500px){
nav {
background: #009688;
width: 80%;
height: auto;
position: absolute;
right: -79%;
transition: all .35s;
}
nav ul {
width: 100%;
list-style: none;
padding: 0;
}
nav ul li{
text-align:right;
height: 40px;
line-height: 40px;
position: relative;
}
nav ul li a {
margin-right: 5px;
width: 100%;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
النتيجة :
في الكود أعلاه قمنا بتصميم القائمة الخاصة بنا بطريقة مختلفة عن التصميم الأول الخاص بالشاشات الكبيرة ، ولكننا قمنا بجعل تموضع القائمة حرية مطلقة (position: absolute;)
وقمنا بإزاحته لليمين بالكامل ولم نترك إلا جزئية صغيرة فقط منه ، وهذا مجرد ذوق شخصي تستطيع أن تخفيها بالكامل
وبدل من ذلك تستطيع إخفائها ايضاً عن طريق خاصية (display:none) ومن ثم اظهارها مثلاً عن طريق (display:block) ولكني قمت بهذه الطريقة لأني أريد عمل تأثير بسيط وهو بجعل القائمة تخرج من الجهة اليمنى عن الضغط على أيقونة الهامبرجر ومن ثم ترجع مرة اخرى
إذا بإستطاعتك فعل ما تشاء ولكن أنا قررت استخدام هذه الطريقة
لاحظ أنني ايضاً قمت بإضافة حركة إنتقالية بسيطة للقائمة (transition: all .35s;)
الآن دعنا نقوم بإظهار أيقونة الهامبرجر
لا بد وأنك تتذكر بأننا قمنا بتفعيل (display:none) على الكلاس (burger) ولهذا فهي غير ظاهرة إذاً كل ما علينا فعله الآن هو أن نقوم بعمل (display: block) بداخل @media (max-width: 500px)
إذا دعنا نقوم بإضافة ذلك الآن
.burger{
display: block;
}
والنتيجة كما ترى أمامك :
جميل جداً، الآن كل ما تبقى لنا هو شيء واحد فقط وهو إظهار هذه القائمة عند الضغط على أيقونة الهامبرجر
ولنفعل ذلك سنحتاج خاصية (:checked) فكما تعلم أن هذه الأيقونة في الأساس تنتمي للـ label تابع لحقل من نوع (checkbox)
وعند الضغط عليها سيقوم بتفعيلها ولكنها مخفية
الآن دعنا نقوم بذلك عن طريق الكود التالي ولكن لا تنسى أن تضيفه بداخل @media (max-width: 500px) الخاص بالشاشات الصغيرة ولم نخرج منها بعد
#menu:checked + .burger + nav {
right: 0;
transition: all .35s;
}
كما لاحظت بأننا اضفنا (#menu:checked + .burger + nav) وكأننا نقول عند تحديد الـ checkbox قم بالبحث عن (burger) ثم (nav) وبعد ذلك قمنا بإخرج القائمة بتغيير اتجاه right إلى 0
فكما تعلم نحن قمنا سابقاً بإخفاء القائمة يمين الشاشة والآن فقط قمنا بإخراجها
وقي النهاية قمنا بإضافة حركة انتقالية بسيطة لتعطي بعض الدينيماكية أثنا تحرك القائمة
الآن إن ذهب وضغط على أيقونة الهامبرجر ستقوم القائمة بالخروج من اليمين بشكل جميل
الآن قد انتهينا من الدرس ولكن سأقوم بخطوة اخيرة قبل ذلك وسأقوم بتغميق حلفية أيقونة الهامبرجر عن تحديد checkbox لنعلم بأننا قد قمنا بالضغط عليها
ولنقوم بذلك سنقوم بنفس طريقة إظهار القائمة بإستخدام (:checked)
وبداخل @media (max-width: 500px)
سنقوم بإضافة الكود التالي :
#menu:checked + .burger {
background: #008477;
}
الآن عند قيامك بالضغط أيقونة الهامبرجر سيتحول لونها للأخضر الغامق
والآن هذا هو كود التصميم النهائي للشاشات الصغيرة
@media (max-width: 500px){
nav {
background: #009688;
width: 80%;
height: auto;
position: absolute;
right: -79%;
transition: all .35s;
}
nav ul {
width: 100%;
list-style: none;
padding: 0;
}
nav ul li{
text-align:right;
height: 40px;
line-height: 40px;
position: relative;
}
nav ul li a {
margin-right: 5px;
width: 100%;
color: #fff;
text-decoration: none;
font-size: 16px;
font-weight: 600;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.burger{
display: block;
}
#menu:checked + .burger + nav {
right: 0;
transition: all .35s;
}
#menu:checked + .burger {
background: #008477;
}
}
وهنا نكون قد وصلنا للنتيجة النهائية للدرس كما في التالي :
وفي الختام إن رأيت بأن هذا الدرس كان ذا فائدة بالنسبة لك فنرجوا منك دعمنا ونشر الدرس على المواقع الإجتماعية لتعم الفائدة للجميع
دمتم بحفظ الله ...
شكرا
ردحذف