செங்குத்து CSS மெனு: அதை நீங்களே செய்து

சில வலைத்தலைமைகள் ஏற்கனவே இருக்கும் கீறல் சாதாரண மூலகங்கள் இருந்து வளரும் நேரத்தை செலவிட விரும்பவில்லை. அவர்கள் நீண்ட ஏற்பட்டதுபோல் ஏதாவது உங்கள் நேரத்தை வீணாக்காமல் எந்த பயனும் இல்லை என்று நம்புகிறேன். உண்மையில், வெறும் HTML மற்றும் CSS மாஸ்டரிங் யார் அந்த, அது முக்கியம் அவர்களின் பணியின் ஒரு சிறந்த புரிந்துணர்தல் இருக்கவேண்டியது உங்களை விஷயங்கள் நிறைய செய்ய உள்ளது. இந்த மெனு பொருந்தும். ஒரு செங்குத்து CSS ஐ மெனுக்கள் உருவாக்கவும். அது ஜாவா மற்றும் jQuery பயன்பாடு இல்லாமல், ஒரே HTML மற்றும் CSS அடிப்படையில் இருக்கும். ஒவ்வொரு மெனு தளத்தில் பக்கங்களில் வழிவகுக்கும் என்று இணைப்புகள் பட்டியலாகும்.

அடிப்படை படிகள்

ஒரு எளிய உருவாக்க செங்குத்து பட்டி CSS ஐ, நீங்கள் பின்வரும் படிமுறைகள் தேவைப்படலாம்:

1. முதல், மெனு இருக்கும் இதில் இணைப்புகள் (HTML ஆல் பயன்படுத்தி), பட்டியலை தீர்மானிக்க. அவர்களை ஒரு பெயரை வழங்கவும் உதாரணமாக, பின்வருமாறு:

1. முகப்பு.
2. நம் வரலாறு.
3. வழிகாட்டி.
4. சேவைகள்.
5. தொடர்புகள்.

நீங்கள் CSS உதவியுடன் விருப்பப்படி 2. பின்னர் இணைப்புகள் பாணியை.

நாம் எழுத , HTML குறியீட்டை my_Vmenu.html கோப்பில் வைத்து அது எப்படி உலாவியில் இருக்கும் பார்க்க:

இது எங்கள் மெனு அடிப்படையில் (எலும்புக்கூட்டை) ஆகும். # 1, # 2, முதலியன குறிப்பு பதிலாக இருக்க வேண்டும். அது ஒரு உலாவியில் எப்படி பார்க்க. நீங்கள் விரும்பும் மாட்டேன் படம். இப்போது நாம், பாணி கூறுகளை விவரிப்பதற்கு ஒரு முழுமையான செங்குத்து CSS ஐ மெனுக்கள் செய்ய தொடங்க வேண்டும்.

விளக்கம் பாணியை

நீங்கள் தளத்தில் போன்ற ஒரு முக்கியமான உறுப்பு தோற்றத்தை மேம்படுத்த விரும்பும் எல்லாவற்றையும் அமைக்க ஒரு கோப்பைப் my_Vmenu.css உருவாக்கலாம். இங்கே செங்குத்து CSS ஐ மெனுக்கள் மறுபடியும் உயிர்ப்பிக்க வேண்டும் அறிமுகம் இதில் குறியீடு ஆகும். இது புதிய கோப்பை எழுத, பின்னர் நாம் ஒரு நெருக்கமான எடுத்து வழங்கப்படும் என்று முக்கிய வரிகளுக்கான பொருள் தோன்றுவீர்கள்.

விரிவான விளக்கத்தை பயன்படுத்தப்படும் நடைதாளுடன்

இப்போது எங்கள் CSS செங்குத்து பட்டி விவரங்களை கருத்தில்:

