એક પગલું દ્વારા પગલું માર્ગદર્શિકા
ભલે તમારી નેવિગેશન મેનૂ એ આડી રેખા અથવા બાજુની બાજુમાં ઊભી પંક્તિ છે, તે હજી પણ એક સૂચિ છે. વેબ નેવિગેશન ડિઝાઇન કરતી વખતે, ભૂલી જવા ઘણી વાર સરળ હોય છે કે સંશોધક મેનૂ એ ફક્ત લિંક્સનું ગૌરવપૂર્ણ ગ્રુપ છે. પરંતુ જો તમે એક્સએચટીએમએલ + સીએસએસનો ઉપયોગ કરીને તમારા સંશોધકને પ્રોગ્રામ કરો છો, તો તમે એક મેનૂ બનાવી શકો છો જે ડાઉનલોડ કરવા માટે નાનું (એક્સએચટીએમએલ) અને કસ્ટમાઇઝ કરવા માટે સરળ છે (સીએસએસ).
શરૂ કરી રહ્યા છીએ
નેવિગેશનની યાદી તૈયાર કરવા માટે તમારે સૂચિનો ઉપયોગ કરવાની જરૂર છે.
તે માનક એકનિર્દેશિત સૂચિ હોઈ શકે છે જે નેવિગેશન તરીકે ઓળખવામાં આવી છે:
જો તમે એચટીએમએલ પર નજીકથી જુઓ છો, તો તમે જોશો કે "હોમ" લિંકમાં તમારી પાસે એક આઈડી છે. આ તમને એક મેનૂ બનાવવાની મંજૂરી આપશે જે તમારા વાચકો માટે વર્તમાન સ્થાનને ઓળખે છે. અત્યારે તમે તમારી સાઇટ પર તે પ્રકારના દ્રશ્ય ઉદ્દેશ્યની યોજના બનાવતા નથી, તો પણ તમે તે માહિતીનો સમાવેશ કરી શકો છો. જો તમે પછીથી કયૂ ઉમેરવાનું નક્કી કરો છો, તો તમારી સાઇટને તૈયાર કરવા માટે તમારી પાસે ઓછી કોડિંગ હશે.
કોઈપણ સીએસએસ સ્ટાઇલ વિના, આ એક્સએચટીએમએલ મેનુ પ્રમાણભૂત unordered યાદી જેવું દેખાય છે. ત્યાં ગોળીઓ છે અને સૂચિની આઇટમ્સ સહેજ દાંતાવાળું છે. કારણ કે હું પ્લેસહોલ્ડર લિંક્સનો ઉપયોગ કરી રહ્યો છું, મોટાભાગના બ્રાઉઝર્સ લિંક્સને ક્લિક કરી શકાય તેવા (અન્ડરલાઈન અને વાદળી) પ્રદર્શિત કરશે નહીં. જો તમે વેબ પૃષ્ઠમાં ઉપરના HTML માં પેસ્ટ કરો છો, તો તમારું નેવિગેશન આના જેવું દેખાશે:
- હોમ
- પ્રોડક્ટ્સ
- સેવાઓ
- અમારો સંપર્ક કરો
આ ખૂબ કંટાળાજનક છે અને તે મેનૂ જેવું લાગતું નથી. પરંતુ સૂચિમાં ઉમેરવામાં આવતી કેટલીક CSS શૈલીઓ સાથે, તમે એક મેનૂ બનાવી શકો છો જે તમને ગૌરવ બનાવે છે.
વર્ટિકલ નેવિગેશન મેનુ
ઊભા નેવિગેશન મેનુ લખવા માટે ખૂબ સરળ છે કારણ કે તે સામાન્ય સૂચિની જેમ જ પ્રદર્શિત કરે છે: ઉપર અને નીચે.
સૂચિની આઇટમ્સ પૃષ્ઠને ઉભા કરવામાં આવે છે.
જ્યારે હું મેનુ સ્ટાઇલ કરતો હોઉં છું, તો હું બહારથી શરૂ કરું છું અને અંદર કામ કરું છું. આ દ્વારા, હું તેનો અર્થ એ કે હું પ્રથમ ઉલ # નેવિગેશન શૈલી અને પછી લિ તત્વો અને પછી લિંક્સ, વગેરે પર ખસેડો. આ મેનુ માટે, પ્રથમ તમે મેનૂની પહોળાઇને વ્યાખ્યાયિત કરો છો. આ સુનિશ્ચિત કરશે કે મેનૂની વસ્તુઓ લાંબી હોય તો પણ, તે બાકીના લેઆઉટને દબાણ નહીં કરે અથવા આડી સરકાવનારનું કારણ ન કરે.
ઉલ # નેવિગેશન {પહોળાઈ: 12 અંશ; }
એકવાર મને પહોળાઈ સેટ મળી જાય, હું યાદી વસ્તુઓ સાથે રમી શકે છે. આનાથી મને (ગોળીઓ છુટકારો મેળવવા માટે), બેકગ્રાઉન્ડ રંગ, બોર્ડર્સ, ટેક્સ્ટ સંરેખણ અને માર્જિન જેવી બાબતો સેટ કરવાની મંજૂરી મળે છે.
ઉલ # નેવિગેશન લી {
સૂચિ-શૈલી: કોઈ નહીં;
બેકગ્રાઉન્ડ રંગ: # 039;
સરહદ-ટોચ: નક્કર 1px # 039;
ટેક્સ્ટ-સંરેખિત: ડાબે;
હાંસિયો: 0;
}
એકવાર તમે સૂચિ આઇટમ્સ માટે બેઝિક્સ સેટ કરી લો તે પછી તમે મેન્યૂઝ લિંક્સ એરિયામાં કેવી રીતે જુએ છે તે સાથે રમવાનું શરૂ કરી શકો છો. પ્રથમ શૈલી UL # નેવિગેશન LI એ અને પછી એ: લિંક, એ: મુલાકાત લીધી, એક: હોવર, અને એ: સક્રિય (જો તમે તેમને કરવા માંગો છો). લિંક્સ માટે, હું લિંક્સને બ્લૉક એલિમેન્ટ (મૂળભૂત ઇન-લાઇનની જગ્યાએ) બનાવવા માંગું છું. આ તેમને લી ની સંપૂર્ણ જગ્યા લેવા માટે દબાણ કરે છે- અને તે ફકરોની જેમ વધુ કાર્ય કરે છે, જે તેને મેનૂ બટનો તરીકે શૈલીમાં સરળ બનાવે છે. હું હંમેશા જે વસ્તુ કરું છું તે નીચે લીટીને દૂર કરે છે (ટેક્સ્ટ-શણગાર: કંઈ નથી;), કારણ કે આનાથી બટનો મને બટનો જેવા દેખાય છે.
પરંતુ અલબત્ત, તમારી ડિઝાઇન અલગ હોઈ શકે છે
ઉલ # નેવિગેશન લી એક {
પ્રદર્શન: બ્લોક;
ટેક્સ્ટ-શણગાર: કોઈ નહીં;
ગાદી:. 25 મી.
સીમા-નીચે: ઘન 1px # 39f;
સરહદ અધિકાર: ઘન 1px # 39f;
}
નોંધ લો કે ડિસ્પ્લે સાથે: બ્લોક; લિંક્સ પર સેટ કરો, મેનૂ આઇટમના બૉક્સને માત્ર અક્ષરો નહીં, ક્લિક કરી શકાય તેવા છે. આ પણ ઉપયોગીતા માટે સારી છે લિંક રંગો (લિંક, મુલાકાત લીધી, હૉવર અને સક્રિય) સેટ કરવાની ખાતરી કરો જો તમે ઇચ્છો કે તેમને ડિફૉલ્ટ વાદળી, લાલ અને જાંબલીથી અલગ હો.
a: લિંક, a: મુલાકાત લીધી {color: #fff; }
a: હોવર, a: સક્રિય {color: # 000; }
હું પૃષ્ઠભૂમિ રંગને બદલીને હૉવર સ્ટેટને થોડો વધુ ધ્યાન આપવા માંગું છું.
a: હોવર કરો {background-color: #fff; }
જો તમે ઊભી મેનુઓના વધુ ઉદાહરણો જોઈએ છે, તો નીચેની સૂચિનો સંપર્ક કરો.
- એક રીતની વર્ટિકલ મેનુ
- એક મૂળભૂત વર્ટિકલ મેનુ ઢાંચો
- તમારી સાથે રીતની વર્ટિકલ મેનુ અહીં છે
- તમારી સાથે એક મૂળભૂત વર્ટિકલ મેનુ નમૂનો અહીં છે
આડું નેવિગેશન મેનુ
આડી નેવિગેશન મેનુઓ બનાવવા ઊભી નેવિગેશન મેનુઓ કરતાં સહેજ વધુ મુશ્કેલ છે કારણ કે તમે એ હકીકતને સરભર કરવાનું છે કે HTML સૂચિ ઊભી દર્શાવવા માટે પસંદ કરે છે. આડી મેનૂની જેમ, પહેલા તમારી નેવિગેશન મેનુ સૂચિ બનાવો:
આડી મેનૂ બનાવવા માટે, તમે વર્ટિકલ મેનૂ સાથે કર્યું તેમ જ કામ કરો. બહારથી શરૂ કરો અને સાઇન કરો. ત્યારથી હું મારા નેવિગેશનને ડાબા ખૂણામાં શરૂ કરવા માંગું છું, મેં તેને 0 ડાબા હાર્ટિન અને પેડિંગ સાથે સેટ કર્યું છે, અને હું તેને ડાબી બાજુમાં ફ્લોટ કરું છું. તમારે પહોળાઈને સેટ કરવાની આદત પણ મેળવી લેવી જોઈએ જેથી કરીને તમારો મેનૂ તમારા કરતાં વધુ અથવા ઓછા જગ્યાઓ લેતા નથી. આડી મેનુઓ માટે, આ સામાન્ય રીતે ડિઝાઇનની સંપૂર્ણ પહોળાઈ છે. મેં વાંચવા માટે સરળ બનાવવા માટે સમગ્ર સૂચિમાં પણ એક પૃષ્ઠભૂમિ રંગ ઉમેર્યો છે.
ઉલ # નેવિગેશન {
ફ્લોટ: ડાબે;
હાંસિયો: 0;
પેડિંગ: 0;
પહોળાઈ: 100%;
બેકગ્રાઉન્ડ રંગ: # 039;
}
પરંતુ આડી સંશોધક મેનૂનો રહસ્ય સૂચિ વસ્તુઓમાં છે. સૂચિ વસ્તુઓ સામાન્ય રીતે ઘટકોને અવરોધિત કરે છે, જેનો અર્થ એ છે કે તેમની પાસે દરેક એકની પહેલા અને પછી એક નવી લાઇન હશે. બ્લોકથી ઇનલાઇન સુધીનાં ડિસ્પ્લે પર સ્વિચ કરીને, તમે સૂચિ ઘટકો એકબીજાથી આગળની રેખાની લીટીમાં ફરજ પાડો છો.
ul # નેવિગેશન લી {પ્રદર્શન: ઇનલાઇન; }
હું લિંક્સને બરાબર ગણ્યો છે, જેમ કે મેં તેમને ઉભી નેવિગેશન મેનૂમાં એક જ રંગો અને ટેક્સ્ટ શણગાર સાથે વ્યવહાર કર્યો છે. મેં બટન્સને ચિત્રિત કરવા માટે ટોચની સરહદ ઉમેરી છે, જ્યારે તે પૂર્ણ કરવામાં આવે છે. હું દૂર આ જ વસ્તુ ડિસ્પ્લે હતી: બ્લોક; કારણ કે તે નવી લીટીઓને પાછું મૂકશે અને આડી મેનૂનો નાશ કરશે.
ઉલ # નેવિગેશન લી એક {
ટેક્સ્ટ-શણગાર: કોઈ નહીં;
ગાદી: .25 મીટર 1em;
સીમા-નીચે: ઘન 1px # 39f;
સરહદ-ટોચ: નક્કર 1px # 39f;
સરહદ અધિકાર: ઘન 1px # 39f;
}
a: લિંક, a: મુલાકાત લીધી {color: #fff; }
ઉલ # નેવિગેશન લી એ: હોવર {
બેકગ્રાઉન્ડ રંગ: #fff;
રંગ: # 000;
}
તમે સ્થાન માહિતી અહીં છો
એચટીએમએલનો બીજો એક પાસાનોંધ યેરેઅર ઓળખકર્તા છે. જો તમે તમારા વપરાશકર્તાઓનું વર્તમાન સ્થાન સૂચવવા માટે તમારા મેનૂને સંશોધિત કરવા માંગતા હો, તો ફક્ત એક અલગ પૃષ્ઠભૂમિ રંગ અથવા અન્ય શૈલીને વ્યાખ્યાયિત કરવા માટે આ ID નો ઉપયોગ કરો. તે ID એટ્રીબ્યુટને અન્ય પૃષ્ઠો પર યોગ્ય મેનૂ આઇટમ પર ખસેડો કે જેથી વર્તમાન પૃષ્ઠ હંમેશા હાઇલાઇટ કરે.
ઉલ # નેવિગેશન લી # તમે કરો છો {background-color: # 09f; }
જો તમે આ શૈલીઓને તમારા પૃષ્ઠ પર એકસાથે મૂક્યા છે, તો તમે એક આડા અથવા ઊભા મેનૂ બાર બનાવી શકો છો જે તમારી સાઇટ સાથે કાર્ય કરે છે પરંતુ તે ડાઉનલોડ કરવા માટે ઝડપી છે અને ભવિષ્યમાં અપડેટ કરવા માટે ખૂબ સરળ છે. એક્સએચટીએમએલ + સીએસએસ મદદથી તમારી યાદીઓ ડિઝાઇન માટે ખૂબ જ શક્તિશાળી સાધન બનાવે છે.
જો તમને આડી મેનુઓના વધુ ઉદાહરણો જોઈએ, તો નીચેનાનો સંપર્ક કરો
- એક રીતની આડું મેનુ
- એક મૂળભૂત આડું મેનુ નમૂનો
- તમારી સાથે એક રીતની આડું મેનુ અહીં છે
- તમે સાથે અમૂર્ત આડું મેનુ નમૂનો અહીં છે