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