با کمک کد HTML خوب و قوانین ساده CSS ، می توانید یک منوی بازشوی خوب ایجاد کنید که به راحتی اصلاح و تکمیل شود. با استفاده از زبان علامت گذاری و Cascading Style Sheets می توانید از عملکرد صحیح منوها در همه مرورگرها اطمینان حاصل کنید.
دستورالعمل ها
مرحله 1
ابتدا ساختار اصلی منوی خود را ایجاد کنید. ویرایشگر متن را باز کنید و یک لیست شماره دار با یک زیر منو ایجاد کنید که به عنوان یک مورد از لیست والدین عمل کند. مثلا:
-
عنصر اول
- مورد کشویی
- کرکره 2
گام 2
لیست تولید شده را در یک فایل html جداگانه ذخیره کنید. بعد ، یک پرونده با پسوند.css ایجاد کرده و تمام پارامترهای صفحه سبک را وارد کنید.
مرحله 3
هرگونه پر کردن و گلوله هایی را که در لیست گلوله ها اعمال می شود بردارید و عرض منو را با استفاده از ابزار CSS تنظیم کنید: ul {list-style: none؛
عرض: 200 پیکسل }
مرحله 4
موقعیت نسبی همه موارد موجود در لیست را با استفاده از ویژگی موقعیت تنظیم کنید: ul li {position: relative؛ }
مرحله 5
در مرحله بعد ، شما باید یک زیرمنو طراحی کنید ، هر یک از عناصر آن در لحظه ای که نشانگر ماوس روی مورد است ، در سمت راست منوی اصلی ظاهر می شود:
سمت چپ: 199px؛
بالا: 0؛
نمایش: هیچ؛ } ویژگی سمت چپ یک پیکسل کمتر از عرض خود منو است. این امر باعث می شود تا موارد پاپ آپ بصورت هوشمند و بدون ایجاد حاشیه های دوتایی قرار بگیرند. از ویژگی نمایشگر برای پنهان کردن زیر منو هنگام باز کردن صفحه استفاده می شود.
مرحله 6
با استفاده از گزینه های css مناسب ، پیوندها را به دلخواه سبک کنید پارامتر display: block را بگنجانید تا هر پیوند تمام فضای ذخیره شده را برای خود اشغال کند.
مرحله 7
برای اینکه منو در لحظه نشانگر روی آن نشان داده شود (شناور) ، باید کد را وارد کنید: li: hover ul {display: block؛ }
مرحله 8
گزینه های اضافی را برای نمایش پیوندها و لیست موارد را به دلخواه تنظیم کنید.
مرحله 9
منوی بازشو آماده است. حالا باید ویژگی را در پرونده.html قرار دهید: منوی بازشو
