વર્ટિકલ સીએસએસ મેનુ: તે જાતે કરી

કેટલાક વેબમાસ્ટર સમય પસાર કરવા માટે શરૂઆતથી જ સરળ તત્વો કે પહેલેથી જ અસ્તિત્વમાં થી વિકાસશીલ નથી માંગતા. તેઓ માને છે કે કંઈક ત્યાં સુધી કરવામાં આવ્યું છે પર તમારા સમય બરબાદ કોઈ બિંદુ છે કે ત્યાં. હકીકતમાં, જેઓ માત્ર HTML અને CSS નિપુણતા આવે છે, તે મહત્વનું જાતે તેમના કામ એક સારી સમજ હોય વસ્તુઓ ઘણો બનાવવાનો છે. આ મેનુ લાગુ પડે છે. એક ઊભી સીએસએસ મેનુ બનાવો. તે માત્ર HTML અને CSS પર આધારિત હશે, જાવાસ્ક્રિપ્ટ અને jQuery ઉપયોગ વિના. દરેક મેનુ કડીઓ તે સાઇટ પૃષ્ઠો તરફ દોરી એક યાદી છે.

મૂળભૂત પગલાંઓ

એક સરળ બનાવવા માટે ઊભી મેનુ સીએસએસ તમે નીચેના પગલાંઓ જરૂર છે:

1. પ્રથમ, લિંક્સ (કોડ HTML ની મદદથી), જે મેનુ હશે યાદી નક્કી કરે છે. તેમને એક નામ આપો, ઉદાહરણ માટે, નીચે પ્રમાણે છે:

1. હોમ.
2. અમારા ઇતિહાસ.
3. માર્ગદર્શન આપે છે.
4. સેવાઓ.
5. સંપર્કો.

2. પછી કડીઓ સ્ટાઇલ તરીકે તમે CSS ની મદદ સાથે માંગો છો.

અમે લખી HTML કોડ, my_Vmenu.html ફાઈલ રાખો અને તે બ્રાઉઝરમાં દેખાશે કેવી રીતે જુઓ:

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

વર્ણન શૈલીઓ

ફાઇલ my_Vmenu.css, જે બધું તમે સાઇટ આવા એક મહત્વપૂર્ણ તત્વ દેખાવ સુધારવા માંગો છો સુયોજિત બનાવો. અહીં કોડ છે, કે જે રજૂઆત ઊભી સીએસએસ મેનુઓ પુનરોદ્ધાર થશે. તે અને નવી ફાઈલ લખી શકો છો અને પછી અમે નજીકથી મુખ્ય લાઇનો આપવામાં આવે છે અર્થ નજર પડશે.

વિગતવાર વર્ણન માટે વપરાય સ્ટાઇલશીટ

હવે અમારા સીએસએસ ઊભી મેનુ વિગતો ધ્યાનમાં લોઃ

યાદી-શૈલી પ્રકારના તમે માર્કર્સ યાદી દૂર કરવા માટે પરવાનગી આપે છે. ગાળો અને પેડિંગ માટે "0" સુયોજિત કરીને યાદી વધારાનું પેડિંગ દૂર કરે છે. HTML કોડ પરથી જોઇ શકાય છે કારણ કે, અમારા મેનુ યાદી છે, અને શૈલીઓ સીએસએસ મદદથી કરવામાં આવે છે.

ઉલ # my_Vmenu - સમગ્ર યાદી એકંદર શૈલી.

ઉલ # my_Vmenu લિ A - ટેગ લિ વચ્ચે શૈલી લિંક્સ.

ઉલ # my_Vmenu લિ A: હોવર - એક સમય હતો જ્યારે એક લોકો પર જતું મેનૂ વસ્તુઓ વિચારણા હેઠળ પ્રકારના વર્ણન.

ઉલ # my_Vmenu લિ સ્પાન - ટેક્સ્ટ વર્ણન (શીર્ષક મેનુ).

યાદ રાખો કે my_Vmenu.css my_Vmenu.html ફાઇલો અને એ જ ડિરેક્ટરીમાં સાચવેલ હોવું જ જોઈએ. જોકે, તેઓ અલગ ફોલ્ડર્સ સ્થિત કરી શકાય છે, પરંતુ પછી તે my_Vmenu.css માટે my_Vmenu.html ફાઇલ પાથ માં રજીસ્ટર કરવા માટે મહત્વપૂર્ણ છે. સાવચેત રહો, કારણ કે આ સમસ્યા આગંતુકો વારંવાર.

શૈલી એક HTML ફાઇલ માં વડા ટૅગ્સ વચ્ચે જોડાયેલ હોવું જ જોઈએ. menu_1.png અને menu_2.png - આ સામાન્ય રાજ્ય અને હોવર ચિત્ર મેનુ આઇટમ માટે ચિત્ર છે.

તે છબીઓ માટે એક અલગ ફોલ્ડર છબીઓ નામને સાચવો તે my_images, પરંતુ પછી સીએસએસ કોડ એડજસ્ટ કરવું વધુ સારું છે. લખો જ્યાં આ છબીઓ બતાવવામાં આવે છે, તેઓ આ ડિરેક્ટરી છે: URL (my_images / menu_1.png) અને URL (my_images / menu_2.png).

સીએસએસ કોડ માં વર્ણવ્યા ગુણધર્મો બાકીના, સરળતાથી સમજી. તેઓ અમારી મેનુ દેખાવ વ્યાખ્યાયિત કરે છે. તે પહોળાઈ અને વસ્તુઓ ઊંચાઈ સામાન્ય સ્થિતિમાં જ વસ્તુઓ સ્પષ્ટ નોટિસ સરળ છે, અને જ્યારે તમે તેમને પર માઉસ હૉવર. ફોન્ટ કદ 18px, પેડિંગ સ્થળના નામો વિવિધ પક્ષો તરફથી ઇન્ડેન્ટેશન નિર્દિષ્ટ કરે છે. પ્રદર્શન તમે પહોળાઈ અને પેડિંગ સુયોજિત કરવા ડિસપ્લે યુનિટ સેટ કરવા દે છે.

અમારા ઊભી મેનુ

તમે જોઈ શકો છો કારણ કે ઊભી સીએસએસ મેનુ સરળતાથી બનાવવા માટે. જ્ઞાન ડેટા આધારે તમે તે સુંદર અને તમારા વેબ સાઇટ પર મુલાકાતીઓ માટે આકર્ષક બનાવવા માટે સમર્થ હશે! તમારી સાઇટ ગાળવા માટે તમારા કલ્પના, અને પછી સ્ટાઇલિશ મેનુ વાપરો.