كيفية إنشاء الملاحة استجابة

واحدة من أصعب أجزاء ليكون responsified على موقع الويب هو “الملاحة”, هذا الجزء مهم حقًا للوصول إلى موقع الويب ، حيث يعد هذا أحد الطرق التي ينتقل بها الزوار عبر صفحات الويب.

هناك بالفعل العديد من الطرق لإنشاء تنقل سريع الاستجابة للموقع وحتى بعض الإضافات jQuery متوفرة للقيام بذلك في الثانية.

ومع ذلك ، بدلاً من تطبيق حل فوري ، في هذا المنشور ، سننتقل إليك كيفية بناء الملاحة بسيطة من الأرض واستخدام استعلامات وسائط CSS3 و jQuery قليلاً لعرضه بحجم شاشة صغير مثل الهواتف الذكية بشكل صحيح.

لذلك ، دعونا فقط نبدأ.

• عرض
• تحميل المصدر

HTML

بادئ ذي بدء ، دعنا نضيف إطار عرض meta داخل رئيس العلامة. هذه الفوقية viewport العلامة مطلوبة لتوسيع صفحتنا بشكل صحيح داخل أي حجم للشاشة ، لا سيما في إطار العرض للجوال.

... ثم قم بإضافة المقتطف التالي كعلامة تنقل داخل الجسم بطاقة.

كما ترون أعلاه ، لدينا ستة روابط قائمة أساسية وأضفنا رابطًا آخر بعدها. سيتم استخدام هذا الرابط الإضافي ل سحب. شد قائمة التنقل عندما تكون مخفية في شاشة صغيرة.

قراءة متعمقة: لا تنس علامة meta viewport.

الأنماط

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

 body background-color: # ece8e5؛  

ال الملاحة العلامة التي تحدد التنقل سيكون لها 100٪ العرض الكامل لنافذة المتصفح ، في حين أن المجاهدين حيث يحتوي على روابط القائمة الرئيسية لدينا سيكون 600px ل للعرض.

 nav الارتفاع: 40 بكسل ؛ العرض: 100 ٪ ؛ الخلفية: # 455868 ؛ حجم الخط: 11pt ؛ font-family: 'PT Sans'، Arial، sans-serif؛ وزن الخط: غامق ؛ الموقف: نسبي الحد السفلي: 2px صلب # 283744 ؛  nav ul padding: 0؛ الهامش: 0 السيارات ؛ العرض: 600 بكسل ؛ الارتفاع: 40 بكسل ؛  

ثم سنقوم تطفو ارتباطات القائمة إلى اليسار ، بحيث يتم عرضها أفقياً جنبًا إلى جنب ، لكن تعويم عنصر ما يؤدي أيضًا إلى انهيار الوالدين.

 nav li display: inline؛ تعويم: اليسار؛  

إذا لاحظت من علامة HTML أعلاه ، فقد أضفنا بالفعل clearfix في ال صف دراسي السمة لكل من الملاحة و المجاهدين لمسح الأشياء عند تعويم العناصر الموجودة داخله باستخدام اختراق CSS clearfix. لذلك ، دعونا نضيف قواعد النمط التالية في ورقة الأنماط.

 .clearfix: قبل ، .clearfix: بعد content: ""؛ جدول العرض؛  .clearfix: after clear: both؛  .clearfix * zoom: 1؛  

نظرًا لأن لدينا ستة روابط قائمة وقمنا أيضًا بتحديد الحاوية لـ 600px ل, سيكون لكل روابط القائمة 100px للعرض.

 انتقل إلى color: #fff؛ عرض: كتلة مضمنة. العرض: 100 بكسل ؛ محاذاة النص: المركز ؛ زخرفة النص: لا شيء ؛ ارتفاع الخط: 40 بكسل ؛ text-shadow: 1px 1px 0px # 283744؛  

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

 nav li a border-right: 1px solid # 576979؛ مربع التحجيم: مربع الحدود؛ -moz مربع التحجيم: مربع الحدود؛ التحجيم -webkit مربع: مربع الحدود؛  nav li: last-child a border-right: 0؛  

بعد ذلك ، سيكون للون لون أكثر إشراقًا عندما يكون فيه :يحوم أو :نشيط حالة.

 nav a: hover، nav a: active background-color: # 8c99a4؛  

... وأخيرًا ، سيتم إخفاء الرابط الإضافي (لشاشة سطح المكتب).

 انتقل إلى # سحب عرض: لا شيء ؛  

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

قراءة متعمقة: CSS3 Box-sizing (Hongkiat.com)

تساؤلات الإعلام

يتم استخدام استعلامات وسائط CSS3 لتحديد كيفية تحول الأنماط في بعض نقاط التوقف المحددة أو تحديدًا أحجام شاشة الجهاز.

