طريقة إنشاء قائمة من نوع Off Canvas ﺑCSS

معاينة تحميل

في هذا الدرس سنقوم بإنشاء قائمة Off Canvas رائعة بإستخدام CSS، وبدون حاجة لأي سطر JavaScript. مستوى هذا الدرس متوسط  ويتطلب خبرة بخصائص transform وtransition في CSS3. و بإضافة لهذا بعض دراية بهيكلة HTML.

ما سنفعله بتحديد هو إنشاء طبقتين واحدة سفلية والثانية علوية – فوق طبقة الأولى – وسنضع قوائم تصفح وأيقونات الشبكات الإجتماعية في طبقة السفلية أي العنصر الذي يحمل صنف class main-wrapper  سنضع باقي المحتويات في طبقة الثانية –طبقة العلوية-  أي العنصر الذي يحمل صنف content-wrapper، عند ضغط على زر قائمة ستتحرك الطبقة العلوية كاشفةً عن قوائم تصفح وأيقونات الشبكات الإجتماعية بحركة سلسة،

ملاحظة: سنستخدم خط أيقونات Font Awesome لأجل جزء أيقونات الشبكات الإجتماعية في طبقة السفلية في هذا المثال.

بنية HTML

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

سنبدء بإنشاء عنصر div وسنعطيه صنف main-wrapper class وسيكون هذا العنصر طبقة الأولى -طبقة السفلية- وسيحوي بداخله على ثلاثة عناصر div أخرى  وهم قائمة التصفح canvas، الأيقونات icons وطبقة الثانية content-wrapper. وبإضافة لهذا فهناك عنصر input ستعرف لما وكيف سنستخدمه لاحقاً في سطور القادمة ضمن هذا الدرس.

<!-- الحاوي الرئيسي [طبقة الأولى] -->
<div class="main-wrapper">
 <!-- قوائم التصفح -->
 <div class="canvas">
  <div class="profile">
   <img src="img/avatar.jpg" alt="User Picture">
   <span>Mohamed Youssouf MYA</span>
  </div>
  <ul>
   <li><a href="#">الرئيسية</a></li>
  </ul>
  <ul>
   <li><a href="#">قائمة 1</a></li>
  </ul>
  <ul>
   <li><a href="#">قائمة 2</a></li>
  </ul>
  <ul>
   <li><a href="#">قائمة 3</a></li>
  </ul>
  <ul>
   <li><a href="#">قائمة 4</a></li>
  </ul>
 </div>
 <!-- الأيقونات الإجتماعية -->
 <div class="icons">
  <ul>
   <li><a href="#" class="fa fa-facebook"></a></li>
   <li><a href="#" class="fa fa-twitter"></a></li>
   <li><a href="#" class="fa fa-google-plus"></a></li>
   <li><a href="#" class="fa fa-linkedin"></a></li>
   <li><a href="#" class="fa fa-envelope"></a></li>
  </ul>
 </div>
 <input type="checkbox" id="hide">
 <!-- حاوي المحتوى [الطبقة الثانية] -->
 <div class="content-wrapper">
  <label id="btn-menu" for="hide">
   <span class="lines"></span>
  </label>
  // المحتوى هنا ...
 </div>
</div>

في طبقة الثانية وهي عنصر div الذي يحمل صنف content-wrapper سيكون بداخلة عنصر من نوع Label وهو أهم عنصر لأنه سيكون زر الذي يفعل الحدث.

<!-- حاوي المحتوى [الطبقة الثانية] -->
<div class="content-wrapper">
 <label id="btn-menu" for="hide">
  <span class="lines"></span>
 </label>
 // المحتوى هنا ...
</div>

تنسيقات CSS

ملاحظة: التنسيقات تالية لن تحتوى على بادئات للمتصفحات vendor prefixies ولكن ستكون ضمن ملفات المصدرية.

في بداية سنقوم بإعادة تنسيق لجميع العناصر لأجل تخلص من تنسيق الإفتراضي للمتصفحات:

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}

ul, ol {
 list-style-type: none;
}

رمز نجمة * يعني كل أي إجعل قيمة margin وpadding تساوي 0px لكل عناصر وأضف لها box-sizing: border-box;، وبجزء الثاني من الكود حذفنا التنقيط وترقيم من عناصر ul و ol.

وسنقوم بإعطاء قيم مئوية لعرض والطول لعناصر html و body بإضافة لالحاوية الرئيسي .main-wrapper, مع حاوي المحتوي content-wrapper، لاحظ هنا أننا أستخدمنا قيمة overflow: hidden; وهذا لتجنب مشاكل ظهور شريط التمرير Scroll Bar في حالة العرض الكامل للعناصر في المتصفح.

