CSS અને ના છબીઓ સાથે ટૅબ્ડ નેવિગેશન કેવી રીતે બનાવવું

06 ના 01

CSS અને ના છબીઓ સાથે ટૅબ્ડ નેવિગેશન કેવી રીતે બનાવવું

વેબ પાનાંઓ પર નેવિગેશન એ સૂચિનું એક સ્વરૂપ છે, અને ટેબ્ડ નેવિગેશન એક આડી યાદી જેવું છે. સીએસએસ સાથે આડી ટેબ થયેલ નેવિગેશન બનાવવાનું એકદમ સરળ છે, પરંતુ CSS 3 એ અમને વધુ સારી સાધનો બનાવવા માટે વધુ સારા સાધનો આપે છે.

આ ટ્યુટોરીયલ તમને CSS ટેબ થયેલ મેનૂ બનાવવા માટે જરૂરી HTML અને CSS દ્વારા લઈ જશે. તે કેવી રીતે દેખાશે તે જોવા માટે તે લિંક પર ક્લિક કરો.

આ ટેબ થયેલ મેનૂ કોઈ છબીઓ , ફક્ત HTML અને CSS 2 અને CSS 3 નો ઉપયોગ કરે છે. તે વધુ ટેબ્સ ઉમેરવા અથવા તેમાંના ટેક્સ્ટને બદલવા માટે સરળતાથી સંપાદિત કરી શકાય છે.

બ્રાઉઝર આધાર

આ ટેબ મેનૂ તમામ મુખ્ય બ્રાઉઝર્સમાં કાર્ય કરશે. ઈન્ટરનેટ એક્સપ્લોરર ગોળાકાર ખૂણાઓ બતાવશે નહીં, પરંતુ અન્યથા, તે માત્ર ફાયરફોક્સ, સફારી, ઓપેરા અને ક્રોમ જેવા ટેબ્સ બતાવશે.

06 થી 02

તમારી મેનુ સૂચિ લખો

બધા નેવિગેશન મેનુઓ અને ટૅબ્સ એ ખરેખર એક અનિર્ધારિત સૂચિ છે તેથી પ્રથમ વસ્તુ જે તમે કરવા માંગો છો તે લિંક્સની એકનિર્દેશિત સૂચિ લખો જ્યાં તમે તમારી ટેબ્ડ નેવિગેશન ઇચ્છો છો.

આ ટ્યુટોરીયલ એમ ધારી રહ્યા છે કે તમે તમારા HTML ને ટેક્સ્ટ એડિટરમાં લખી રહ્યાં છો અને તમને ખબર છે કે તમારા વેબ પૃષ્ઠ પર તમારા મેનૂ માટે એચટીએમએલ ક્યાં મૂકવું તે.

આના જેવી તમારી બિનવર્ગીકૃત સૂચિ લખો:

• વર્ગ = "ટૅબ્લીસ્ટ">
  • CSS 3
  • id = "current"> ટૅબ્સ
  • માટે
  • મેનૂઝ

  તમે નોંધ લો કે કોડ બે વસ્તુઓને બોલાવે છે: class = "tablist" અને id = "current". પ્રથમ જરૂરી છે જો તમે તમારી અનિર્દેશિત સૂચિ પર ટેબ્લિસ્ટ વર્ગને મૂકી નથી, તો ટેબ્સ કાર્ય કરશે નહીં. બીજો વૈકલ્પિક છે. જે પૃષ્ઠ પર તમે જે પૃષ્ઠ પર હાઇલાઇટ કરવા માંગતા હોવ તે id = "current" ને મૂકો. હું સામાન્ય રીતે તેનો ઉપયોગ આ પૃષ્ઠને પ્રકાશિત કરવા માટે કરું છું, પરંતુ તમે તેનો ઉપયોગ સૌથી મહત્વપૂર્ણ ટૅબ પ્રકાશિત કરવા માટે કરી શકો છો. અથવા તમે તેને સંપૂર્ણપણે દૂર કરી શકો છો.

06 ના 03

