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

Съдържание:

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

Видео: Как да направите плъзгащо се меню

Видео: Как да направите плъзгащо се меню
Видео: Верстка меню для суши-бара (разворот) 2024, Декември
Anonim

Един от най-важните аспекти на разработването на уебсайтове и софтуер е създаването на меню. Красивото плъзгащо се меню остава еталон за много собственици на уебсайтове и програмисти. Това може да се направи с помощта на CSS и Expression Web инструменти.

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

Инструкции

Етап 1

Отворете Expression Web и отидете на Manage Style, за да започнете да създавате плъзгащо се меню и натиснете клавиша New Style. Назовете новия селектор на стила ul li. Уверете се, че генерираният файл има разширението drop-down.css. За да създадете плъзгащо се меню, посочете подходящата позиция на екрана. Определете ширината на всеки от елементите на менюто и премахнете ненужните точки, които може да са пред тях.

Стъпка 2

Изпълнете опцията Layout и задайте атрибута Display. Дайте му подходяща вградена стойност за подравняване на екрана. Задайте атрибута Float на Left и натиснете клавиша Apply. Задайте всички елементи от списъка на един ред. За да ги поддържате в чист ред и да не се припокриват, задайте атрибута Width на Position под формата на 150 px. Уверете се, че всички елементи в списъка са с еднакъв размер. Премахнете точките пред всеки елемент, като отидете до атрибута Списък и зададете Тип стил на списъка на Няма. Щракнете върху „OK“, за да приемете промените и да влезете в сила.

Стъпка 3

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

Стъпка 4

Запазете файла като menu.html, когато всички коригиращи действия приключат. Тествайте менюто, което току-що създадохте в различни приложения и браузъри, за да видите дали работи. Както можете да видите, не е трудно да създадете такова меню.

Препоръчано: