Як зробити випадає горизонтальне меню

Як зробити випадає горизонтальне меню

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