તમારી સ્ટાઇલ શીટ એડિટીંગ કરવાનું પ્રારંભ કરો

તમે બાહ્ય સ્ટાઇલ શીટ અથવા આંતરિક શૈલી પત્રકનો ઉપયોગ કરી શકો છો. નમૂના મેનૂ પૃષ્ઠ દસ્તાવેજનાં માં આંતરિક શૈલી શીટનો ઉપયોગ કરે છે

પ્રથમ અમે યુએલ પોતે પ્રકાર પડશે

આ તે છે જ્યાં આપણે ક્લાસ ટેબ્લિસ્ટનો ઉપયોગ કરીએ છીએ. HTML માં. યુ.એલ. ટૅગને સ્ટાઇલ કરવાને બદલે, તમારા પૃષ્ઠ પરની તમામ અવયવિત સૂચિ શૈલીમાં રાખશે, તો તમારે ફક્ત UL ક્લાસની શૈલી જ રાખવી જોઈએ. tablist તેથી તમારા સીએસએસ પ્રથમ પ્રવેશ પ્રયત્ન કરીશું:

.tablist {}

મને સમય પહેલાં અંતમાં વાંકડીયા તાણવું (}) મૂકવા ગમે છે, તેથી હું તેને પાછળથી ભૂલી જતો નથી.

જ્યારે અમે ટેબ મેનૂ સૂચિ માટે એક અનક્રડાડિત સૂચિ ટેગનો ઉપયોગ કરી રહ્યાં છીએ, પરંતુ અમે કોઈ બુલેટ્સ અથવા નંબરોને સળવળવા નથી માંગતા. તેથી તમારે જે પહેલો શૈલી ઍડ કરવો જોઈએ તે છે સૂચિ-શૈલી: કોઈ નહીં; આ બ્રાઉઝરને કહે છે કે જ્યારે તે સૂચિ છે, ત્યારે તે કોઈ પૂર્વ નિર્ધારિત શૈલીઓ (જેમ કે બુલેટ્સ અથવા સંખ્યાઓ) સાથે સૂચિ છે.

પછી, તમે તમારી સૂચિની ઊંચાઈને તે સ્થાનને મેચ કરવા માટે સેટ કરી શકો છો કે જે તમે તેને ભરવા માંગો છો. મેં મારી ઊંચાઇ માટે 2 ઇમ પસંદ કર્યું છે, કારણ કે તે પ્રમાણભૂત ફૉન્ટનું કદ બમણું છે, અને ટેબનાં ટેક્સ્ટની ઉપર અને નીચે આશરે અડધા એમ આપે છે. ઊંચાઈ: 2 ઇમ; પરંતુ તમે તમારી પહોળાઈને ગમે તેટલી કદમાં સેટ કરી શકો છો. યુ.એલ. ટૅગ્સ આપમેળે 100% પહોળાઈ લેશે, જેથી કરીને તમે તેને વર્તમાન કન્ટેનર કરતા નાનું નાંખવા માંગો, તો તમે પહોળાઈ બહાર છોડી શકો છો.

છેલ્લે, જો તમારી માસ્ટર સ્ટાઇલ શીટમાં યુ.એલ. અને ઓલ ટેગ્સ માટે પ્રીસેટ્સ નથી, તો તમે તેને મુકવા માંગો છો. આનો અર્થ એ કે તમારે તમારા ઉલ પર બોર્ડર્સ, માર્જિન અને પેડિંગ બંધ કરવું જોઈએ. પેડિંગ: 0; હાંસિયો: 0; સરહદ: કોઈ નહીં; જો તમે પહેલેથી યુ.એલ. ટૅગ રીસેટ કર્યો છે, તો તમે માર્જિન, પેડિંગ અથવા સરહદને બદલી શકો છો જે તમારી ડિઝાઇન સાથે બંધબેસે છે.

તમારું અંતિમ. ટેબ્લિસ્ટ વર્ગ આના જેવો હોવો જોઈએ:

. ટેબ્લીસ્ટ {list-style: none; ઊંચાઈ: 2 ઇમ; પેડિંગ: 0; હાંસિયો: 0; સરહદ: કોઈ નહીં; }

