یکی از مهمترین جنبه های توسعه نرم افزار و وب سایت ایجاد منو است. مایکروسافت و معروف ترین ذهنیت آن ، یعنی سیستم عامل ویندوز ، را باید به عنوان یک نمونه برجسته در نظر گرفت. با وجود این واقعیت که این محصول توسط اکثریت قریب به اتفاق کاربران رایانه های شخصی در جهان استفاده می شود ، انتقادات نه تنها کاهش نمی یابد ، بلکه به طور مداوم در حال رشد است. در واقع ، این مربوط به ناراحتی محل آیتم های منو است. در زیر شرح نحوه ایجاد منوها در CSS و Expression Web است.
دستورالعمل ها
مرحله 1
برای شروع ایجاد یک منوی افقی ، به مدیریت سبک بروید ، سپس روی دکمه سبک جدید کلیک کنید. سبک جدید را انتخاب کنید. مهم! مطمئن شوید که فایل تولید شده دارای پسوند drop-down.css باشد. برای ایجاد یک منوی افقی ، به عنصر ایجاد شده نشان دهید که کاملاً افقی خواهد بود. بعد ، عرض هر مورد از فهرست را تعیین کنید و تمام نقاط غیر ضروری را که در مقابل همه موارد موجود در لیست قرار دارد حذف کنید.
گام 2
به گزینه Layout بروید ، ویژگی Display را روی Inline تنظیم کنید تا تراز بندی افقی انجام شود. بعد ، مقدار Left را روی ویژگی Float قرار دهید و روی دکمه Apply کلیک کنید. همه موارد لیست را روی یک خط تنظیم کنید. به طوری که آنها به طور مرتب قرار می گیرند و روی هم نمی خزند ، در ویژگی Width ، مقدار Position را روی 150 px تنظیم کنید. بررسی کنید که همه عناصر لیست یک اندازه هستند. بعد ، نقاط مقابل همه عناصر را بردارید - برای این کار ، به ویژگی List بروید و پارامتر None را در مورد نوع Style List تنظیم کنید. روی OK کلیک کنید تا همه تغییرات پذیرفته و اعمال شوند.
مرحله 3
اندازه و سبک قلم را برای قسمت اول تنظیم کنید. برای انجام این کار ، به Manage Styles رفته و روی ul li کلیک راست کرده و Modify Style را انتخاب کنید. کادر گفتگوی آشنا ظاهر می شود. به Font بروید ، ویژگی Font-family را انتخاب کنید و آن را روی Sans-serif، Arial، Helvetica تنظیم کنید. بعد ، اندازه قلم را با تنظیم 0 ، 9 تنظیم کنید. پس از آن ، ویژگی Text-transform را روی بزرگ قرار دهید. ارتفاع موارد منو را در ویژگی Height - Position تنظیم کنید ، مقدار را روی 30 px تنظیم کنید.
مرحله 4
پس از انجام تمام اقدامات اصلاحی ، پرونده را به عنوان menu.html ذخیره کنید. بعد ، منوی ایجاد شده را در مرورگرهای مختلف آزمایش کنید تا مطمئن شوید به درستی کار می کند. همانطور که مشاهده می کنید ، طراحی منوی افقی کاملاً ساده است.
