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

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

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

Інструкція

  1. Перейдіть в Manage Styles і потім потрібно натиснути кнопку New Style. Дайте ім’я Selector ul li, щойно створеному новому стилю. Також не забудьте упевнитися, новий стиль повинен бути визначений у файлі drop-down.css.
  2. Для розтягування горизонтального меню необхідно вказати елементам меню, що воно буде горизонтальним. Далі необхідно визначити ширину кожного пункту меню і прибрати всі зайві точки перед усіма елементами списку.
  3. Для горизонтального вирівнювання перейдіть в Layout і встановіть атрибут display в значення inline. Атрибут float встановіть в значення left. Натисніть кнопку Apply. Всі елементи списку повинні бути встановлені в один рядок. Для того щоб вони не налазять один на одного потрібно виконати наступні дії: встановити значення Position атрибута width в значення 150px. Тепер перевірте. Всі елементи списку повинні стати однакового розміру.
  4. Тепер потрібно постаратися прибрати точки перед елементами списку. Для цього перейдіть в List і для атрибута list-style-type встановіть значення none.
  5. Натисніть ОК щоб прийняти всі зміни.
  6. Щоб налаштувати розмір шрифту для стилю ul li, необхідно виконати наступне. У Manage Styles натисніть правою кнопкою миші на стилі ul li вам потрібно вибрати Modify Style. Відкриється знайоме діалогове вікно для додавання або зміни атрибутів. Перейдіть в категорію Font і для атрибута font-family встановіть значення Arial, Helvetica, sans-serif. Далі переходимо в атрибут font-size і встановлюємо для нього значення 0.9em. Після цього налаштовуємо атрибут text-transform, для нього встановимо значення uppercase.
  7. Висоту пунктів у створеному меню можна налаштувати в категорії Position. Встановити атрибут height в значення 30px.
  8. Далі необхідно зберегти файл menu.html. Для цього Expression Web відкриє необхідне вікно Save Embedded Files, для збереження файлу. Збережіть у файлі drop-down.css. Натисніть ОК для збереження.
  9. Тепер перевірте отриманий результат. Для надійності краще його протестувати в різних браузерах. Щоб перевірити отриманий результат в браузері за замовчуванням, необхідно натиснути клавішу F12 на клавіатурі.