Цодепал

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

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

Зато сам покушао једну кодирање у ХТМЛ и након што сам мислио успева да га деле са свима вама.

Степ Уп 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 фида. Можете оставити одговор , или трацкбацк са свог сајта.

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

Остале Поруке вам се можда свидети

• Грунге шаблон
• Шаблон иПхоне апликација
• Лични асистент Рачунар
• Како да направите Цоол Отклизајте табли са ЦСС3 само