با کمک کد HTML صالح و قوانین ساده CSS ، می توانید یک منوی بازشو ایجاد کنید ، آن را تکمیل کرده و اصلاح کنید. با استفاده از جداول آبشار و ابزار زبان علامت گذاری ، می توانید از عملکرد صحیح منو در همه مرورگرها اطمینان حاصل کنید.
دستورالعمل ها
مرحله 1
ابتدا نوار منوی اصلی را نگه دارید. با یک زیر منو در یک ویرایشگر متن ، یک لیست شماره دار ویژه ایجاد کنید. معمولاً "Notepad" برای این اهداف استفاده می شود. زیر منو به عنوان عنصری از لیست والدین عمل می کند. به عنوان مثال: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
گام 2
این لیست را در یک فایل html جداگانه ذخیره کنید. سپس یک فایل.css ایجاد کنید. تمام پارامترهای صفحه سبک مورد نیاز را وارد کنید. این کار را خیلی دقیق انجام دهید ، زیرا یک اشتباه باعث می شود منوی پاپ آپ به درستی نمایش داده نشود یا اصلاً کار نکند.
مرحله 3
گلوله ها و بالشتک های اعمال شده در لیست گلوله ها را بردارید. عرض منو را با استفاده از ابزارهای CSS تنظیم کنید: ul -style: none؛ width: 200px؛ }
مرحله 4
موقعیت نسبی همه موارد موجود در لیست را با صفتی به نام موقعیت مشخص کنید: ul li: relative؛ }
مرحله 5
سپس زیر منو را مرتب کنید ، هنگامی که نشانگر ماوس بر روی مورد قرار دارد ، عناصر آن از منوی والد به سمت راست نشان داده می شوند: li ul: absolute؛ left: 199px؛ top: 0؛ display: none؛ }
مرحله 6
ویژگی سمت چپ یک پیکسل کمتر از عرض خود منو است. این اجازه می دهد تا موارد پاپ آپ بدون ایجاد حاشیه های دوتایی به درستی قرار بگیرند. از ویژگی نمایشگر برای پنهان کردن زیر منو هنگام باز کردن صفحه استفاده می شود.
مرحله 7
با استفاده از گزینه های مناسب css پیوندها را در صورت لزوم سبک کنید. شامل پارامتر display: block باشید تا پیوندها تمام فضای اختصاص یافته برای آنها را اشغال کنند. برای نشان دادن منو هنگامی که نشانگر ماوس بر روی آن قرار دارد ، کد زیر را وارد کنید: li: hover ul: block؛ }
مرحله 8
گزینه های اضافی را برای نمایش موارد لیست و پیوندها به صورت دلخواه تنظیم کنید. ویژگی را در پرونده.html قرار دهید. منوی پاپ آپ آماده استفاده است.
