التعليق: تقدم هذه المقالة بشكل أساسي طريقة استخدام jQuery لتنفيذ قائمة التنقل المستجيبة HTML5. يمكن للأصدقاء الذين يحتاجون إليها الرجوع إليها.
يتم تنفيذها من خلال JQuery+HTML5 ، عندما يتم تضييق نافذة المتصفح أو الوصول إليها بواسطة الهاتف المحمول ، تصبح قائمة التنقل قائمة منسدلة زر. صورة التكاثر:
رمز HTML:
<ul>
<li> <a href = "#"> زر </a> </li>
<li> <a href = "#"> زر </a> </li>
</ul>
</nav>
رمز jQuery:
من خلال رمز jQuery التالي ، سيتم إضافة <div id = menu-icon> إلى <nav id = nav_wrap>. عند النقر فوق #MENU-ICON ، سيتم عرض القائمة:
<script type = "text/javaScript" src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
<script type = "text/javaScript">
$ (document). ready (function ($) {
/ * أيقونة قائمة الإعدادية */
$ ('#nav-wrap'). prepend ('<viv> menu </viv>') ؛
/ * تبديل NAV */
$ ("#menu-icon"). على ("انقر" ، دالة () {
$ ("#nav"). slidetoggle () ؛
$ (هذا) .Toggleclass ("نشط") ؛
}) ؛
}) ؛
</script>
يمكن لعرض العناصر من خلال المتصفح رؤية الرمز المعروض في HTML على النحو التالي:
<v>
<div> قائمة </div>
<ul>
<li> <a href = "#"> زر </a> </li>
<li> <a href = "#"> زر </a> </li>
</ul>
</nav>
رمز CSS:
في رمز CSS ، قم أولاً بتعيين سمة #MENU-ICON لعرضها: لا شيء ؛ ، ثم استخدم الاستعلام الوسائط للحكم على استعلام الوسائط ثم قم بتغيير #MENU-ICON لعرضه: block ؛. فيما يلي رمز نمط المفتاح CSS لتحديد النمط عندما يكون عرض المتصفح أقل من 600 بكسل:
التأثير النهائي هو العرض الأول في المقالة.