Цодепал

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

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

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

Корак 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Десигн.ат
ХидденДептх.ие
ХотЦардс.цом

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

О Аутор

Сумеет је оснивач Кодекса-ПАЛ. Ради као веб девелопер, је хардцоре програмер, радохоличар, забава момак и воли своју породицу. Пратите га на Твиттер и Фацебоок.

Те моћи следити ико одговор за данашји улажење дроз РСС 2.0 феед. Можете оставити одговор , или кугла из сопствене уеб локације.

Поделите знање

Други Поруке можда желите

• УордПресс године у преглед: Најбољи Туторијали 2011
• Брзо Савет: Користећи кратке бројеве у развоју Тема
• Брзо Савет: прављење резервних копија блог са ВаултПресс
• Персонал Цомпутер Помоћник