إنشاء قائمة متجاوبة HTML, CSS, jQuery للمبتدئين – خطوة بخطوة

نبذة سريعة

لو كان مستواك متوسطاََ أو أكثر ، فأعتذر منك ، هذا الدرس للذين بدأو للتو في مجال تصميم المواقع ، وسيتم الشرح خطوة خطوة حتى يتم فهم كل كود يتم كتابته ، سنعمل على انشاء قائمة الذي لا يكاد موقع يخلو منها ، عند الإنتهاء ستحصل على شكل كالتالي :

كود الـ HTML

في البداية سنقوم بكتابة وسم البداية والإقفال للـ <nav> </nav> وهو أحد أوسمة HTML5 وترك مساحة بينهما ، لكتابة بقية العناصر .

<nav>
  
</nav>

والان سنعمل على انشاء القائمة ومن أجل ذلك نستخدم وسم <ul>  unordered list من اجل ان يحوي على عناصر القائمة <li>

<nav>
  <ul>
  
  </ul>
</nav>

الان سنقوم باضافة عناصر القائمة التي ستحتوي على روابط الموقع .

<nav>
  <ul>
    <!-- list item one -->
    <li> </li>
    <!-- list item two -->
    <li> </li>
    <!-- list item three -->
    <li> </li>
    <!-- list item four -->
    <li> </li>
  </ul>
</nav>

سنقوم الان باضافة اسماء الاقسام بالاضافة إلى روابطهم التي عند الضغط عليها تذهب إلى الصفحة الخاصة بها وذلك من خلال وسم <a> </a>

<nav>
  <ul>
    <li> 
      <!-- link one -->
      <a> About Me </a>
    </li>
    <li>
      <!-- link two -->
       <a> Projects </a>
    </li>
    <li>
      <!-- link three -->
      <a> CV </a>
    </li>
    <li>
      <!-- link four -->
      <a> Contacts </a>
    </li>
  </ul>
</nav>

عند رؤية الشكل سيكون حتى اللحظة كهذا

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

حتى نجعل هذه الروابط قابله للضغط والذهاب للمكان المناسب سواء في نفس الصفحة أو لصفحة أخرى ، يجب اضافة السمة href  والمقصود بالسمة هو الـ Attribute الخاص بكل عنصر حيث سيكون له قيمة وهو عبارة عن الرابط في هذه الحال .

<nav>
  <ul>
    <li> 
      <!-- link one -->
      <a href="#aboutMe"> About Me </a>
    </li>
    <li>
      <!-- link two -->
       <a href="#projects"> Projects </a>
    </li>
    <li>
      <!-- link three -->
      <a href="#cv"> CV </a>
    </li>
    <li>
      <!-- link four -->
      <a href="#contacts"> Contacts </a>
    </li>
  </ul>
</nav>

لاحظ هنا انه قمنا بوضح علامة الـ # تم بعدها aboutMe بمعني انها ستذهب إلى قسم معين تحتوي على المعرف “id” بهذا الاسم ,  لتضح الصورة اكثر ، عند الضغط على الرابط الذي يحتوي على href=”#aboutMe” سيتم الذهاب إلى المكان الذى يمتلك <section id=”aboutMe”>

كود الـ Css

حتى لا ننسى بعد إضافة الروابط اصبح الان بهذا الشكل ،

الا تلاحظ ان في هذه الحالة شكل النقاط مزعج ، هذا ما سنقوم به هو إزاله هذه النقاط

li{
  list-style-type: none;
}

ستصبح بهذا الشكل

سنقوم الان بإزالة الخطوط الموجودة أسفل كل كلمة

a{
  text-decoration: none;
}

سنجعل هذه الروابط الان بجانب بعضها البعض

li {
  list-style: none;
  display: inline-block;
}

سنقوم الان بوضع خلفية للـ <nav> لكي تبدو أكثر جمالاََ

nav{
  background-color: #D6EFFF;
}

سيكون بهذا الشكل:

لاحظ وجود بعض المسافات من الأعلى ومن واليسار ، ويعود السبب إلى ان الـ ul والـ body يحتوي على قيم افتراضيه ولابد من تصفير هذه القيم أو جعلها بما يتناسب لك

ul{
  margin: 0;
  padding: 0;
}

body{
  margin: 0;
}

الا تلاحظ الالتصاق الشديد بين الكلمات ، سنقوم الان بعمل بعض المسافات من اضافة بعض الهوامش بخاصية الـ margin

li {
  list-style: none;
  display: inline-block;
  margin: 0 15px;
}

الان سنقوم بتغير اللون الإفتراضي الخاص بالروابط ، ووضع البعض المسافات من الأعلى والاسفل وايضاََ تغير نوع الخط .

a{
  text-decoration: none;
  
  /*below I changed the color*/
  color: black;
  /*I added some padding*/
  padding: 10px;
  display: block;
  /*also changed the font family  */
  font-family: monospace;
}

