منوهای کشویی در صفحات سایت برای صرفه جویی در فضا و ارائه منطقی ساختار یک منبع وب استفاده می شوند. روشهای زیادی برای اجرای این عنصر وجود دارد که یکی از ساده ترین آنها در زیر آورده شده است.
لازم است
دانش اولیه زبانهای HTML و CSS
دستورالعمل ها
مرحله 1
کد HTML منو از عناصر لیست تو در تو (UL و LI) استفاده می کند ، که در داخل آنها پیوندها به صفحات قرار می گیرد. این شامل هیچ ساختار پیچیده ای نیست. این پویایی با استفاده از CSS اجرا می شود ، که بخش توضیحات آن مستقیماً در کد منبع صفحه قرار می گیرد. هیچ چیز خاصی در مورد آن وجود ندارد ، علاوه بر این ، متن حاوی برخی توضیحات در مورد هدف از سبک های خاص است.
گام 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
منوی کشویی * {
font-family: Verdana؛
اندازه قلم: 14px؛
} ul ، li ، a {
بالشتک: 0؛
نمایش: بلوک؛
حاشیه: 0؛
حاشیه: 0؛
} ul {
حاشیه: 1px solid #AAA؛
عرض: 150 پیکسل
سبک لیست: هیچ؛
زمینه: #FFF؛
} لی {
background-color: #AAA؛
موقعیت: نسبی؛
z-index: 9؛
بالشتک: 1px؛
}
li.folder {background-color: #AAA؛}
li.folder ul {
موقعیت: مطلق؛
بالا: 5px؛
سمت چپ: 111px؛ / * برای مرورگرهای اینترنت اکسپلورر * /
}
li.folder> ul {سمت چپ: 140px؛} / * برای مرورگرهای دیگر * / a {
بالشتک: 2px؛
حاشیه: 1px جامد #FFF؛
دکوراسیون متن: هیچ؛
عرض: 100٪ / * برای مرورگرهای اینترنت اکسپلورر * /
رنگ: # 000؛
font-weight: پررنگ؛
}
li> a {width: auto؛} / * برای مرورگرهای دیگر * / li a {
عرض: 140 پیکسل؛
نمایش: بلوک؛
} li a.submenu {
background-color: yellow؛
} / * پیوندها * /
a: شناور {
حاشیه رنگ: خاکستری؛
background-color: # FF0000؛
رنگ سیاه؛
}
پوشه a: شناور {
background-color: # FF0000؛
} / * پوشه * /
ul ul، li: hover ul ul {display: none؛}
li.folder: شناور {z-index: 10؛}
li: شناور ul ، li: شناور li: شناور ul {display: block؛}
- 1. صفحه
-
2. پوشه
- صفحه 2.1
-
2.2 پوشه
- 2.2.1 صفحه
- 2.2.2 صفحه
- 2.2.3 صفحه
- صفحه 2.3
-
3. پوشه
- صفحه 3.1
- صفحه 3.2
- صفحه 3.3
- 4. صفحه
مرحله 3
می توانید پشتیبانی از نسخه های قدیمی مرورگرهای Internet Explorer را به این کد اضافه کنید - این برنامه با استفاده از JavaScript (توسط Peter Nederlof) اجرا می شود. شما باید فایل را با کد مورد نیاز بارگیری کنید ، به عنوان مثال ، از این لینک - https://peterned.home.xs4all.nl/htc/csshover3.htc. باید در همان پوشه صفحه اصلی قرار گیرد. و در توصیف سبک های صفحه اصلی ، پیوندی به آن اضافه کنید - می توان آن را مستقیماً بعد از برچسب سبک باز قرار داد: / * برای مرورگرهای قدیمی IE *
body {رفتاری: url ("csshover3.htc")؛}