06 થી 04

LI યાદી વસ્તુઓ ફેરફાર

એકવાર તમે તમારી યાદ વિનાની સૂચિ રીતની કરી લીધી છે, તમારે તેને અંદર LI ટેબ શૈલીની જરૂર છે. અન્યથા, તેઓ તમારી ટેબ્સ યોગ્ય રીતે ન મૂકીને આગળની લાઇનમાં એક માનક સૂચિ અને દરેક ચાલ જેવા કાર્ય કરશે.

પ્રથમ, તમારી શૈલીની મિલકતને સેટ કરો:

. ટેબ્લિસ્ટ લી {}

પછી તમે તમારા ટૅબ્સને ફ્લોટ કરવા માંગો છો જેથી તેઓ આડી પ્લેન ઉપર રહે. ફ્લોટ: ડાબે;

અને ટૅબ્સ વચ્ચે કોઈ માર્જિન ઉમેરવાનું ભૂલશો નહીં, જેથી તેઓ એકસાથે મર્જ કરી શકતા નથી. માર્જીન-જમણા: 0.13મ;

તમારી લી શૈલીઓ આના જેવી દેખાવી જોઈએ:

. ટેબ્લિસ્ટ લી {ફ્લોટ: ડાબે; માર્જીન-જમણા: 0.13મ; }

05 ના 06

ટૅબ્સને CSS 3 સાથે ટેબ્સ જેમ જુઓ

આ સ્ટાઈલશીટમાં મોટાભાગના ભારે પ્રશિક્ષણ કરવા માટે, હું લિંક્સને બિનક્રમાંકિત સૂચિમાં નિશાન બનાવી રહ્યો છું. બ્રાઉઝર્સ ઓળખે છે કે લિંક્સ અન્ય ટેગ્સ કરતા વેબ પેજ પર વધારે કરે છે, તેથી જૂના બ્રાઉઝર્સને હોવર સ્ટેટ્સ જેવી વસ્તુઓનું પાલન કરવું વધુ સરળ છે જો તમે તેમને એન્કર ટૅગ (લિંક્સ) સાથે જોડી દો છો. તેથી પ્રથમ તમારી શૈલી ગુણધર્મો લખો:

. ટેબ્લિસ્ટ લી એક {}. ટેબ્લિસ્ટ લી એ: હોવર {}

કારણ કે આ ટૅબ્સને એપ્લિકેશનમાં ટૅબ્સની જેમ કાર્ય કરવું જોઈએ, તમે ઇચ્છો છો કે ટૅબના સમગ્ર વિસ્તારને ફક્ત ક્લિક કરેલી ટેક્સ્ટ પર ક્લિક કરી શકાય નહીં. આ કરવા માટે, તમારે એ ટેગને સામાન્ય " ઇનલાઇન " સ્થિતિમાં બ્લોક એલિમેન્ટમાં રૂપાંતરિત કરવું પડશે. પ્રદર્શન: બ્લોક; (જો તમને તફાવત વિશે વધુ જાણવામાં રસ હોય તો બ્લોક-લેવલ વિ. ઇનલાઇન તત્વો વાંચો.)

પછી, તમારા ટૅબ્સને એકબીજા સાથે સમાંતર કરવાની સશક્ત રીત છે, પરંતુ ટેક્સ્ટની પહોળાઈને ફિટ કરવા માટે હજુ પણ ફ્લેક્સ એ જમણી અને ડાબી પેડિંગ બનાવવા માટે છે. મેં ટોચ અને નીચેથી 0 અને જમણી બાજુ અને ડાબી 1em પર ડાબું કરવા માટે પેડિંગ લાકડાના ગુણધર્મનો ઉપયોગ કર્યો છે. ગાદી: 0 1em;

મેં લીંક નીચે લીટીઓ દૂર કરવાનું પણ પસંદ કર્યું છે, જેથી ટેબ્સ લિંક્સ જેવી ઓછી દેખાય. પરંતુ જો તમારા દર્શકોને તે દ્વારા મૂંઝવણ થઈ શકે છે, તો આ રેખા છોડી દો. લિંક-શણગાર: કોઈ નહીં;

