/ / ЦСС вертикални мени: Уради сам

ЦСС вертикални мени: урадите то сами

Неки вебмастери не желе да троше време на торазвој од нуле једноставних елемената који већ постоје. Они верују да нема смисла губити време на нешто што је одавно тамо. Заправо, за оне који тек савладају ХТМЛ и ЦСС, важно је да много тога ураде сами како би добро разумели свој рад. Ово се односи и на мени. Направимо вертикални ЦСС мени. Засниваће се само на ХТМЛ-у и ЦСС-у, без употребе Јавасцрипта и ЈКуери-а. Сваки мени је листа веза које воде до страница веб локације.

Основни кораци

Да бисте креирали једноставан вертикални ЦСС мени, потребан је следећи редослед корака:

1. Прво дефинишите листу веза (помоћу ХТМЛ кода) које ће чинити мени. Дајте им оваква имена:

  1. Главни.
  2. Наша историја.
  3. Вођство.
  4. Услуге.
  5. Контакти.

2. Затим, стилизујте везе како желите помоћу ЦСС-а.

Напишимо ХТМЛ код, сачувамо га у датотеци ми_Вмену.хтмл и видимо како изгледа у прегледачу:

Вертикални ЦСС мени

Ово је основа (костур) нашег јеловника. # 1, # 2 итд.мора бити замењен везама. Погледајте како све изгледа у прегледачу. Неће вам се свидети слика. Сада морамо започети описивање стилова елемената да бисмо направили пуноправни вертикални ЦСС мени.

Опис стила

Направите датотеку ми_Вмену.цсс, у којем можете да подесите шта год желите да побољшате изглед тако важног елемента веб локације. Испод је код, уграђивање које ће анимирати вертикални ЦСС мени. Запишите га у креирану датотеку, а затим ћемо детаљније погледати шта значе главне линије које су овде дате.

Детаљан опис коришћених стилова

Сада ћемо детаљније погледати наш вертикални ЦСС мени:

ЦСС вертикални мени
лист-стиле-типе вам омогућава уклањање маркера листе.Постављањем маргине и додавања на „0“, уклоните додатна попуњавања са листе. Као што видите из ХТМЛ кода, наш мени је листа, а ЦСС се користи за обликовање.

ул # ми_Вмену је општи стил целе листе.

ул # ми_Вмену ли а - стил везе између ли тагова.

ул # ми_Вмену ли а: ховер је опис врсте ставки датог менија у тренутку када особа пређе курсором преко једне од њих.

ул # ми_Вмену ли распон - опис текста (имена менија).

Запамтите да су датотеке ми_Вмену.цсс и ми_Вмену.хтмл мора бити сачуван у једном директоријуму. Међутим, могу се налазити у различитим директоријумима, али тада је важно да региструјете путању до ми_Вмену.цсс у датотеци ми_Вмену.хтмл. Будите опрезни, јер почетници често имају проблема с тим.

Стил мора бити укључен између ознака главе у хтмл датотеци. мену_1.пнг и мену_2.пнг су слике за приказ ставке у менију у нормалном стању и при преласку мишем.

Вертикални ЦСС мени

Боље сачувајте слике у посебној фасцикли заслике, назовите ме ми_имагес, али онда исправите ЦСС код. Напишите где су означене ове слике у овом директоријуму: урл (ми_имагес / мену_1.пнг) и урл (ми_имагес / мену_2.пнг).

У остатку својстава описаних у ЦСС коду,лако разумети. Они дефинишу изглед и осећај нашег менија. Лако је видети да су ширина и висина тачака постављене на исти начин за тачке у нормалном стању и када задржите миш изнад њих. Величина фонта је 18 пиксела, додавање поставља облоге на различите стране наслова предмета. Својство приказа вам омогућава да поставите приказ у блоковима да бисте поставили ширину и облоге.

вертикални мени

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

Као што видите, лако је створити вертикални ЦСС мени.На основу базе знања можете га учинити лепим и привлачнијим за посетиоце вашег Интернет ресурса! Искористите машту, а затим ће стилски мени украсити вашу веб локацију.