Як зробити розсувне меню
Одним з найбільш важливих в розробці сайтів і програм аспектів є створення меню. красиве розсувне меню залишається еталоном для багатьох власників сайтів і програмістів. Зробити це можна за допомогою інструментів 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 по завершенні всіх коригувальних операцій. Протестуйте тільки що створене меню в різних додатках і браузерах, щоб перевірити його працездатність. Як ви можете переконатися, створити подібне меню не складає особливих труднощів.
Статті за темою "Як зробити розсувне меню"
Оцініть, будь ласка статтю