Постоје разни стилови и технике стварања картица за навигацију и један од њих је картица обложени или преклопљене стил у коме сваку картицу чини се да лежи преко друге и самим тим даје цео мени веома реалан осећај. Док је дизајнирао мој сајт, ја сам прошао кроз пуно инспирације и туториали. Један од њих је овај туториал се зове Пхотосхоп-папир текстура од нуле онда Направите Грунгы Уеб дизајн са њим Написао Цоллис из НетТутс.цом Овај заврсило се главна инспирација за мој сајт и док пролази! Упутство Цоллис Открио сам рекао да:

"Сада ако ја не кажем да сам ове картице изгледа сјајно, а разлог су да је зато што се преклапају. Нажалост, ово се чини да их је теже да раде са ХТМЛ-у. Можете међутим да урадите разне ствари са транспарентним ПНГс, наизменично или само направите промену боје текста у роловере и не брините о промени картицу боја. У сваком случају ово је све мало изван опсега овај туториал. Довољно да кажем мени можда мало лукав за изградњу. "

Па сам покушао једно кодирање у хтмл и након што сам мислио о томе следећи дељење са свима вама.

Корак 1.Геаринг Горе

Дакле, пре него што почињу да код ове врсте картица навигацију у ХТМЛ / ЦСС код, прво морате да научите како да направите у Пхотосхопу прво. Горе упутство је врло детаљно и Цоллис нема велики посао у настави како да направите што мени у Пхотосхоп. Су изградили сам једну једноставну један специјално за овај туториал.

Сада ми навели да постоје три државе таб.Тхе неактивних стање је просед у боји, активно стање је дубоко плаво и летети држава је светло плаве боје челика. Дакле, пре него сечење до три слике за сваку картицу, можемо кришка се дух слика.

Корак 2. Одсецање Картице Из ПСД

Поравнај табулаторе вертикално преко мреже као што је приказано на слици изнад. Такође можете да поравнате хоризонтално картица него вертикално, али тада ЦСС позадинску слику положај ће се приступити на другачији начин. Избор зависи од особе до особе, али оба раде савршено. Док опсецање слика следите упутства правилно и на уму да сам направио позадину транспарентну, јер ћемо бити потребна транспарентна позадина, ако треба да се преклапају картице. Изрезали слику и сачувајте га за уеб у ПНГ24 формату. Још једну тачку на уму, док се сечење слика је да је прво картицу тј картицу "Почетна" не би требало да имате неке сенке на левој ивици у неактивно стање. Отуда, за ту конкретну картицу морамо да креирате још један вилењак без сенке у њој.

3. корак. Код ауаы

Сада да је наш сечење је потпун и имамо све слике ми је потребно да почнете кодирање наше траци за навигацију. Само да добро изгледају на пример, имам конструисан узорак Феатуред Цонтент подручју распоред са преклапали траци за навигацију. Цео распоред изгледа овако:

 <ДОЦТЫПЕ хтмл ПУБЛИЦ "- / / У3Ц / / ДТД КСХТМЛ 1.0 Транситионал / / ЕН" "хттп://ууу.у3.орг/ТР/ксхтмл1/ДТД/ксхтмл1-транситионал.дтд"> <хтмл ксмлнс = "ХТТП! : / / ууу.у3.орг/1999/ксхтмл "> <хеад> <мета хттп-екуив="Цонтент-Тыпе" цонтент="текст/хтмл; цхарсет=утф-8" /> <везу а хреф =" ЦСС / стылес.цсс "рел =" стылесхеет тыпе = "текст / цсс" /> </ шеф <див> <боды> ид="паге-урап"> <ул ид="маин-нав"> <Да ли класа = " тренутно "> <а Хреф="индекс.хтмл"> Почетна страница </> </ п> <ли цласс="портфолио"> <а хреф="портфолио.хтмл"> портфолио </> </ п> < Да ли класа = "услуге"> <а хреф="сервицес.хтмл"> Услуге </> </ п> <ли цласс="абоут"> <а Хреф="абоут.хтмл"> О нас </ а> </ п> <ли цласс="цонтацт"> <а хреф="цонтацт.хтмл"> Контакт </> </ п> </ ул> <див цласс="цлеар"> </ спан> <спан ИД = "Феатуред"> <див ид="феатуред-цонтент"> </ спан> </ спан> </ спан> </ БОДЫ> </ ХТМЛ> 

