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

Одним из наиболее важных в разработке сайтов и программ аспектов является создание меню. Красивое раздвижное меню остается эталоном для многих владельцев сайтов и программистов. Сделать это можно с помощью инструментов CSS и Expression Web.
Создать сайт самостоятельно с Wix.com

Инструкция

Откройте Expression Web и перейдите в Manage Style, чтобы приступить к созданию раздвижного меню, и нажмите клавишу New Style. Укажите для нового стиля название Selector ul li. Убедитесь, что созданный файл обладает расширением drop-down.css. Для создания раздвижного меню укажите соответствующее положение на экране. Определите ширину каждого из пунктов меню и уберите лишние точки, которые могут стоять перед ними.

Запустите опцию Layout и установите атрибут Display. Придайте ему соответствующее значение Inline для выравнивания на экране. Придайте атрибуту Float значение Left и нажмите клавишу Apply - «Применить». Установите в одну строку все элементы списка. Чтобы они стояли в аккуратном порядке и не налезали друг на друга, установите в атрибуте Width значение Position в виде 150 рх. Убедитесь, что все элементы списка одинаковые по размеру. Уберите точки перед каждым элементом, перейдя в атрибут List и установив параметр None в пункте List Style-type. Нажмите «Ок» для принятия изменений и их вступления в силу.

Настройте стиль и размер шрифта для ul li. Зайдите в Manage Styles и правой кнопкой кликните на ul li, выбрав Modify Style. Вы увидите уже знакомое диалоговое меню. Перейдите к пункту Font, выберите Font-family и установите для данного атрибута значения Helvetica, Arial, Sans-serif. Откорректируйте размер шрифта и установите ему значение 0,9. Для атрибута Text-transform укажите значение Uppercase. В атрибуте Height - Position укажите точную высоту пунктов меню, поставив значение 30 рх.

Сохраните файл в виде menu.html по завершении всех корректирующих операций. Протестируйте только что созданное меню в различных приложениях и браузерах, чтобы проверить его работоспособность. Как вы можете убедиться, создать подобное меню не составляет особого труда.

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