یک منوی کشویی خوب می تواند نه تنها در JavaScript ، بلکه با استفاده از برچسب های استاندارد HTML نیز ایجاد شود. این روش برای ایجاد یک منوی کشویی برای کسانی که تازه شروع اولین مراحل خود در ایجاد سایت هستند و می خواهند کار ایجاد منوها را در صفحات ساده کنند مفید خواهد بود.
دستورالعمل ها
مرحله 1
در کد HTML ، چنین منویی لیست نامرتبی است که در آن لیست های تو در تو قرار دارد. برای شروع ، یک فایل style.css ایجاد کنید و کد CSS زیر را در آنجا کپی کنید تا منو سبک و قالب بندی شود:
#nav ، #nav ul {
سبک لیست: هیچ؛
حاشیه: 0؛
بالشتک: 0؛
حاشیه: 1px solid # 000؛
پس زمینه: # 515151؛
شناور به سمت چپ؛
عرض: 100٪
}
#nav li {
شناور به سمت چپ؛
موقعیت: نسبی؛
background-color: # 003366؛
پشت / زمین: هیچ؛
}
#nav li ul {
نمایش: هیچ؛
موقعیت: مطلق؛
background-color: # 003366؛
بالشتک: 8px 0؛
عرض: 138 پیکسل؛
}
گام 2
حالا باید مقداری دکوراسیون به موارد منو اضافه کنیم. عرض و ارتفاع را برای آنها مشخص کنید ، خطوط زیر خط را برداشته ، برای هر پیوند عرض واضحی تعیین کنید و رنگهای پس زمینه مورد نظر را مشخص کنید.
مرحله 3
برای همه این تغییرات ، کد زیر را به پرونده اضافه کنید:
#nav a {
رنگ: #fff؛
دکوراسیون متن: هیچ؛
نمایش: بلوک؛
عرض: 120 پیکسل
بالشتک: 4px 10px؛
background-color: # 003366 تکرار y درست ؛
}
#nav a: شناور {
رنگ: # 000؛
background-color: # 0033FF؛
}
#nav li: شناور {
background-color: # 333333؛
}
سپس قطعه کد زیر را برای نهایی کردن منو اضافه کنید:
#nav li: شناور li ul {
نمایش: هیچ؛
عرض: 138 پیکسل؛
بالا: -9px؛
سمت چپ: 133px؛
}
#nav li: شناور li: شناور ul {
نمایش: بلوک؛
}
مرحله 4
در نسخه HTML ، لیست منوی عمومی غیر مرتب به این شکل است - بر اساس آن ، منو ایجاد می شود ، که در مقاله ذکر شد.
- خانه
-
کاتالوگ
-
همه محصولات
- بر اساس تاریخ
- تولید کنندگان
- دیگر
-
