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

Съдържание:

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

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

Видео: Как да направите падащо хоризонтално меню
Видео: Падащо легло/диван в тийнейджърската стая от ВИДАР 2024, Може
Anonim

Един от най-важните аспекти при разработването на софтуер и уебсайт е създаването на меню. Microsoft и най-известното му въображение, операционната система Windows, трябва да бъдат взети като отличен пример. Въпреки факта, че този продукт се използва от преобладаващото мнозинство потребители на компютри в света, критиката не само не намалява, но непрекъснато нараства. По принцип това се отнася до неудобството при местоположението на елементите от менюто. По-долу е описано как да създавате менюта в CSS и Expression Web.

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

Инструкции

Етап 1

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

Стъпка 2

Отидете до опцията Layout, задайте атрибута Display на Inline, за да направите хоризонтално подравняване. След това задайте стойността Left на атрибут Float и щракнете върху бутона Apply. Задайте всички елементи от списъка на един ред. За да бъдат поставени спретнато и да не пълзят един върху друг, в атрибута Width задайте стойността Position на 150 px. Проверете дали всички елементи от списъка са с еднакъв размер. След това премахнете точките пред всички елементи - за това отидете на атрибута List и задайте параметъра None в елемента Type-type List. Щракнете върху OK, за да бъдат приети и приложени всички промени.

Стъпка 3

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

Стъпка 4

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

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