JQuery සමග Accordion ස්වරූපයෙන් වෙබ් අඩවිය සඳහා සිරස් මෙනුව

ඔබ දන්නා පරිදි මෙනු, - වෙබ් අඩවිය අවියෝජනීය කොටසක්. රසවත් සංචාලනය සමඟ අමුත්තන් සම්පත් පොලී අමුත්තන් කිරීමට සමත් ය. මීට අමතරව, ඕනෑම මෙනු වැදගත් දේපල - එහි compactness. HTML හා CSS භාවිතා පහසුවෙන් නිර්මාණය සරල සිරස් මෙනුව. නමුත් අපි එය තවදුරටත් යන්න: කරමු අපට සඟවන්න උපකාරයෙන් menu- "Accordion" නිර්මාණය කිරීමට ඉගෙනගන්න.

එය menu- "Accordion" නිර්මාණය

ක Accordion ස්වරූපයෙන් සිරස් මෙනුව කුමක්ද? මෙය පහතට ෙය වන ල ස්, සැරිසැරීම පහසු නිර්මාණය හා ආකර්ෂණීය පෙනුමකින් අඩවිය ලබා දෙන වේ. මේ ආකාරයෙන් සිදු මෙනුව, ඔබ උප භාණ්ඩ ගොඩක් හැරී කිරීමට ඉඩ දෙයි. ඔවුන් වෙත ප්රවේශ ඔබ අපේක්ෂිත අයිතමය මත මවුසය ක්ලික් කල විට සිදුවේ. කවුරු හරි ඒක සඟවන්න භාවිතය තොරව මෙම විලාසිතා සරල මෙනුව කිරීමට හැකි බව කිව හැකිය. ඔව්, එහෙම තමයි. එහෙත්, මෙම වස්තුව ජංගම දුරකතන හෝ ටැබ්ලට් හිමිකරුවන් ඉතා ප්රයෝජනවත් වන්නේ නැහැ. ගේ සියලු ආයාචනා, සිරස් මෙනුව නිර්මාණය කරමු. එසේ නම්, සංචලනය විශාලනය වර්ණය වෙනස්, එය කළ හැකි කිසිදු අඩවියට නිර්මාණය වෙනස් කිරීම සඳහා වනු ඇත.

HTML කේත

ඉතින්, අප සිරස් මෙනුව නිර්මාණය කිරීමට, ඔබ මුලින්ම HTML-කේතය, පහත සඳහන් මාර්ග අඩංගු වන ඩයල් යුතුය:

Accord_menu.html ගොනුවක් මෙම කේතය සුරකින්න.

ඔබ දැක ගැනීමට හැකි වන පරිදි, අප unordered ලැයිස්තුව නිර්මාණය කර ඇත. එය ප්රධාන කරුණු 3 කින් සමන්විත වේ:

- ඡායාරූප;

- චිත්රපට,

- පොත්.

එක් එක් භාණ්ඩය ඡේද කිහිපයක් ඇත. කොහෙද #, ඔබ සබැඳි එකතු කිරීමට අවශ්ය වනු ඇත ඇත. දැන් එය ශෛලිය විස්තර කිරීමට වැදගත් වේ. ඒ සියල්ල ඔබේ අන්තර්ජාල සම්පත් පෙනුම මත රඳා පවතී. වෙබ් අඩවිය සඳහා සිරස් මෙනුව එහි නිර්මාණ බවට ගැටුමින් තොරව ඒකාබද්ධ කළ යුතුයි.

CSS-කේතය

විලාසිතා ඔබ දුෂ්කර විය යුතු නොවේ. අපි මෙම උදාහරණය තුල බෑවුම් තෘප්තියට භාවිතා කරන එකම කරුණාවෙන්. මෙන්න CSS-කේතය:

වර්ණ තැටියක CSS-ගොනුව තුල සඳහන් කර ඇත, ප්රමාණය සලකුණු වමේ ලැයිස්තුවේ ඇති භාණ්ඩ ඉවත් කර ඇත. එය ඔබ එය තබා ගෙන ඉන්න විට එක් එක් අයිතමය හා උප-මෙනුව තුළ හැසිරෙන ආකාරය තීරණය. උදාහරණයක් ලෙස:

# E1fee2 - මෙම ලා කොළ පාට උප.

ඔබ ඔවුන් පියාසර කරන විට # C4f0f7 -golubovaty සෙවන උප.

ප්රදර්ශනය දේපල වාරණ අගය අවශ්ය පුරවන සහ විශාලත්වය වෙනස් කරන්න කියලා. වර්ණය, ප්රමාණය, අකුරු වර්ගය, ස්ථානය - සියල්ල CSS ගොනු විස්තර ලෙස ය. උදාහරණයක් ලෙස, accordionmenu_my1.css, එය අමතන්න.

jQuery මෙනුව වැඩි දියුණු සම්බන්ධ

ඔබ ඔබට මතක ඇති විය හැක, අපගේ අරමුණ - සිරස් මෙනුව jQuery නිර්මාණය කරන්න. ඔබ මෙම තාක්ෂණය හුරු පුරුදු නැති නම්, කරදර වෙන්න එපා. අපි Google ගබඩාව භාවිතා සහ සියළු තිර රචනය සම්බන්ධ වේ. මෙය වඩාත් ආකර්ෂණීය මෙනුව වනු ඇත. jQuery අධිපෙළ සලකුණුබස HTML හා JavaScript අතර අන්තර් මත පදනම් වූ JavaScript පුස්තකාලයකි. jQuery ඔබ මූලද්රව්ය අන්තර්ගතය හා ගුණාංග ප්රවේශ කිරීමට ඉඩ දෙයි.

ඒ නිසා, HTML ගොනු ශරීරය තුළ අවශ්ය තිර රචනය හා සම්බන්ධ 2 විචල්ය, තුරඟ තරඟ අංග හැර ගබඩා සඳහා නීති සකස්. මත මූසික ක්ලිකය පවතින එක් විවෘත කිරීමේ අවස්ථාවට වෙනත් ටැබ්, වැසීම, කේතය දායක වී තිබේ. මෙහි දැක්වෙන ආකාරය මෙසේය:

සියලු වෙනස්කම් සුරකින්න, එය බ්රව්සරය මෙනුවේ වගේ දේ බලන්න. බව පොදු ප්රතිඵලයක් වේ: එහි ප්රතිඵලයක් ලෙස, අපි, ඔවුන්ගේ අභිරුචි මත පදනම්ව, ඔබ හැම විටම වෙනස් කළ හැකි ආකර්ෂණීය මෙනුව පැමිණ ඇත. සහ සියළු, CSS ක්ෂේත්රයේ නව දැනුම ලබා ගැනීම, ඔබ වෙබ් අඩවියේ අද්විතීය අංග, ඔවුන්ගේ කුසලතා වැඩි දියුණු නිර්මාණය කරනු ඇත.