غالبًا ما تتم مواجهة القائمة المنسدلة في تطوري ، ولكن لا يجب إعادة كتابة أي مشروع. على الرغم من أنها بسيطة ولكنها مزعجة للغاية لتعديلها ، إلا أنني ما زلت كسولًا نسبيًا. اليوم لدي وقت لتنظيم القوائم في تطوير مشروعي السابق وكتابة نسخة عامة. لن أحتاج إلى أن أكون مزعجًا للغاية في المستقبل.
سمات
تم تطوير القائمة التي تم تجميعها اليوم بواسطة JQuery+CSS مع الخصائص التالية:
1. براعة قوية
كانت هناك مشكلة في قائمة منسدلة استخدمتها من قبل ، ويجب ضبط التنقل الرئيسي والسرقة الفرعية بشكل منفصل. على سبيل المثال ، القائمة من المستوى الثاني هي class = "first_menu" ، القائمة من المستوى الثالث هي class = "second_menu" ... وهكذا. هناك مشكلة في طريقة الكتابة هذه ، وهي أنه لا يفضي إلى المبرمجين الذين يقومون بإخراج الحلقة. تحتاج هذه القائمة فقط إلى تقديم نمط CSS ، دون الحاجة إلى تحديد قائمة متعددة المستويات.
2. تعليمات مكالمة تلقائية جميلة
في الماضي ، سنضيف فئة منسدلة إلى القائمة المنسدلة يدويًا. الآن ، نحتاج فقط إلى تحديد نمط التأثير المنسدل في CSS ، وسيبحث الرمز تلقائيًا عن القائمة المنسدلة وإضافة سهام المؤشرات ؛
3. مكالمة بسيطة
قائمة إخراج المبرمج بسيطة ولا تتطلب الكثير من الحكم ، فقط اتصل ببيانات القائمة بشكل متكرر.
ينجز
1. كود HTML
أولاً ، نقوم بإخراج بيانات القائمة على الصفحة ، والتي تتكون من UL و LI لتشكيل قائمة قائمة. رمز الهيكل المحدد هو كما يلي:
<ul> <li> <a href = "#"> home </a> </li> <li> <li> <a href = "#"> القائمة واحدة </a> <ul> <li> <a href = "#" Bird </a> </li> </li></li><li>< a href = "#"> menu two </a> <ul> <ul> <li> <a href = "#"> عنا </a> <ul> <ul> <li> <a href = "#" href = "#"> الولادة والأبدية </a> </li> <li> <a href = "#"> href = "#"> ناجحة </a> </li> </li> </li> <li> <a href = "#" HREF = "#"> تشفير البيانات </a> </li> <li> <a href = "#"> نمذجة البيانات </a> </li> </li> </li> <li> <a href = "#"> c camera </a> </li> </ul>
بعض رموز HTML الأساسية بسيطة ولا تحتاج إلى شرح معنى الكود. يؤكدون على بنية الكود: ما إذا كان المستوى الثاني أو المستوى الثالث أو العديد من قوائم المستوى متداخلة بشكل أساسي ؛ اسم ورقة الأنماط هو أيضًا واحد للغاية ، والسرقة الفرعية هو نمط "sub_menu" ، وهو مفضي للغاية لمكالمات حلقة رمز البرنامج.
2. نمط CSS
رمز نمط CSS بسيط جدًا أيضًا ، الرمز المحدد هو كما يلي:
A {text-decoration: none ؛ } ul ، li {list-style: none ؛ الهامش: 0 ؛ الحشو: 0 ؛ }/*menu menu*/. menue li {background:#111 ؛ اللون: #fff ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30 بكسل ؛ الموقف: قريب تعويم: اليسار. الهامش اليمين: 5px ؛ العرض: 100px ؛ محاذاة النص: المركز ؛ Font-Family: Arial ، Helvetica ، Sans-Serif ؛ } .menue li a {color: #fff ؛ حجم الخط: 14px ؛ العرض: كتلة ؛ }/* نمط القائمة المنسدلة*/ul.sub_menu {الموضع: Absolute ؛ العرض: 100px ؛ العرض: لا شيء ؛ Z-index: 999 ؛ } .menue li ul.sub_menu li {background: none ؛ اللون:#555 ؛ حجم الخط: 12 بكسل ؛ Border-Bottom: 1px #333 Solid ؛ الموقف: قريب العرض: 100px ؛ الارتفاع: 30 بكسل ؛ } .menue li ul.sub_menu li.last {border-bottom: none ؛ } /*سوف يضيف JS هذا الفئة إلى LI LI ، قم بإزالة تأثير القاع الحدودي* /. menue li ul.sub_menu li a {background:#222 ؛ اللون:#888 ؛ العرض: كتلة ؛ الارتفاع: 30 بكسل ؛ . الخلفية: URL (Arrow.png) عدم التكرار. Padding-Right: 15px ؛}/*سهم التنقل الرئيسي هو أسفل*/. menue li a.hasmenu {background: url (Arrow.png) no-repeat right ؛ حشوة اليمين: 15px ؛ خلفية الوضع: اليمين -30px ؛}/*سهم القائمة المنسدلة هو الصحيح*/. لا تكرار أعلى اليمين ؛}. اللون: #ffff ؛}هنا سأؤكد فقط اثنين من الاحتياطات:
1. الفرق بين المطلق والنسبي في الموقف
المطلق: تحديد المواقع المطلقة ، تتم كتابة CSS على أنها "موقف: مطلق ؛" ، ويتم تقسيم وضعه إلى حالتين ، على النحو التالي:
أ. إذا لم يتم تعيين أعلى ، يمين ، أسفل ، ويسار ، فإن الافتراضي هو النقطة الأصلية بناءً على "نقطة المحتوى الأصلية" للوالدين.
ب. هناك حالات يتم فيها تعيين أعلى ، يمين ، أسفل ، ويسار. هناك حالتان على النحو التالي:
(1). لا يوجد لدى الوالد سمة موضع ، ويتم وضع الزاوية اليسرى العليا من المتصفح (أي الجسم) على أنها "نقطة الإحداثيات الأصلية". يتم تحديد الموضع من خلال السمات العلوية واليمين والأسفل واليسرى.
(2). لدى الوالد سمة موضع ، و "الإحداثيات الأصلية" للوالدين هي النقطة الأصلية.
النسبي: تحديد المواقع النسبية ، تتم كتابة CSS على أنها "موضع: قريب ؛" ، في إشارة إلى "نقطة المحتوى الأصلية" للوالدين كنقطة أصلية ، وبدون أحد الوالدين ، فإن "منطقة المحتوى الأصلية" في الجسم هي النقطة الأصلية. يتم تحديد الموضع من خلال السمات العلوية واليمين والأسفل واليسرى ، ولديه وظيفة "التمدد أو الارتفاع الاحتلال".
الاختلافان أعلاه مهمان للغاية وهما تقنية شائعة للغاية. يجب أن تميزهم. لقد أهدرت الكثير من الوقت في التنمية ووجدت مشاكل. في الواقع ، يكون سبب هاتين السمة.
2. استخدم وضع الخلفية
في بعض الأحيان ، من أجل تحسين سرعة الموقع وتسهيل إدارة موقع الويب ، غالبًا ما نضع بعض الصور الصغيرة شائعة الاستخدام على صورة كبيرة. عندما يحتاج CSS إلى الصور الصغيرة المقابلة ، يمكن تحقيقها من خلال هذه الطريقة. طالما أننا نفهم ما يعنيه ، فمن المريح للغاية الاتصال. تشرح هذه الطريقة أن النقطة البيضاء هي وظيفة اعتراض الصورة ، وتفاصيل الاستخدام هي كما يلي:
القواعد:
خلفية الوضع: طول || طول
خلفية الموضع: موقف || موضع
قيمة:
الطول: في المئة | قيمة الطول التي تتكون من أرقام النقاط العائمة ومعرفات الوحدة.
الموقف: أعلى | المركز | أسفل | اليسار | المركز | يمين
يوضح:
يقوم بتعيين أو استرداد موقع صورة خلفية الكائن. يجب تحديد خاصية صورة الخلفية أولاً. لا يتأثر وضع السمة هذا بإعدادات سمة التصحيح للكائن (الحشو). القيمة الافتراضية هي: 0 ٪ 0 ٪. في هذا الوقت ، سيتم وضع صورة الخلفية في الركن الأيسر العلوي من منطقة المحتوى حيث لا يتضمن الكائن تصحيحات (حشوة). إذا تم تحديد قيمة واحدة فقط ، فسيتم استخدام القيمة للإحداثيات الأفقية. سوف الإحداثي الافتراضي إلى 50 ٪. إذا تم تحديد قيمتين ، يتم استخدام القيمة الثانية للإحداثيات. إذا تم تعيين القيمة على المركز الأيمن ، حيث أن قيمة المحور الأفقي ستتجاوز قيمة المركز ، سيتم وضع صورة الخلفية على اليمين. فيما يلي بعض المعادلات
أعلى اليسار ، أعلى اليسار يعادل 0 ٪ 0 ٪.
أعلى ، المركز العلوي ، أعلى المركز يعادل 50 ٪ 0 ٪.
الجزء العلوي الأيمن ، أعلى اليمين يعادل 100 ٪ 0 ٪.
اليسار ، المركز الأيسر ، المركز اليسار يعادل 0 ٪ 50 ٪.
المركز ، المركز يعادل 50 ٪ 50 ٪.
اليمين ، المركز الأيمن ، يمين المركز يعادل 100 ٪ 50 ٪.
أسفل اليسار ، أسفل اليسار يعادل 0 ٪ 100 ٪.
أسفل ، المركز السفلي ، أسفل المركز يعادل 50 ٪ 100 ٪.
أسفل اليمين ، القاع الأيمن يعادل 100 ٪ 100 ٪
3. كود JS
تعتمد هذه القائمة على jQuery ، لذلك يجب عليك أولاً تقديم قاعدة رمز jQuery ، ثم اكتب رمز JS التالي لتنفيذ القائمة المنسدلة.
<script src = "js/jquery.min.js"> </script> <script> $ (document) .READY (function () {// set pinkning default for sciving لا علاقة له بـ $ $ ("ul.menue li.menue_li: eq (0)"). لإزالة آخر $ السفلية (". if ($ (this) .find ("ul") menu.find ("ul.sub_menu: first"). submenu.css ({left: "100px" ، top: "0px"}) $ (". $ (this) .find ("a: first"). removeclass ("now") $ (this) .find ("ul: first"). Hide ()}) ؛/*jQuery Menu End*/}) </script>من خلال الخطوات المذكورة أعلاه ، يتم تحقيق قائمة عامة متعددة المستويات. الرمز أعلاه هو تراكم تطوري اليومي. بسبب مستواي المحدود ، قد يكون هناك العديد من الأخطاء. آمل أن ينتقد زملائي ويصححون أو يقترحون المزيد من الرموز المحسنة للمرجع. شكرًا لك.
إن رمز التنفيذ أعلاه لقائمة Universal Infinitus المنسدلة هو كل المحتوى الذي شاركته معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.