Как сделать выпадающее горизонтальное меню?

3 ноября 2014 г. Просмотров: 209

Один из наиболее важных аспектов в разработке программ и сайтов – это создание меню. В качестве яркого примера стоит взять компанию 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. Далее протестируйте созданное меню в различных браузерах, чтобы убедиться в корректности его работы. Как видите, конструкция горизонтального меню достаточно проста.
  • Оцените статью!