ટેબ્સની આસપાસની પાતળા સીમાને મુકીને, તે ટેબોની જેમ દેખાય છે. મેં સરહદની લઘુલિપિની સંપત્તિનો ઉપયોગ કર્યો છે, જે સરહદની ચાર બાજુની બાજુએ સરહદ મૂકવા માટે: 0.06 મી ઘન # 000; અને પછી સરહદ-તળિયાની મિલકતનો ઉપયોગ તેને તળિયેથી દૂર કરવા માટે કર્યો. સીમા-નીચે: 0;

પછી મેં ટેબ્સનાં ફોન્ટ, રંગ અને બેકગ્રાઉન્ડ રંગમાં કેટલાક ગોઠવણો કર્યા. તમારી સાઇટથી મેળ ખાતી શૈલીઓ પર આ સેટ કરો. ફોન્ટ: બોલ્ડ 0.88ેમ / 2em એરિયલ, જીનેવા, હેલ્વેટિકા, સાન્સ-સેરીફ; રંગ: # 000; બેકગ્રાઉન્ડ રંગ: # સીસીસી;

ઉપરોક્ત બધી શૈલીઓ પસંદગીકારમાં જાય છે. ટેબ્લિસ્ટ લી એ, નિયમ કે જેથી તેઓ સામાન્ય રીતે એન્કર ટેગને અસર કરે. પછી ટેબ્સ વધુ ક્લિક કરી શકાય તેવું બનાવવા માટે, તમારે કેટલાક રાજ્ય નિયમ ઉમેરવો જોઈએ. ટેબ્લીસ્ટ લિ: હોવર

હું જ્યારે ટેક્સ્ટ અને બેકગ્રાઉન્ડનો રંગ બદલીશ ત્યારે ટેબ પૉપને બનાવવા માટે તેને માઉસ પર ક્લિક કરું છું. પૃષ્ઠભૂમિ: # 3cf; રંગ: #fff;

અને મેં બ્રાઉઝર્સને એક બીજું સ્મૃતિપત્ર શામેલ કર્યું છે જે હું ઇચ્છું છું કે લિંકને અધોરેખિત ન થવું. ટેક્સ્ટ-શણગાર: કોઈ નહીં; બીજી સામાન્ય પદ્ધતિ એ છે કે જ્યારે તમે ટેબ પર માઉસને નીચે લીટીને ચાલુ કરો. જો તમે તે કરવા માગો છો, તો તેને ટેક્સ્ટ-શણગારમાં બદલો: નીચે લીટી કરો;

પરંતુ CSS 3 ક્યાં છે?

જો તમે ધ્યાન આપી રહ્યા છો, તો તમે કદાચ નોંધ્યું છે કે શૈલી શીટમાં ઉપયોગમાં લેવાતી કોઈપણ CSS 3 શૈલીઓ નથી. આને ઇન્ટરનેટ એક્સપ્લોરર સહિતના કોઈપણ આધુનિક બ્રાઉઝરમાં કામ કરવાનો ફાયદો છે. પરંતુ તે ટેબોને ચોરસ બોક્સ કરતાં વધુ કંઇ દેખાતું નથી. CSS 3 શૈલી કૉલ સરહદ ત્રિજ્યા (અને તે બ્રાઉઝર આધારિત કૉલ્સ સંકળાયેલ છે) ઉમેરીને તમે ધાર ગોળાકાર કરી શકો છો, એક મનિલા ફોલ્ડર પર ટેબ્સ જેવા વધુ જોવા માટે.

શૈલીઓ કે જે તમે. ટેબ્લિસ્ટ લિમાં ઉમેરશો તે નિયમ છે: વેબકિટ-સરહદ-ટોચના-જમણા-ત્રિજ્યા: 0.50 નામો; -વેબકીટ-સરહદ-ટોચના-ડાબા-ત્રિજ્યા: 0.50મ; -મોઝ-સીમા-ત્રિજ્યા-ટોચ: 0.50 નામો; -મોઝ-સીમા-ત્રિજ્યા-ટૂોલફટ: 0.50મ; સરહદ-ઉપર-જમણા- ત્રિજ્યા: 0.50મ; સરહદ-ટોચના ડાબા-ત્રિજ્યા: 0.50 નામો;

