10/22/2018

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





لاتنسى أخذ نسخة إحتياطية من القالب

تطبيق عملي لنموذج بسيط مع قائمة منسدلة

    في البداية دعنا نلقي نظرة على القائمة الرئيسية في نفس النموذج الذي قدمناه كمثال في الدروس التي مرت معنا ولاحظ جيدا أن مكان القائمة الرئيسية هو داخل الحاوية <nav> والمعرف الخاص به لوتذكرون جعلناه id="nav" أي هي في الموضع المناسب لها.
#header-wrapper <-- 100% --> .col-13
#content-wrapper <-- 100% --> .col-13
#main <-- 350px --> .col-8
#sidebar-wrapper <-- 250px --> .col-5
    دعنا الآن نعرف كيف هي البنية البرمجية للقائمة الرئيسية الخاصة بنا
  • وضعنا كود html التالي الخاص بالقائمة مباشرة أسفل وسم حقل القائمة الرئيسية <nav>

  • 
    <ul class="topnav" id="myTopnav">
     <li>
      <a href="#home" class="active">الرئيسية</a>
     </li>
     <li>
      <a href="#news">أخبار</a>
     </li>
     <li>
      <a href="#contact">إتصل بنا</a>
     </li>
     <li class="dropdown">
        <a href="#" class="dropbtn">خدماتنا 
          <i class="fa fa-caret-down"></i>
        </a>
        <ul class="drop-content">
          <li><a href="#">خدمة 1</a></li>
          <li><a href="#">خدمة 2</a></li>
          <li><a href="#">خدمة 3</a></li>
        </ul>
     </li>
     <li>
      <a href="#about">حول</a>
     </li>
     <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()"><i class="fa fa-bars"></i></a>
     </li>
    </ul>
    

    شرح كود HTML
    الأكواد المحددة بهذا اللون هي حاويات عنصر قائمة <li> يحوي روابط التنقل <a>
    الكود المحدد بهذا اللون هو حاوية عنصر قائمة <li class="dropdown"> لكنه للقائمة المنسدلة <ul class="drop-content"> التي قمنا بتسميتها - خدماتنا -
    الكود المحدد بهذا اللون مهم جدا فهو حاوية عنصر قائمة <li> للزر الذي يعمل على فتح وإغلاق الشريط فهو لايظهر لأنه يجب أن يكون مخفي عند العرض من على شاشات سطح المكتب كما أننا جعلنا إسم الفئة - الكلاس - الخاص به class="icon" ذلك حتى نستطيع التحكم في إظهاره أو إخفائه..ركز عليه.
  • ثم نحتاج كود js التالي فوق الوسم </body>

  • 
    <script type="text/javascript">
    //<![CDATA[
    /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
    function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
        }
    }
    //]]>
    </script>
    

    قبل أن ننتقل لوضع كود CSS دعني أوضح نقطة مهمة بخصوص كود javascript الذي سبق وضعه وهي أننا نحتاج حقن إسم فئة جديد -كلاس- في الحاوية الرئيسية للقائمة لكي نستطيع تخصيص الأنماط البديلة داخل إستعلامات الوسائط .
    بما معناه أنه عند الضغط على زر سيقوم كود javascript بحقن الإسم الفئة responsive وهذا من شأنه إتاحة لنا القدرة على فتح وإغلاق للقائمة الرئيسية.
  • الآن نضع كود css التالي الخاص بالقائمة كالعادة في المكان المخصص له أي فوق الوسم ]]></b:skin>

  • 
    / * خلفية شريط التنقل العلوي * /
    .topnav {
        background-color: #616161;
        overflow: hidden;
    }
    
    /* نمط عنصر القائمة بتجاه اليمين مما يجعل الروابط داخل شريط التنقل معربة */
    .topnav li {
        float: right;
    }
    / * نمط الروابط داخل شريط التنقل * /
    .topnav li a {
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }
    
    / * إضافة فصل نشط لتمييز الصفحة الحالية* /
    .topnav a.active {
        background-color: #6aa84f;
        color: white;
    }
    
    / * إخفاء زر الارتباط الذي يفتح ويغلق القائمة من على الشاشات الصغيرة * /
      .topnav li.icon {
        display: none;
    }
    
    / * الحاوية المنسدلة - اللازمة لوضع المحتوى المنسدل * /
    .dropdown {
        float: right;
        overflow: hidden;
    }
    
    / * نمط زر القائمة المنسدلة * /
    .dropdown .dropbtn {
        font-size: 17px; 
        border: none;
        outline: none;
        color: white;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }
    
    / * نمط المحتوى المنسدل (مخفي بشكل افتراضي) * /
    .drop-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
        top: 100%;
    }
    
    /* تعطيل إتجاه عنصر القائمة للمحتوى المنسدل */
    .drop-content li {
        display: block;
        float: none;
    }
    
    / * نمط الروابط داخل القائمة المنسدلة * /
    .drop-content li a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: right;
    }
    
    / * خلفية داكنة على ارتباطات القائمة الرئيسية وزر القائمة المنسدلة عند التحويم * /
    .topnav a:hover, .dropdown:hover .dropbtn {
        background-color: #555;
        color: white;
    }
    
    / * خلفية رمادية إلى ارتباطات القائمة المنسدلة عند التحويم * /
    .drop-content a:hover {
        background-color: #ddd;
        color: black;
    }
    
    
    / * إظهار القائمة المنسدلة عندما يقوم المستخدم بتحريك الماوس فوق زر القائمة المنسدلة * /
    .dropdown:hover .drop-content {
        display: block;
    }
    
    /* نمط التجاوب - إستعلامات الوسائط - أقصى عرض 775 بيكسل */
    @media screen and (max-width: 775px) {
    
    /* نمط التجاوب -عندما تكون الشاشة أقل من 775 بيكسل عريضة ، أخفِ جميع الروابط ، باستثناء أول واحد ("الصفحة الرئيسية"). */
      .topnav li:not(:first-child) {
        display: none;
      }
      
    /* نمط التجاوب -إظهار الزر الذي يحتوي على فتح وإغلاق */
      .topnav li.icon {
        float: left;
        display: block;
      }
      
    /* نمط التجاوب -إعطاء موضع نسبي لشريط القائمة حتى لايخرج زر الفتح والإغلاق من الشريط عند الضغط عليه */
      .topnav.responsive {
        position: relative;
      }
    
    /* نمط التجاوب -إعطاء موضع مطلق لزر الفتح والإغلاق عند الضغط عليه */
      .topnav.responsive li.icon {
        position: absolute;
        left: 0;
        top: 0;
      }
      
    /* نمط التجاوب - تعطيل إتجاه عنصر القائمة مما يجعل الروابط داخل شريط التنقل تأخذ كامل العرض */
      .topnav.responsive li {
        float: none;
        display: block;
      }
      
    /* نمط التجاوب - إتجاه نص روابط التنقل إلى اليمين - معربة- */
      .topnav.responsive li a {
        text-align: right;
      } 
      
    /* نمط التجاوب - إعطاء موضع نسبي للقائمة المنسدلة بحيث تصبح  (ظاهرة بشكل افتراضي)   */
      .topnav.responsive .drop-content {
        position: relative;
      }
      
    /* نمط التجاوب - إرغام زر القائمة المنسدلة على أن يكون بنفس نمط الروابط داخل شريط التنقل */
      .topnav.responsive .dropdown .dropbtn {
        display: block;
        width: 100%;
        text-align: right;
      }
    }
    

    report
    تنبيه..هنا لن نشرح سوى الدعامات المهمة فقط في النمط...أما بقية الأكواد الغير محددة هي خاصة بستايل القائمة الرئيسية عموما كما أننا وضعنا تعليقات فوق كل دعامة توضح عملها.
    شرح كود CSS
    الجزء المحدد بهذا اللون دعامة إخفاء الزر الذي يعمل على فتح وإغلاق الشريط كما أشرت له سابقا class="icon" وذاك يعني إخفائه عند العرض من على شاشات سطح المكتب بإستخدام الدعامة display: none;.
    الجزء المحدد بهذا اللون هو الأهم فهو خاص بإستعلامات الوسائط لقد إخترنا نسبة max-width:775px كأقصى عرض أي ببساطة عندم تكون نافذة المتصفح 775px أو أقل سيتحول شكل القائمة الرئيسية إلى نمط متجاوب..طبعا أنت تستطيع تغيير النسبة بما يناسبك.
    الجزء المحدد بهذا اللون داخل حاوية إستعلامات الوسائط يعني عندما تكون الشاشة أقل من 775px بكسل ، قم بإخفاء جميع الروابط ، باستثناء أول واحد ("الصفحة الرئيسية").
    الجزء المحدد بهذا اللون داخل حاوية إستعلامات الوسائط هو دعامة نفس الزر الذي يحتوي على فتح وإغلاق قمنا بإخفائه عند العرض من على شاشات سطح المكتب لكن هذه المرة جعلناه ظاهر عندما تكون الشاشة أقل من 775px بكسل بإستخدام display: block; وجعلنا الموضع الخاص به جهة اليسار float: left; حتى لايحجب عنصر آخر.
    بقية الأكواد المحددة بهذا اللون داخل حاوية إستعلامات الوسائط هي الأنماط البديلة للقائمة الرئيسية ولاحظ أنها مدعومة بإسم الفئة responsive الذي تم حقنه بواسطة كود javascript كما وضحنا ذلك سابقا.
  • النتيجة التي تظهر على أداة المحكاة هي بالشكل التالي..قم بالضغط على الزر
  • .
#header-wrapper <-- 100% --> .col-13
#content-wrapper <-- 100% --> .col-13
#main <-- 100% --> .col-8
#sidebar-wrapper <-- 100% --> .col-5