? ЯК зробити випадає горизонтальне меню :: ПЗ

Один з найбільш важливих аспектів у розробці програм і сайтів - це створення меню. В якості яскравого прикладу варто взяти компанію Microsoft і її найвідоміше дітище - операційну систему Windows. Незважаючи на те, що даним продуктом користується переважна більшість користувачів ПК у світі, критика не тільки не зменшується, а й постійно зростає. В основному вона стосується незручності розташування пунктів меню. Далі йде опис створення меню в CSS і Expression Web.

Інструкція

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

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

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

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