الجزء الرئيسي الصفحة:
<Body> <ul id = menu> <li> <a href =#> القائمة الأولى 1 </a> <ul> <li> القائمة الثانية 1 </li> <li> القائمة الثانية 1-1 </li> <li> القائمة الثانية 1-2 </li> <li> القائمة الثانية 1-3 </li> menu2 </a> <ul> <li> menu Second2-1 </li> <li> القائمة الثانية 2-2 </li> <li> القائمة الثانية 2-3 </li> </li> </li> <li> القائمة الثانية 2-3 </a> <ul> <li> القائمة الثانية </a> <li> القائمة الثانية 3 </li> </li> <li> القائمة الثانية 3 </a> <ul> <li> قائمة المستوى الثاني 4-1 </li> <li> قائمة المستوى الثاني 4-2 </li> <li> قائمة المستوى الثاني 4-3 </li> </li> </li>
مثال القائمة القابلة للطي:
جزء CSS
<Head> <type type = text/css> li {style-style: none ؛ قم بإزالة الرسومات السابقة للقائمة} li a {color:#123 ؛ قم بتعيين لون النص لقائمة المستوى الأول} #menu ul {display: none ؛ قم بتعيين القائمة الثانوية غير معروضة بشكل افتراضي} #menu> li: hover ul {display: block ؛ عندما ينزلق الماوس عبر القائمة من المستوى الأول ، سيتم عرض القائمة الثانوية} </style> </head>مثال قائمة الأكورديون:
جزء CSS
<Head> <type type = text/css> li {style-style: none ؛ قم بإزالة الشكل السابق للقائمة} li a {color:#123 ؛ قم بتعيين لون النص لقائمة المستوى الأول} #menu> li ،#menu> li> a ،#menu> li> ul {float: left ؛ قائمة المستوى الأول ، القائمة من المستوى الثاني-التحرك الأيسر} #menu> li> a {display: block ؛ لون الخلفية أحمر؛ } #menu> li: hover ul {display: block ؛}#menu> ul {display: none ؛ العرض: 100px ؛ خلفية اللون:#123 ؛ Padding-Top: 20px ؛} </style> </head> لخصما سبق هو رمز المثال لتنفيذ قائمة طي وقائمة الأكورديون التي قدمها لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!
إذا كنت تعتقد أن هذه المقالة مفيدة لك ، فيرجى إعادة طباعتها. يرجى الإشارة إلى المصدر ، شكرا لك!