பட்டியலில் பாணி வகை நீங்கள் குறிப்பான்கள் பட்டியலில் நீக்க அனுமதிக்கிறது. விளிம்பு மற்றும் பேட்டிங்கின் "0" என்பதற்கு அமைப்பது பட்டியலில் கூடுதல் திணிப்பு நீக்க. HTML குறியீட்டை இருந்து காணலாம், எங்கள் மெனு பட்டியல், மற்றும் பாணியை CSS பயன்படுத்தி வரையறுக்கப்படுகிறது.

உல் # my_Vmenu - முழு பட்டியலில் ஒட்டுமொத்த பாணி.

உல் # my_Vmenu லி ஒரு - டேக் லி இடையே பாணி இணைப்புகள்.

உல் # my_Vmenu லி ஒரு: மிதவை - ஒரு மக்கள் எழுகின்றது போது ஒரு நேரத்தில் மெனு பொருட்களை கருத்தில் கீழ் வகை ஒரு விளக்கம்.

உல் # my_Vmenu லி இடைவெளியில் - உரை விளக்கம் (தலைப்பு பட்டி).

என்று கோப்புகளை my_Vmenu.css my_Vmenu.html அதே அடைவில் பாதுகாக்கப்படுகிறது வேண்டும் என்பதை நினைவில் கொள்ளுங்கள். எனினும், அவை வெவ்வேறு கோப்புறைகளை அமைந்துள்ள இருக்கலாம், ஆனால் பின்னர் அது my_Vmenu.html கோப்பின் பாதை my_Vmenu.css இல் பதிவு செய்ய முக்கியம். ஏனெனில் இந்த பிரச்சனைக்கு புதுவரவுகள் பெரும்பாலும் கவனமாக இருங்கள்.

பாணி ஒரு HTML கோப்பு தலையில் குறிச்சொற்களை இடையே இணைக்கப்பட வேண்டும். menu_1.png மற்றும் menu_2.png - இந்த சாதாரண மாநில மற்றும் மிதவை உள்ள படம் மெனு உருப்படி படம் உள்ளது.

அது, படங்கள் ஒரு தனி கோப்புறையில் படங்களை இரட்சிக்க விரும்புகிறவன் அதை my_images பெயரிட, ஆனால் பின்னர் CSS குறியீடு ஒழுங்குபடுத்தவும் நல்லது. இணைய முகவரிக்கு (my_images / menu_1.png) மற்றும் இணைய முகவரிக்கு (my_images / menu_2.png): இந்த படங்களை காட்டப்படுகின்றன அங்கு எழுத, அவர்கள் இந்த அடைவு உள்ளன.

CSS குறியீடு விவரித்தார் பண்புகள் பிற பகுதிகளில், எளிதாக புரிந்து கொள்ள. அவர்கள் எங்கள் மெனு தோற்றத்தை வரையறுக்கின்றன. நீங்கள் அவர்கள் மீது கர்சரை போது அது பொருட்களை அகலம் மற்றும் உயரம் இயல்புநிலையில் அதே பொருட்களை குறிப்பிட்ட கவனிக்க எளிதானது, மற்றும். எழுத்தின் அளவு 18px, திணிப்பு இடங்களின் பெயர்களைக் கொண்ட பல்வேறு பக்கங்களிலும் இருந்து உள்தள்ளலை குறிப்பிடுகிறது. காட்சி நீங்கள் அகலம் மற்றும் திணிப்பு அமைக்க டிஸ்பிளே யூனிட் அமைக்க உதவுகிறது.

எங்கள் செங்குத்து பட்டி

நீங்கள் பார்க்க முடியும் என, செங்குத்து CSS ஐ மெனுக்கள் எளிதாக உருவாக்க. அறிவு தரவுகளுக்கு ஏற்ப நீங்கள் அதை அழகான மற்றும் உங்கள் வலை தளத்தில் பார்வையாளர்கள் கவர்ச்சிகரமான செய்ய முடியும்! உங்கள் தளத்தில் கொண்டாடுவதற்காக உங்கள் கற்பனை, பின்னர் ஒரு ஸ்டைலான மெனு பயன்படுத்தவும்.