આ મેં લખેલા અંતિમ શૈલી નિયમો છે:

. ટેબ્લિસ્ટ લી એક {પ્રદર્શન: બ્લોક; ગાદી: 0 1em; ટેક્સ્ટ-શણગાર: કોઈ નહીં; સરહદ: 0.06 ઘન # 000; સીમા-નીચે: 0; ફોન્ટ: બોલ્ડ 0.88ેમ / 2em એરિયલ, જીનેવા, હેલ્વેટિકા, સાન્સ-સેરીફ; રંગ: # 000; બેકગ્રાઉન્ડ રંગ: # સીસીસી; / * CSS 3 ઘટકો * / વેબકિટ-સરહદ-ટોચના-જમણા- ત્રિજ્યા: 0.50 નામો; -વેબકીટ-સરહદ-ટોચના-ડાબા-ત્રિજ્યા: 0.50મ; -મોઝ-સીમા-ત્રિજ્યા-ટોચ: 0.50 નામો; -મોઝ-સીમા-ત્રિજ્યા-ટૂોલફટ: 0.50મ; સરહદ-ઉપર-જમણા- ત્રિજ્યા: 0.50મ; સરહદ-ટોચના ડાબા-ત્રિજ્યા: 0.50 નામો; }. ટેબ્લિસ્ટ લી એ: હોવર {background: # 3cf; રંગ: #fff; ટેક્સ્ટ-શણગાર: કોઈ નહીં; }

આ શૈલીઓ સાથે, તમારી પાસે ટેબ થયેલ મેનૂ છે જે તમામ મુખ્ય બ્રાઉઝર્સમાં કાર્ય કરે છે અને CSS 3 સુસંગત બ્રાઉઝર્સમાં સરસ પ્રિન્ટેડ ટૅબ્સ જેવા દેખાય છે. આગળનું પૃષ્ઠ તમને એક વધુ વિકલ્પ આપે છે જેનો ઉપયોગ તમે તેને વધુ સુંદર બનાવવા માટે કરી શકો છો.

06 થી 06

વર્તમાન ટૅબ હાઇલાઇટ કરો

મેં બનાવેલી એચટીએમએલમાં, યુ.એલ.માં ID સાથે એક સૂચિ ઘટક હતો. આ તમને એક LI ની બાકીની શૈલીની અલગ શૈલી આપવા દે છે. સૌથી સામાન્ય પરિસ્થિતિ એ છે કે વર્તમાન ટેબ અમુક રીતે બહાર ઊભા કરે છે. આ વિચારવાનો બીજો રસ્તો એ છે કે તમે ટેબ્સને ભૂખરા કરવા માંગતા હો જે જીવંત નથી. તમે પછી અલગ પૃષ્ઠો પર જ્યાં id ને છે ત્યાં બદલો.

હું બંને # વર્તમાન A ટેગ અને # પ્રવાસ A: હોવર સ્ટે, બંને શૈલીને અલગ કરું છું જેથી બંને સહેજ અલગ હોય. તમે રંગ, બેકગ્રાઉન્ડ રંગ, તે તત્વની ઊંચાઈ, પહોળાઈ અને પેડિંગ બદલ પણ બદલી શકો છો. ગમે તે ફેરફારો તમારી ડિઝાઇનમાં અર્થમાં બનાવો.

. ટેબ્લિસ્ટ લી # વર્તમાન {background-color: # 777; રંગ: #fff; }. ટેબ્લિસ્ટ લી # વર્તમાન: હોવર {background: # 39C; }

અને તમે પૂર્ણ કરી લો! તમે હમણાં જ તમારી વેબસાઇટ માટે ટેબ થયેલ મેનૂ બનાવી છે.