Вертикално 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 ги поставува стиловите.

Ul # my_Vmenu - општ стил на целата листа.

Ul # my_Vmenu li a - стилот на врската помеѓу личните тагови.

Ул. # My_Vmenu li a: hover е опис на типот на предметите во менито во време кога еден од мажите покажува кон курсорот.

Ул. # My_Vmenu li 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 се лесно разбирливи. Тие го поставија изгледот на нашето мени. Лесно е да се види дека ширината и висината на поени се поставени на истото за точките во нормална состојба и кога го движите глувчето над нив. Големината на фонтот е 18 пиксели, залихите одредуваат алишта од различни страни на имињата на предметите. Сопственоста на приказот ви овозможува да го поставите екранот со блокови за да ја наведете ширината и влезот.

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

Како што можете да видите, вертикалното CSS мени е лесно да се создаде. Врз основа на знаење, можете да го направите убава и привлечна за посетителите на вашиот он-лајн ресурс! Користете ја вашата фантазија, а потоа стилското мени ќе го красат вашиот сајт.