html, body, .main-wrapper, .content-wrapper {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

ثم سنقوم بتنسيق عنصر main-wrapper (الطبقة الأولى) ونعطيه position: relative; لأجل تموضع باقي مكونات بداخله.

.main-wrapper {
 background-color: #3B3B3B;
 position: relative;
}

الأن ننتقل لتنسيق القائمة، سنقوم بإعطاء float: right; لأجل محاذة القائمة لليمين و padding-top: 25px; لإبعاد محتوى القائمة عن الحافة من جهة الفوق، وسنجعل صورة المستخدم متوسطة عبر margin: 0px auto; و display: block;،

.canvas {
 padding-top: 25px;
 float: right;
 color: #fff;
}

.canvas .profile {
 margin-bottom: 10px;
 text-align: center;
}

.canvas .profile img {
 width: 75px;
 margin: 0px auto;
 margin-bottom: 15px;
         display: block;
 border-radius: 50%;
}

.canvas .profile span {
 font-size: 14px;
}

.canvas ul li a {
 width: 200px;
 display: block;
 padding: 10px 15px;
 color: #fff;
 font-size: 18px;
 text-align: center;
 text-decoration: none;
    transition: all 0.5s;
}

.canvas ul li a:hover {
 background-color: #eee;
    color: #000;
}

لاحظ هنا أننا حددنا عرض القائمة عبر .canvas ul li a وأعطيناها width: 200px;، سنستخدم هذه القيمة لاحقاً.
والأن ننطقل لتنسيق جزء الخاص بالأيقونات.

.icons {
 float: right;
}

.icons li {
 float: right;
}

.icons li a {
    display: block;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 20px;
    text-decoration: none;
    color: #B9B9B9;
    transition: all 0.5s;
}

.icons li a:hover {
    background-color: #eee;
    color: #000;
}

سوف نعطي العنصر content-wrapper )الطبقة الثانية( position: absolute; وهذا ليتموضع داخل الحاوي main-wrapper والذي يحمل position: relative;، وأيضا أعطينا العنصر content-wrapper overflow-y: scroll; لأجل إمكانية تمريرعمودياً scroll لمحتوى بداخله،

.content-wrapper {
 padding: 50px 60px;
 background-color: #EEEFF7;
 text-align: center;
 position: absolute;
 overflow-y: scroll;
 box-shadow: 0 0 38px #000;
 transition: transform 0.5s, opacity 0.5s 0.3s;
}

والأخيرا نقوم بتنسيق زر الحدث والذي هو عنصر label مرتبط بعنصر input من نوع checkbox عبر for خارج content-wrapper.

#btn-menu {
    display: block;
    width: 30px;
    height: 30px;
    padding: 5px;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 9999;
}

#btn-menu .lines {
 display: block;
 width: 25px;
 height: 5px;
 background-color: #000;
 position: relative;
    top: 0px;
 transition: transform 0.5s, top 0.5s;
}

#btn-menu .lines:before {
 content: "";
 display: block;
 width: 25px;
 height: 5px;
 background-color: #000;
 position: relative;
       top: 8px;
 transition: background-color 0.5s;
}

#btn-menu .lines:after {
 content: "";
 display: block;
 width: 25px;
 height: 5px;
 background-color: #000;
 position: relative;
      top: 11px;
 transition: transform 0.5s, top 0.5s;
}

إضافة الأحداث

حسنا مثالنا جاهز شكلياً ولكن لا يؤدي الوظيفة بعد، الأن حان وقت لإضافة بعض رشة css سحرية! ما سنقوم به تحديداً هو إضافة تفاعل عند ضغط على زر قائمة عبر إستخدام صنف الزائف :checked التابع لعناصر input من نوع radio، checkbox، و option.و لا ننسى أننا ربطنا عنصر .label الخاص بزر القائمة  بعنصر input من نوع checkbox أي الحدث سيعمل عليه أيضا.

/* تطبيق تنسيق على طبقة الثانية */
input[id=hide]:checked ~ .content-wrapper {
 overflow: hidden;
 transform: translate(-200px,50px);
}
/* تطبيق تنسيقات على زر القائمة */
input[id=hide]:checked ~ .content-wrapper:before {
 z-index: 9;
 opacity: 0.2;
 transition: opacity 0.5s, z-index 0.5s;
}

input[id=hide]:checked ~ .content-wrapper #btn-menu .lines::before {
 background-color: transparent;
}

input[id=hide]:checked ~ .content-wrapper #btn-menu .lines {
 position: relative;
    top: 10px;
    transform: rotate3d(0, 0, 1, 47deg);
}

input[id=hide]:checked ~ .content-wrapper #btn-menu .lines::after {
 position: relative;
    top: -5px;
    transform: rotate3d(0, 0, 1, -93deg);
}

هذه هي كل تنسيقات التي ستطبق عند ضغط على زر القائمة. لاحظ في جزء الأول من كود أعلاه إستخدمنا translate بقيمة 200-px وهذا لإزاحة طبقة العلوية عن القائمة الجانبية و50px من أجل جزء الخاص بالأيقونات.

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

‏‎Bixelio‎‏