Как сделать раздвижное меню
- Создание раздвижного меню с помощью CSS и Expression Web
- Шаг 1: Создание стиля
- Шаг 2: Настройка внешнего вида
- 5. Нажмите "Ок", чтобы принять изменения.
- Шаг 3: Настройка стиля и размера шрифта
- 3. Откорректируйте размер шрифта и установите ему значение 0.9.
- 4. Для атрибута "Text-transform" укажите значение "Uppercase".
- Шаг 4: Тестирование и сохранение
Создание раздвижного меню с помощью CSS и Expression Web
Одним из наиболее важных аспектов при разработке сайтов и программ является создание меню. Красивое раздвижное меню остается эталоном для многих владельцев сайтов и программистов. В этой статье мы рассмотрим, как создать такое меню с помощью инструментов CSS и Expression Web.
Шаг 1: Создание стиля
1. Откройте Expression Web и перейдите в "Manage Style", чтобы приступить к созданию раздвижного меню. Нажмите клавишу "New Style".
2. Введите название "Selector ul li" для нового стиля. Убедитесь, что созданный файл имеет расширение "drop-down.css".
3. Определите ширину каждого пункта меню и уберите лишние точки перед ними.
Шаг 2: Настройка внешнего вида
1. Запустите опцию "Layout" и установите атрибут "Display". Выберите значение "Inline" для выравнивания на экране.
2. Установите атрибуту "Float" значение "Left" и нажмите кнопку "Apply".
3. Установите все элементы списка в одну строку, установив в атрибуте "Width" значение "Position" равное 150px.
4. Убедитесь, что все элементы списка одинаковые по размеру. Уберите точки перед каждым элементом, перейдя в атрибут "List" и выбрав параметр "None" в пункте "List Style-type".
5. Нажмите "Ок", чтобы принять изменения.
Шаг 3: Настройка стиля и размера шрифта
1. Зайдите в "Manage Styles" и правой кнопкой кликните на "ul li". Выберите "Modify Style".
2. Перейдите в раздел "Font" и выберите "Font-family". Установите значения "Helvetica, Arial, Sans-serif" для данного атрибута.
3. Откорректируйте размер шрифта и установите ему значение 0.9.
4. Для атрибута "Text-transform" укажите значение "Uppercase".
5. В атрибуте "Height - Position" установите точную высоту пунктов меню, например, 30px.
Шаг 4: Тестирование и сохранение
1. Сохраните файл в формате "menu.html" после завершения всех корректирующих операций.
2. Протестируйте только что созданное меню в различных приложениях и браузерах, чтобы проверить его работоспособность.
Как вы можете убедиться, создание подобного раздвижного меню с помощью CSS и Expression Web не составляет особого труда.
