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

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

.

Инструкция

Перейдите в Manage Styles и затем нужно нажать кнопку New Style. Присвойте имя Selector ul li, только что созданному новому стилю. Также не забудьте удостовериться, новый стиль должен быть определен в файле drop-down.css.

Для растяжения горизонтального меню необходимо указать элементам меню, что оно будет горизонтальным. Далее необходимо определить ширину каждого пункта меню и убрать все лишние точки перед всеми элементами списка.

Для горизонтального выравнивания перейдите в Layout и установите атрибут display в значение inline. Атрибут float установите в значение left. Нажмите кнопку Apply. Все элементы списка должны быть установлены в одну строчку. Для того чтобы они не налезали друг на друга нужно выполнить следующие действия: установить значение Position атрибута width в значение 150px. Теперь проверьте. Все элементы списка должны стать одинакового размера.

Теперь нужно постараться убрать точки перед элементами списка. Для этого перейдите в List и для атрибута list-style –type установите значение none.

Нажмите ОК чтобы принять все изменения.

Чтобы настроить размер шрифта для стиля ul li, необходимо выполнить следующее. В Manage Styles нажмите правой кнопкой мыши на стиле ul li вам нужно выбрать Modify Style. Откроется знакомое диалоговое окно для добавления или изменения атрибутов. Перейдите в категорию Font и для атрибута font-family установите значение Arial, Helvetica, sans-serif. Далее переходим в атрибут font-size и устанавливаем для него значение 0.9em. После этого настраиваем атрибут text-transform, для него установим значение uppercase.

Высоту пунктов в созданном меню можно настроить в категории Position. Установить атрибут height в значение 30px.

Далее необходимо сохранить файл menu.html. Для этого Expression Web откроет необходимое окно Save Embedded Files, для сохранения файла. Сохраните в файле drop- down.css. Нажмите ОК для сохранения.

Теперь проверьте полученный результат. Для надежности лучше его протестировать в различных браузерах. Чтобы проверить полученный результат в браузере по умолчанию, необходимо нажать клавишу F12 на клавиатуре.

Оцените статью!