Вертикална CSS меню: го направите сами

Някои уебмастъри не искат да прекарват времето разработване от нулата прости елементи, които вече съществуват. Те вярват, че няма смисъл да си губите времето с нещо, което отдавна е там. Всъщност, за тези, които са само за овладяване на HTML и CSS, че е важно да се направят много неща, за да имат добро разбиране на тяхната работа. Това се отнася до менюто. Създаване на вертикална CSS менюта. Тя ще се основава само на HTML и CSS, без използването на Javascript и JQuery. Всяко меню е даден списък с връзки, които водят към страниците на сайта.

основни стъпки

За да се създаде проста вертикално меню CSS, ще се нуждаете от следните стъпки:

1. Първо, да определи списък с връзки (с помощта на код HTML), от които в менюто ще бъде. Дайте им име, например, са както следва:

1. Начало.
2. Нашата история.
3. Ръководство.
4. Услуги.
5. Контакти.

2. След това Стайлинг връзки, както желаете, с помощта на CSS.

Пишем на HTML кода, имайте my_Vmenu.html файл и да видите как ще изглежда в браузъра:

Това е основата (скелет) на нашето меню. # 1, # 2 и т.н. трябва да се заменя с препратка. Вижте как изглежда в браузъра. Снимката, която няма да се хареса. Сега ние трябва да започнем да се опишат елементите на стил, за да се направи пълна вертикални CSS менюта.

Описание стилове

Създайте файл my_Vmenu.css, която определя всичко, което искате да се подобри външния вид на такъв важен елемент от сайта. Това е кодът, въвеждането на който ще съживи вертикалните CSS менюта. Тя и пишат новия файл, а след това ние ще погледнем по-отблизо смисъла на основните линии, които са дадени.

ПОДРОБНО ОПИСАНИЕ използва стилове

А сега да разгледаме детайлите на нашия вертикално меню CSS:

списък стил тип ви позволява да премахнете списъка с маркери. Чрез задаване на "0" до границата и подплънката премахнете допълнително подложка в списъка. Както може да се види от HTML кода, нашето меню е списък, както и начините за представяне са с помощта на CSS.

ул # my_Vmenu - цялостния стил на целия списък.

ул # my_Vmenu ли е - връзки между стил Ли маркер.

ул # my_Vmenu ли е: навъртам - описание на вида в процес на разглеждане на елементи от менюто в момент, когато един витае над хора.

ул # my_Vmenu ли една педя - текст описание (меню заглавие).

Не забравяйте, че файловете my_Vmenu.css my_Vmenu.html и трябва да се запази в същата директория. Въпреки това, те могат да се намират в различни папки, но след това е важно да се регистрирате в my_Vmenu.html пътя на файла, за да my_Vmenu.css. Бъдете внимателни, тъй като новодошлите на този проблем често.

Стил трябва да бъде свързан между маркерите глава HTML-файл. menu_1.png и menu_2.png - това е картината за опцията в менюто картина в нормално състояние и изскачащата.

По-добре е да запишете изображенията в отделна папка за изображения, го наречете my_images, но след това регулирайте CSS кода. Напиши където тези образи са показани, те са в тази директория: URL (my_images / menu_1.png) и URL (my_images / menu_2.png).

В останалата част от имотите, описани в кода на CSS, за да се разбере лесно. Те определят облика на нашето меню. Лесно е да се забележи, че ширината и височината на предметите, определени за едни и същи елементи в нормално състояние, а когато движите мишката върху тях. Размер на шрифта 18px, уплътнение уточнява вдлъбнатината от различни страни на имената на място. дисплея ви позволява да настроите устройството на дисплея, за да зададете ширината и подложка.

Нашата вертикално меню

Както можете да видите, вертикалните CSS менюта, за да създадете лесно. Въз основа на данни на знания ще бъде в състояние да го направи красива и привлекателна за посетителите на вашия уеб сайт! Използвайте въображението си, а след това със стилен меню като допълнение към вашия сайт.