Як зробити розсувне меню


 

Одним з найбільш важливих в розробці сайтів та програм аспектів є створення меню. Красиве розсувне меню залишається еталоном для багатьох власників сайтів і програмістів. Зробити це можна за допомогою інструментів CSS і Expression Web.


Інструкція

  1. Відкрийте Expression Web і перейдіть в Manage Style, щоб приступити до створення розсувного меню, та натисніть клавішу New Style. Вкажіть для нового стилю назву Selector ul li. Переконайтеся, що створений файл має розширенням drop-down.css. Для створення розсувного меню вкажіть відповідне положення на екрані. Визначте ширину кожного з пунктів меню і приберіть зайві точки, які можуть стояти перед ними.
  2. Запустіть опцію Layout і встановіть атрибут Display. Надайте йому відповідне значення Inline для вирівнювання на екрані. Надайте атрибуту Float значення Left і натисніть клавішу Apply — «Застосувати». Встановіть в один рядок всі елементи списку. Щоб вони стояли в акуратному порядку і не налазив один на одного, встановіть в атрибуті Width значення Position у вигляді 150 рх. Переконайтеся, що всі елементи списку однакові за розміром. Приберіть точки перед кожним елементом, перейшовши в атрибут List і встановивши параметр None в пункті List Style-type. Натисніть «Ок» для прийняття змін та їх вступу в силу.
  3. Налаштуйте стиль і розмір шрифту для ul li. Зайдіть в Manage Styles і правою кнопкою клацніть на ul li, вибравши Modify Style. Ви побачите вже знайоме діалогове меню. Перейдіть до пункту Font, виберіть Font-family і встановіть для даного атрибута значення Helvetica, Arial, Sans-serif. Відкоригуйте розмір шрифту і встановіть йому значення 0,9. Для атрибута Text-transform вкажіть значення Uppercase. В атрибуті Height — Position вкажіть точну висоту пунктів меню, поставивши значення 30 рх.
  4. Збережіть файл у вигляді menu.html по завершенні всіх коригувальних операцій. Протестуйте щойно створене меню в різних додатках і браузерах, щоб перевірити його працездатність. Як ви можете переконатися, створити подібне меню не становить особливих труднощів.