Омогућава да гледате нашу основну навигацију менија. Су користили и једноставан Неуређен листу као и сваки други траци за навигацију и стилизован га користи позадинску слику на хипервезу ознака листе'с.

 <ул ид="маин-нав">
	 <ли цласс="цуррент"> <а Хреф="индекс.хтмл"> Почетна страница </> </ п>
	 <ли цласс="портфолио"> <а хреф="портфолио.хтмл"> портфолио </> </ п>
	 <ли цласс="сервицес"> <а хреф="сервицес.хтмл"> Услуге </> </ п>
	 <ли цласс="абоут"> <а Хреф="абоут.хтмл"> О нас </ а> </ п>
	 <ли цласс="цонтацт"> <а хреф="цонтацт.хтмл"> Контакт </> </ п>
 </ ул>

 ул # главни (Ли-Нав
	 пловак: лево;
	 поситион: релативе;
	 дисплаы: инлине;
 )

Не заборавите да користите чаробњак за слике картице на којој врху највише картици представља активно стање, средњи представља неактивни државе и представља дно лебдети државе. Дакле, ми ћемо користити "позадине-позицију 'својство да се правилно поставите слике својих држава као што следи:

 ул # главне навигације Ли-(
	 поситион: релативе;
	 УИДТХ: 110пкс;
	 ХЕИГХТ: 29пкс;
	 дисплаы: блоцк;
	 бацкгроунд-имаге: УРЛ ('../ слике / табс.пнг ');
	 бацкгроунд-поситион: Центер Центер;
	 Боја: # 44403б;
	 текст-декорација: ништа;
	 фонт-сизе: 14пкс;
	 паддинг-топ: 12пкс;
	 текст-алигн: лефт;
	 паддинг-лефт: 30пкс;
	 фонт-уеигхт: болд;
 )
 ул # главне навигације ли.хоме-(
	 бацкгроунд-имаге: УРЛ ('../ слике / картицу-хоме.пнг ');
 )
 ул # главне навигације ли.цуррент-(
	 бацкгроунд-поситион: Топ;
	 боја: # ФФФФФФ;
 )
 ул # главне навигације Ли-а: ховер (
	 бацкгроунд-поситион: дну;
	 боја: # ФФФФФФ;
 )
 ул # главне навигације ли.цуррент-а: ховер (
	 бацкгроунд-поситион: Топ; / * за спречавање тренутне картицу са променом боје на лебдети * /
	 боја: # ФФФФФФ;
 )

Приметићете да сам дао одговарајуће класе за сваку од листе елемената и класе под називом 'струје' на картицу која је за тренутну страницу. То се ради тако да могу доделити различите з вредности индекса на свакој картици у растућем редоследу тако да сваку картицу се налази на вишим з-осе у односу на картицу након њега. Картица са разредом 'тренутни' лаже и на највишем налогу з-осе, јер то представља тренутну страницу и увек ће остати на врху, без обзира на то место на листи. Пре наношења з вредности индекса, уверите се да је позиција атрибут за листу елемената на релативно скуп. Без икаквих позиционирања вредности з-индекс имовине неће радити уопште.

 ул # главни (ли.цуррент-Нав
	 з-индекс: 100;
 )
 ул # главни (ли.хоме-Нав
	 з-индекс: 100;
 )
 ул # главни (ли.портфолио-Нав
	 з-индекс: 99;
 )
 ул # главни (ли.сервицес-Нав
	 з-индекс: 98;
 )
 ул # главни (ли.абоут-Нав
	 з-индекс: 97;
 )
 ул # главни (ли.цонтацт-Нав
	 з-индекс: 96;
 )

Иако смо различити додељене з вредности индекса на табулаторе, они и даље не појављују преко лаптали воду и да ће изгледати овако:

Дати завршну дотакне нашој траци за навигацију смо гурнути свакој картици на врху друге. Сте доделили смо з вредности индекса у опадајућем редоследу с лева на десно. Дакле, ми само ће гурнути сваку картицу од око 20пкс право на своје лево додавањем негативних "паддинг-лефт" имовине "# главна ул-Нав Ли" и притисните траку целу навигацију Неуређен листи са леве стране додавањем позитивног 20пкс "паддинг-лефт 'да поништи лево одељења кретање траке.

 ул # главни (-Нав
	 паддинг-лефт: 20пкс;
 )
 ул # главни (Ли-Нав
	 пловак: лево;
	 поситион: релативе;
	 паддинг-лефт:-20пкс;
	 дисплаы: инлине;
 )

Мисија Остварени

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

Тагс: ЦСС, како, мени, навигација, преко лаптали воду

Данашји улажење је оглашен у сриједу, 14. октобар 2009 у 1:09 пм и је Укњижен под блог, Туториали Те моћи следити ико одговор за данашји улажење дроз одређени чланРСС 2.0 храњење.. Можете оставити одговор, или кугла за праћење из твој властити положај .