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

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

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

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

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

  1. Хоме
  2. Наша прича.
  3. Водич.
  4. Услуге.
  5. Контакти

2. Тада ћемо створити линкове по вољи са ЦСС-ом.

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

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

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

Опис стила

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

Детаљан опис употребљених стилова

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

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

ул # ми_Вмену - целокупан стил целокупне листе.

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

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

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

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

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

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

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

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

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

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

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