Як зробити розсувне меню - веб-програмування

Відкрийте Expression Web і перейдіть в Manage Style, щоб приступити до створення розсувного меню. і натисніть клавішу New Style. Вкажіть для нового стилю назву Selector ul li. Переконайтеся, що створений файл має розширенням drop-down.css. Для створення розсувного меню вкажіть відповідне положення на екрані. Визначте ширину кожного з пунктів меню і приберіть зайві точки, які можуть стояти перед ними.

Запустіть опцію Layout і встановіть атрибут Display. Надайте йому відповідне значення Inline для вирівнювання на екрані. Надайте атрибуту Float значення Left і натисніть клавішу Apply - «Застосувати». Встановіть в один рядок всі елементи списку. Щоб вони стояли в акуратному порядку і не налазили один на одного, встановіть в атрибуті Width значення Position у вигляді 150 рх. Переконайтеся, що всі елементи списку однакові за розміром. Приберіть точки перед кожним елементом, перейшовши в атрибут List і встановивши параметр None в пункті List Style-type. Натисніть «Ок» для прийняття змін та їх вступу в силу.

Налаштуйте стиль і розмір шрифту для ul li. Зайдіть в Manage Styles і правою кнопкою клацніть на ul li, вибравши Modify Style. Ви побачите вже знайоме діалогове меню. Перейдіть до пункту Font, виберіть Font-family і встановіть для даного атрибута значення Helvetica, Arial, Sans-serif. Відкоректуйте розмір шрифту і встановіть йому значення 0,9. Для атрибута Text-transform вкажіть значення Uppercase. В атрибуті Height - Position вкажіть точну висоту пунктів меню. поставивши значення 30 рх.

Збережіть файл у вигляді menu.html по завершенні всіх коригувальних операцій. Протестуйте тільки що створене меню в різних додатках і браузерах, щоб перевірити його працездатність. Як ви можете переконатися, створити подібне меню не складає особливих труднощів.

Схожі статті