Създаването на меню е може би една от основните точки при разработването на сайтове и програми. В допълнение, добрата разработка и логичен дизайн на такова меню е лицето на сайт или друга програма. Да вземем например Microsoft и операционната система Windows 7. След пускането на Windows 7, Microsoft чу много критики, които не бяха ласкателни за себе си. Имаше много критики, но най-често неудобно позиционирани елементи от менюто. Прочетете внимателно този урок за това как да създадете хоризонтално падащо меню с CSS и Expression Web. Стиловете на маркерите ще се променят, за да се създаде менюто
Инструкции
Етап 1
Отидете на Управление на стилове и след това щракнете върху бутона Нов стил. Дайте името Selector ul li на новия стил, който току-що създадохте. Също така не забравяйте да се уверите, че новият стил трябва да бъде дефиниран във файла drop-down.css.
Стъпка 2
За да разтегнете хоризонтално меню, трябва да кажете на елементите от менюто, че то ще бъде хоризонтално. След това трябва да определите ширината на всеки елемент от менюто и да премахнете всички ненужни точки пред всички елементи от списъка.
Стъпка 3
За хоризонтално подравняване отидете на Layout и задайте атрибута display на вграден. Задайте атрибута float наляво. Щракнете върху бутона Приложи. Всички елементи от списъка трябва да бъдат зададени на един ред. За да не се припокриват помежду си, трябва да направите следното: задайте стойността Position на атрибута width на 150px. Сега го проверете. Всички елементи от списъка трябва да станат с еднакъв размер.
Стъпка 4
Сега трябва да се опитаме да премахнем точките пред елементите от списъка. За да направите това, отидете на Списък и задайте атрибута-style-type на none.
Стъпка 5
Щракнете върху OK, за да приемете всички промени.
Стъпка 6
За да настроите размера на шрифта за стила ul li, трябва да направите следното. В Управление на стилове щракнете с десния бутон върху стила ul li, който трябва да изберете Modify Style. Ще се отвори познатият диалогов прозорец за добавяне или промяна на атрибути. Отидете в категорията Шрифт и задайте атрибута семейство шрифтове на Arial, Helvetica, sans-serif. След това отидете на атрибута размер на шрифта и го задайте на 0.9em. След това настройте атрибута text-transform, задайте стойността за него в главни букви.
Стъпка 7
Височината на елементите в създаденото меню може да се регулира в категорията Позиция. Задайте атрибута височина на 30px.
Стъпка 8
След това трябва да запазите файла menu.html. За да направите това, Expression Web ще отвори необходимия прозорец Save Embedded Files, за да запази файла. Запазете във файла drop-down.css. Щракнете върху OK, за да запазите.
Стъпка 9
Сега проверете резултата си. За надеждност е по-добре да го тествате в различни браузъри. За да проверите резултата, получен в браузъра по подразбиране, трябва да натиснете клавиша F12 на клавиатурата.
