Някои уеб администратори не искат да губят времеразработването от самото начало на прости елементи, които вече съществуват. Те вярват, че няма смисъл да губите време за това, което отдавна съществува. Всъщност, за тези, които просто учат HTML и CSS, е важно да направите много неща сами, за да разберете добре тяхната работа. Това важи за менюто. Създайте вертикално CSS меню. Той ще се основава само на HTML и CSS, без използването на Javascript и JQuery. Всяко меню е списък с връзки, водещи към страниците на сайта.
Основни стъпки
За да създадете проста вертикална CSS меню, се нуждаете от следната последователност от стъпки:
1. Първо, определете списъка с връзки (използвайки HTML кода), от които ще се състои менюто. Дайте им имена, например:
- Начало.
- Нашата история.
- Ръководство.
- Услуги.
- Контакти.
2. След това ние ще стилизираме връзките според желанието на CSS.
Ще напишем HTML кода, ще го запишем в my_Vmenu.html и ще видим как ще изглежда в браузъра:
Это основа (каркас) нашего меню. #1, #2 и т.д.трябва да бъдат заменени от връзки. Погледнете как изглежда нещата в браузъра. Няма да ви хареса картината. Сега трябва да започнем да описваме стиловете на елементите, за да направим пълното вертикално меню на CSS.
Описание на стиловете
Создайте файл my_Vmenu.css, в която питате всичко, което искате, за да подобрите появата на такъв важен елемент от сайта. По-долу е кодът, чието изпълнение ще съживи вертикалното меню на CSS. Напишете го в създадения файл и след това ще разгледаме по-внимателно какво означават основните линии тук.
Подробно описание на използваните стилове
Сега разгледайте подробно нашето вертикално меню на 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.png и menu_2.png са снимки за показване на елемент от менюто в нормално състояние и при преминаване върху курсора на мишката.
По-добре запазете снимките в отделна папка заизображения, назовете го my_images, но след това коригирайте CSS кода. Напишете къде са посочени тези изображения в тази директория: url (my_images / menu_1.png) и url (my_images / menu_2.png).
В останалите свойства, описани в CSS кода,лесно за разбиране. Те определят външния вид на нашето меню. Лесно е да се види, че ширината и височината на точките са зададени еднакви за точките в нормално състояние и когато задържите курсора на мишката върху тях. Размерът на шрифта е 18px, padding задава подплънките от различни страни на заглавията на елемента. Свойството на дисплея ви позволява да настроите дисплея на блокове, за да зададете ширината и подплънките.
Нашето вертикално меню
Както можете да видите, вертикалните CSS менюта се създават лесно.Въз основа на базата от знания можете да го направите красив и привлекателен за посетителите на вашия интернет ресурс! Използвайте въображението си и тогава стилно меню ще украси вашия сайт.