حتى نضيف لمسه جمالية بسيطة ، عند اقتراب مؤشر الفأرة على أحد الروابط نريد تغير خلفية الرابط الذي يؤشر لتصبح بلون اخر

a:hover{
  background-color: #C6E9FF;
}

جعل القائمة متجاوبة

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

الان ، الفكرة انه عندما تكون حجم الشاشة صغير ، نجعل القوائم كلها اسفل بعض بدلاََ من كونها بجانب بعض ومسح الهوامش الخاصة بالـ li ، وهذا الأمر سهل جداََ

/*change the layout of the navigation bar for all the screens 
that have a width less or equal than 500px*/

@media only screen and (max-width: 500px) {
  li{
    margin: 0;
    display: block
  }
}

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

<nav>
  <ul>
      <!-- button here -->
      <button>   </button>
    <li> 
      <!-- link one -->
      <a href="#aboutMe"> About Me </a>
    </li>
    .... etc
</nav>

ولكي نخفيه في الشاشات الكبيرة

button{
  display: none;
}

والان نعمل على اظهاره في الشاشات الصغيرة مع اعطاءه بعض التنسيقات ليظهر بشكل جميل

@media only screen and (max-width: 500px) {
    ...
  
  button{
    /*makes the button visible*/
    display: block;
    
    /*since we are here, we can style it a little bit!*/
    padding: 10px;
    font-size: 12px;
    background-color: #AFE0FF;
    border: none;
    
    /*outline none removes the default blue border that appears anytime you click on the button*/
    outline: none;
    cursor: pointer;
  }
}

وقت الـ jQuery الأن !

قبل البدء بأي شىء ، لا تنسى وضع مكتبة الجيكويري في مشروعك

<script src="jquery-3.4.0.min.js"></script>

حتى نقوم بكتابة كود خاص بالجيكويري هناك طريقتين

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

<head>
    <!-- probably other scripts here -->
    <link rel="stylesheet" href="css/navbar.css">
    
    <!-- here is the library link -->
    <script src="jquery-3.4.0.min.js"></script>
    
    <!-- below will go our script -->
    <script src="scripts/navbar.js"></script>
</head>

2- الطريقة الثانيه وهي ان يتم كتابة كود الجيكويري في نفس ملف الـ HTML

<body>
  
<!--HTML here-->
  
  
  
  <!-- library link -->
  <script src="jquery-3.4.0.min.js"></script>

  <!-- script below -->
  <script type="text/javascript">
  /*code here*/
  </script>
</body>

الان سنقوم بالاتي ، عندما تكون القائمة مفتوحة ، فسوف تكون هذه الايقونه موجودة ” ✖ ” وعند الضغط عليها سيتم غلق القائمة وجلب ايقونه ” ☰ ” وذلك سيكون بواسطة الجيكويري وبأبسط ما يكون

1- سيكون العمل بالطريقة الثانية التي تكلمنا عنها بالاعلى وهي ان يكون الكود في نفس الصفحة ولكن انتبه ان يكون في داخل وسم <script>

2- سنقوم بكتابة الكود عندما تكون الصفحة مستعده لتنفيذه وذلك من خلال

$(document).ready(function(){
  //insert code here
});

الان سنقوم بعمل وظيفة وهي عند الضغط على الزر سيحدث شىء ما

$("document").ready(function(){
  $("button").click(function(){
  //insert code here
  });
});

وهذا ما سيحصل عن الضغط على الزر

اذا كان النص الموجود في الزر عبارة عن ” ✖ ” سيتم استبدالة بـ ” ☰ ” واذا كان عبارة عن ” ☰ ” سيتم استبدالة بـ ” ✖ ”

if($("button").text() == "☰"){
  $("button").text("✖");
}else{        
  $("button").text("☰");      
}

وايضاََ عند الضغط على الزر في حال كانت القائمة ظاهرة تختفي ، واذا كانت مخفيه تظهر وذلك من خلال كود بسيط ويسمى تأثير التبديل

$("li").toggle("slow");

الكود كاملاََ:

/* only execute this script when the document is ready */
$(document).ready(function(){
  /* function called when you click of the button */
  $("button").click(function(){
      
      /* this if else to change the text in the button */
      if($("button").text() == "☰"){
       $("button").text(" ");
      }else{
        $("button").text("☰");
      }
    
    /* this function toggle the visibility of our "li" elements */
    $("li").toggle("slow");
  });
});

وبالنهاية هذا هو شكل القائمة على الشاشات الصغيرة .

وأخيراََ ، إنتهينا ، عذرا على الإطالة ولكن كان ذلك من أجل ان تصل الفكرة بشكل كامل ، شكراََ لمتابعتكم .

في حال وجود اي استفسارات لا تتردد بالتواصل معنا من خلال التعليقات او من خلال صفحة التواصل .

تم ترجمه هذا المقال مع تغير العديد من الأمور لتصبح أكثر سهولاََ !