منذ الملاحة لدينا في البداية 600px ل إصلاح العرض ، سنقوم أولاً بتعريف الأنماط عندما يتم عرضها في 600px ل أو انخفاض حجم الشاشة ، لذلك من الناحية العملية, هذه هو أول نقطة توقف لدينا.

في حجم الشاشة هذا ، سيتم عرض كل ارتباط من قائمتين جنبًا إلى جنب ، وبالتالي فإن المجاهدينعرض هنا سيكون 100٪ من نافذة المتصفح في حين أن الروابط القائمة سوف يكون 50٪ للعرض.

 media screen و (max-width: 600px) nav height: auto؛  nav ul width: 100٪؛ العرض محجوب؛ الارتفاع: السيارات ؛  nav li width: 50٪؛ تعويم: اليسار؛ الموقف: نسبي  nav li a border-bottom: 1px solid # 576979؛ الحدود اليمنى: 1px صلب # 576979 ؛  انتقل إلى text-align: left؛ العرض: 100 ٪ ؛ المسافة البادئة للنص: 25 بكسل ؛  

... وبعد ذلك ، نحدد أيضًا كيفية عرض التنقل عندما تصبح الشاشة أصغر حجمًا 480px أو أقل (لذلك هذا هو نقطة التوقف الثانية لدينا).

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

 media فقط screen and (max-width: 480px) nav border-bottom: 0؛  nav ul display: none؛ الارتفاع: السيارات ؛  تصفح # سحب display: block؛ لون الخلفية: # 283744؛ العرض: 100 ٪ ؛ الموقف: نسبي  انتقل إلى # سحب: بعد content: ""؛ الخلفية: url ('nav-icon.png') بلا تكرار ؛ العرض: 30 بكسل ؛ الارتفاع: 30 بكسل ؛ عرض: كتلة مضمنة. الموقف: مطلق ؛ اليمين: 15 بكسل ؛ أعلى: 10 بكسل ؛  

أخيرًا ، عندما تصبح الشاشة أصغر 320PX وخفض سيتم عرض القائمة رأسيا من أعلى إلى أسفل.

 media فقط الشاشة و (الحد الأقصى للعرض: 320 بكسل) nav li display: block؛ تعويم: لا شيء ؛ العرض: 100 ٪ ؛  nav li a border-bottom: 1px solid # 576979؛  

الآن ، يمكنك محاولة تغيير حجم نافذة المتصفح. يجب أن يكون الآن قادراً على تكييف حجم الشاشة.

قراءة متعمقة: استعلامات الوسائط للأجهزة القياسية.

عرض القائمة

في هذه المرحلة ، ستظل القائمة مخفية وستكون مرئية فقط عند الحاجة إليها من خلال النقر على “قائمة طعام” رابط ويمكننا تحقيق التأثير باستخدام مسج slideToggle ().

 $ (function () var pull = $ ('# pull') ؛ قائمة = $ ('nav ul') ؛ menuHeight = menu.height () ؛ $ (سحب). على ('click' ، function (e) e.preventDefault () ؛ menu.slideToggle ()؛)؛)؛ 

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

لذلك ، نحن بحاجة إلى إزالة هذا النمط عند تغيير حجم النافذة ، كما يلي:

 $ (window) .resize (function () var w = $ (window) .width ()؛ if (w> 320 && menu.is (': hidden')) menu.removeAttr ('style')؛ )؛ 

حسنًا ، هذه هي جميع الرموز التي نحتاجها ، يمكننا الآن عرض التنقل من الروابط التالية ، ونحن نوصيك باختباره في أداة اختبار تصميم مستجيبة ، مثل "المستجيب" ، بحيث يمكنك مشاهدته بعرض مختلف في وقت واحد.

• عرض
• تحميل المصدر

المكافأة: طريقة بديلة

كما ذكرنا سابقًا في هذا المنشور ، هناك بعض الطرق الأخرى للقيام بذلك ، واستخدام مكتبة JavaScript تسمى SelectNav.js هي واحدة من أسهل الطرق. هذا جافا سكريبت خالص لا يعتمد على مكتبة طرف ثالث مثل jQuery.

في الأساس ، فإنه سيتم تكرار قائمة قائمتها وتحويلها إلى من القائمة المنسدلة ، ستتمكن من اختيار أي منها مخفي أو يظهر حسب حجم الشاشة من خلال استعلامات الوسائط.

أحد الميزات التي أحبها في هذه الممارسة هو أننا لا داعي للقلق بشأن أسلوب التنقل مثل

سوف القائمة الاستفادة من واجهة المستخدم الأصلية من الجهاز نفسه.

يرجى الرجوع إلى الوثائق الرسمية لمزيد من التنفيذ.

استنتاج

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