Цодепал

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

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

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

Корак 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 само
• "Изабери" проблем након Коришћење јкТрансформ и Решење