JQuery மூலம் ஒரு துருத்தி வடிவில் தளத்தில் செங்குத்து பட்டி

பட்டி, உனக்கு தெரியும் - தளத்தின் அங்கமாக மாறி விட்டது. சுவாரஸ்யமான செல்லவும் ஆன்லைன் வள வட்டி பார்வையாளர்கள் முடியும். உள்பட வேறெந்த மெனு ஒரு முக்கிய சொத்து - அதன் இறுக்கம். ஒரு எளிய செங்குத்து பட்டி எளிதாக HTML மற்றும் CSS பயன்படுத்தி உருவாக்கப்பட்ட. ஆனால் நாம் மேலும் செல்ல: எங்களுக்கு jQuery உதவியுடன் மெனு "துருத்தி" உருவாக்க கற்றுக்கொள்வோம்.

ஒரு மெனு "துருத்தி" உருவாக்கு

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

HTML குறியீட்டை

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

Accord_menu.html என்று ஒரு கோப்பில் இந்த குறியீடு சேமிக்கவும்.

நீங்கள் பார்க்க முடியும் என, நாங்கள் ஒரு வரிசையிலமையாத பட்டியல் உருவாக்கியுள்ளது. அது 3 முக்கிய புள்ளிகள் உள்ளன:

- புகைப்படங்கள்;

- படங்களில்;

- புத்தகங்கள்.

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

CSS ஐ குறியீடு

பாணியை நீங்கள் கடினமாக இருக்கும் கூடாது. நாம் இந்த உதாரணத்தில் ஒரு சாய்வு நிரப்பு பயன்படுத்துகிறது மட்டுமே என்பதை நினைவில். இங்கே CSS-குறியீடு ஆகும்:

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

# E1fee2 - இந்த வெளிர் பச்சை நிறம் துணை.

# C4f0f7 நீங்கள் அவர்கள் மீது படல் போது -golubovaty நிழல் துணை.

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

jQuery மெனு மேம்பாடுகளை இணைக்கிறது

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

எனவே, ஐ-கோப்பு உடலில் தேவையான ஸ்கிரிப்ட் இணைக்க மற்றும் குதிரை பந்தய உறுப்புகள் தவிர, 2 மாறிகள் சேமிப்பு விதிகளை அமைக்க. ஒரு மவுஸ் கிளிக் அங்கு இது ஒரு திறப்பு மற்ற தாவல்களை மூட, குறியீடு வழங்கவும். இங்கே அது எப்படி தான்:

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