مع معرف "التلاشي" الذي سيكون غلافنا الأسود الذي يغمق المحتوى عند النقر فوق رمز القائمة.
وأخيرًا ، نطلق على jQuery من Google وملف البرنامج النصي الخاص بنا ، وهو المكان الذي سنعمل فيه قليلاً. لكن أولا دعونا نذهب من خلال الأنماط.
التصميم مع CSS
لذلك لن نمر على جميع أنماط CSS (إذا كنت تريد فحص أو عرض المصدر على العرض التوضيحي) حيث أنها تستخدم في الغالب في التصميم العام للصفحة ، وهو ليس الهدف في هذه المقالة. سنقوم بتفصيلها وتبحث في عدد قليل من الكودات التي تعتبر مهمة للتأثير. لذلك ، أولاً وقبل كل شيء:
html.no-js #fallback-nav { display: block; }html.no-js .fade { display: none; }html.no-js #navicon { display: none; }html.js #fallback-nav { display: none; }
سنقوم بتعليق الأشياء من خلال التأكد من أنه إذا كان متصفح المستخدم لا يتوفر به جافا سكريبت (هذا هو اسم الفئة هذا على عنصر HTML الذي رأيناه سابقًا باستخدام Modernizr) ، فسنقوم بعرض # fallback-nav في العنوان ، و سنخفي #Fade DIV بالإضافة إلى رمز التنقل. هذا هو الحل الاحتياطي الخاص بنا لذلك يجب أن تكون قائمة الاحتياطي بأسلوب أكثر تقليدية. نحن أيضًا نخفي هذا الحل إذا كانت JavaScript متاحة ، كما يمكنك أن ترى في السطر الأخير.
#navicon {float: right;font-size: 2em;text-decoration: none;position: relative;z-index: 9; }#navicon.open { color: white; }#navicon.open:hover { color: #e6e6e6; }#fade {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #000;opacity: 0.5; }
في هذا القسم ، نعمل على تصميم رمز القائمة في العنوان ، وهو بسيط جدًا ، فقط يعطيه موضعًا نسبيًا ومؤشر z عاليًا (والذي سيكون مفيدًا في وقت لاحق عندما يتلاشى باقي المحتوى سيبقى أعلى). نحن أيضًا نغير اللون إلى اللون الأبيض عندما يكون لدينا فئة "مفتوحة" والتي سنضيفها ونأخذها باستخدام jQuery. يمكننا أيضًا ملاحظة أن div الفردي ذو المعرف "fade" يمتد لملء الشاشة بأكملها وملئها بلون أسود خالص مع شفافية 50٪. إذا لم يكن لدى المستخدم جافا سكريبت ، فسيتم إخفاء هذا الفلتر الأسود ، وإلا فسيتم إخفاؤه باستخدام jQuery. الآن دعونا ننظر إلى القائمة نفسها:
#main-nav {position: fixed;height: 100%;top: 0;right: -250px;background: #222;max-width: 250px;width: 100%;z-index: 5;text-align: center;display: flex;flex-direction: column; }#main-nav a {flex: 1;color: white;border-top: 1px solid #555;text-decoration: none;display: flex;flex-direction: column;justify-content: center; }#main-nav a:hover, #main-nav a.current { background: #3c3c3c; }
لذلك أخيرًا وليس آخرًا ، القائمة الرئيسية. يجب أن أضيف أولاً أن هذا هو الرمز المبسط الذي سيحتاج إلى عدد قليل جدًا من بادئات البائعين قبل أن يكون متوافقًا مع المتصفحات. لتحقيق ذلك أوصي باستخدام أداة رهيبة مثل Autoprefixer لإضافة جميع البادئات الصحيحة لك.
لذلك قيل ، دعنا ننظر إلى ما يستلزمه: أولاً ، تم تحديد موضعه في أعلى تلك الصفحة و 250 بكسل إلى اليمين. هذا يعني أنه موجود ولكن فقط "خارج الشاشة" (حيث أن الحد الأقصى للعرض هو 250 بكسل). الارتفاع أيضًا 100٪ ، بحيث يملأ النافذة بأكملها من الأعلى إلى الأسفل. تحتاج القائمة أيضًا إلى فهرس z بين 0 و 9 (أعلى الفلتر الأسود). ثم ، هنا عندما يحدث السحر ، فإنه يحتوي على عرض: فليكس. الخاصية ، بالإضافة إلى خاصية أخرى مرتبطة بـ "flex-direction" (والتي قمنا بتعيينها على "column" هنا بدلاً من "row" الافتراضي ، مما يعني أن العنصر المرن للأطفال — الروابط الموجودة في القائمة- سوف يملأ الارتفاع بالكامل الأم في أجزاء متساوية).
لذلك كان هذا كله يستهدف حامل القائمة # main-nav ، وبعد ذلك عند تصميم الروابط ، نمنحهم قيمة مرنة تبلغ 1. وهذا ما يجعل الروابط تملئ الارتفاع بالكامل بالتساوي. ثم يتم إعطاء هذه الروابط أيضًا قيمة عرض "flex" نفسها ، مما يعني أن أي عناصر داخل الارتباطات ستتأثر بذلك. نتأكد من أن الاتجاه المرن لا يزال "عمودًا" ثم نضيف خاصية "justify-content: center". هذا يجعل النص نفسه داخل الروابط متمركزة عموديا كذلك (وهذا هو السبب في وجود div داخل ![]()
علامات # main-nav ، وهي ليست بالضبط دلالات ولكن هي طريقة سريعة وسهلة للغاية لعناصر مركزية عموديًا.)
الآن لا يمكننا رؤية أي شيء قمنا به حتى الآن ، نحتاج الآن إلى إضافة وظائفنا من خلال ملف scripts.js الخاص بنا الذي اتصلنا به في وقت سابق.
إضافة الوظيفة مع jQuery
البرنامج النصي لهذا التأثير صغير جدًا وبسيط ، ولكنني سأضعه هنا أولاً ثم اشرح ما يحدث:
$(document).ready(function() {$('#fade').hide();$('#navicon').click(function() {if($('#navicon').hasClass('closed')) {$('body').animate({left: "-250px"} ، 400) .css ({"overflow": "hidden"})؛ $ ('# main-nav'). تنشيط ({right: "0"}، 400)؛ $ (this) .removeClass ('closed' .) .addClass ( 'فتح') أتش تي أم أل ( 'س')؛ $ ( '# تتلاشى') fadeIn ()؛ } آخر إذا كان ($ ('# navicon'). hasClass ('open')) {$('body').animate({left: "0"} ، 400) .css ({"overflow": "scroll"})؛ $ ('# main-nav'). تحريك ({right: "-250px"}، 400)؛ $ (this) .removeClass ('open ') .addClass (' مغلقة ') أتش تي أم أل ( ". ☰.')؛ $ ( '# تتلاشى') الاختفاء التدريجي ()؛ }})؛})؛
لذلك نخفي أولاً الفلتر الأسود. وبعد ذلك ، سيتم احتواء كل ما نفعله داخل إحدى الوظائف المرتبطة بحدث النقر المرتبط برابط رمز القائمة. عند النقر على ذلك ، لدينا حالتان أو موقفان مختلفان ؛ واحد هو عندما تكون القائمة مخفية بالفعل (مثل الحالة الافتراضية) أو واحدة عندما تظهر القائمة. لذا فإن رابط أيقونة القائمة يحتوي على اسم الفصل الذي قمنا بإضافته ، كما قمنا بتصميمه من أجل الفتح. بياننا الأول "إذا" هو أنه إذا كان الرابط مغلقًا (لذلك يكون الإعداد الافتراضي). إذا كان هذا هو الحال ، ثم كله
العنصر متحرك 250 بكسل إلى اليسار ، ويوقف تمرير الصفحة. يتم أيضًا تحريك div # nav الرئيسي في مكانه ، حيث نقوم بتغيير قيمته الصحيحة من -250 بكسل إلى 0. ثم نقوم بإزالة فئة "مغلق" من الارتباط وإضافة واحدة "مفتوحة" بالإضافة إلى تغيير html من الحرف الخاص لثلاثة أسطر إلى "س". وأخيرًا ، يتلاشى الفلتر الأسود لدينا لجعل بقية المحتوى داكنًا. وهذا كل شيء! هذا يعطينا الحالة المفتوحة للقائمة.
الآن يتم استهداف العبارة "آخر إذا" للفئة المفتوحة في ارتباط القائمة. عندما يحدث ذلك فإننا نقوم بعمل كل ما فعلناه من قبل ، مما يؤدي إلى إعادة الجسم إلى موضعه ، وكذلك نقل القائمة خارج الشاشة مرة أخرى. إزالة فئة "فتح" من رمز القائمة وإضافة "مغلقة" وتغيير المحتوى مرة أخرى إلى الأيقونة بالإضافة إلى تلاشي div #fade الخاص بنا. إذا سار كل شيء وفقًا للخطة ، فهذا ما يجب أن تبدو عليه الوظيفة:
استنتاج
لذلك هناك لدينا! هذه إحدى الطرق لتحقيق هذا التأثير الرائع الذي نراه الآن أكثر فأكثر مع أسلوب تصميم الويب الحديث ، لا سيما في تصاميم الهواتف المحمولة. هذا التأثير هو حل لطيف وبسيط لا يتطلب أي ملحقات ويمكن تخصيصه بالكامل لاحتياجات كل مشروع. كما أنها كانت فرصة للاستفادة من flexbox بالإضافة إلى بعض الأدوات المفيدة الأخرى. اسمحوا لي أن أعرف في التعليقات إذا كان هناك أي شيء كنت قد فعلت بشكل مختلف أو ما كنت تعتقد!
صورة مميزة / صورة مصغرة ، صورة باب جرار عبر Shutterstock.
