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

Някои уеб администратори не искат да губят време, като развиват от самото начало елементарни елементи, които вече съществуват. Те вярват, че няма смисъл да губите време за това, което отдавна съществува. Всъщност, за тези, които просто учат HTML и CSS, е важно да направите много неща сами, за да разберете добре тяхната работа. Това важи за менюто. Създайте вертикално CSS меню. Той ще се основава само на HTML и CSS, без използването на jаvascript и 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 определя стиловете.

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

ul # my_Vmenu li a - стила на връзката между етикетите li.

ul # my_Vmenu li a: Hover е описание на вида на елементите в менюто по време, когато един от мъжете е насочен към курсора.

ul # my_Vmenu li a span - описание на текста (имена на менютата).

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

Стилът трябва да бъде свързан между главните маркери в html файла. menu_1.jpg и menu_2.jpg са изображения за показване на елемента от менюто в нормално състояние и при задържане на курсора над курсора.

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

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

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

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