از این فهرست برای تسهیل پیمایش کاربر از طریق بخشهای موجود در سایت استفاده می شود. برای جلب توجه بازدید کننده ، منو باید کاربردی باشد ، استفاده از آن آسان باشد و در عین حال با طراحی کل منبع ترکیب شود.
دستورالعمل ها
مرحله 1
قبل از ایجاد یک منو ، در مورد نوع آن تصمیم بگیرید. می توانید یک کادر کشویی افقی یا عمودی ایجاد کنید که وقتی کاربر با استفاده از نشانگر ماوس روی آن قرار گرفت ، به کاربر نشان داده می شود. هنگام انتخاب یک منوی خاص ، می توانید نحوه استفاده از آن برای بازدید کنندگان و ترکیب آن با طراحی را راهنمایی کنید.
گام 2
پس از انتخاب نوع منو ، با استفاده از ویرایشگر متنی که برای ویرایش HTML استفاده می کنید ، فایل صفحه خود را باز کنید. به قسمت مورد نظر کد بروید ، جایی که می خواهید عنصر رابط خود را وارد کنید.
مرحله 3
پس از آن ، با ایجاد یک بلاک و ایجاد یک لیست شماره دار با شناسه اختصاص داده شده ، لیستی از گزینه ها ایجاد کنید. مثلا:
- پیوند 1
- پیوند 2
- لینک 3
در این مثال ، من یک لیست گلوله ای از سه عنصر ایجاد کردم و آن را در یک لایه div با شناسه پنل ID قرار دادم.
مرحله 4
به بخش بخش صفحه خود بروید و منوی شیب سبک سبک مناسب را ایجاد کنید. اگر می خواهید یک منوی افقی ایجاد کنید ، می توانید ویژگی inline را برای لیست حاصل وارد کنید:
#panel ul li {display: inline؛ }
مرحله 5
برای ایجاد یک خط افقی در کل طول صفحه ، می توانید از کد زیر استفاده کنید:
#panel ul {margin-left: 0؛ بالشتک: 2px 0؛ }
مرحله 6
سپس می توانید تقسیم بصری را به مستطیل انجام دهید:
#panel ul li a {margin-left: 3px؛ حاشیه: 1 پیکسل بالشتک: 2px 3px؛ زمینه: آبی }
این کد فرورفتگی متن را از عناصر حاشیه از طریق ویژگی های margin-left و padding تنظیم می کند ، و همچنین برای هر یک از موارد لیست رنگ پس زمینه تعیین می کند. در این مثال ، رنگ آبی است ، اما شما می توانید آن را به صلاحدید خود تغییر دهید.
مرحله 7
برای اشاره به مورد موجود در صفحه فعلی که در برگه انتخاب شده است ، پارامترهای مناسب را روی کلاس باز تنظیم کنید:
#menu ul li a # open {background: red؛ مرز پایین: 1 پیکسل }
صفحه فعلی انتخاب شده در پانل اکنون با رنگ قرمز نمایش داده می شود.
مرحله 8
با باز کردن صفحه خود از طریق مرورگر ، تغییرات موجود در فایل را ذخیره کرده و عملکرد کد نوشتاری را بررسی کنید. برای تنظیم گزینه های نمایشگر اضافی ، همیشه می توانید CSS یا HTML را اضافه کنید تا ظاهر شی را بهبود بخشد.
