JQuery ጋር አኮርዲዮን መልክ ያለውን ጣቢያ አቀባዊ ምናሌ

ምናሌ, እንደምታውቁት - ጣቢያው ውስጥ ትልቅ ቦታ ከሚሰጣቸው. ሳቢ አስስ የመስመር ሀብት ፍላጎት ጎብኚዎች ይችላልና. በተጨማሪም, ማንኛውም ምናሌ አስፈላጊ ንብረት - በውስጡ compactness. አንድ ቀላል ቋሚ ምናሌ በቀላሉ HTML እና CSS በመጠቀም ተፈጥሯል. ነገር ግን እኛ ተጨማሪ ሂድ: ከእኛ jQuery እርዳታ ጋር menu- "አኮርዲዮን" ለመፍጠር መማር እንመልከት.

አንድ menu- "አኮርዲዮን" ፍጠር

አንድ አኮርዲዮን መልክ አንድ ቋሚ ምናሌ ምንድን ነው? ይህ ለመዳሰስ ቀላል የሚፈጥር እና ቄንጠኛ ጣቢያ የሚሰጥ አንድ ተቆልቋይ ዝርዝር ነው. ማውጫ, በዚህ መንገድ ያከናወናቸውን, እናንተ ንዑስ-ንጥሎች ብዙ ለማብራት ይፈቅዳል. የተፈለገውን ንጥል ላይ የመዳፊት ጠቅ ጊዜ ከእነርሱ መዳረሻ የሚከሰተው. አንድ ሰው jQuery አጠቃቀም ያለ በዚህ ፋሽን ቀላል ምናሌ ማድረግ ይቻላል ማለት ይሆናል. አዎን, ይህ ነው. ነገር ግን ይህ ነገር ዘመናዊ ስልኮች ወይም ጡባዊ ባለቤቶች በጣም ጠቃሚ ሊሆን አይችልም ነበር. የአምላክ ለሁሉም ማራኪ, አንድ ቀዋሚ ምናሌ መፍጠር እንመልከት. ከዚያም, አንድ የማውጫ ቁልፎች ቅጥ ቀለም መቀየር, በማንኛውም ጣቢያ ወደ ንድፍ ማስተካከል የሚቻል ይሆናል.

የ HTML ኮድ

ስለዚህ የእኛ ቋሚ ምናሌ ለመፍጠር, መጀመሪያ በሚከተሉት መስመሮች የያዘ, የ HTML-ኮድ መደወል አለባቸው:

Accord_menu.html የሚባል ፋይል ውስጥ ይህን ኮድ አስቀምጥ.

እርስዎ ማየት እንደ እኛ አንድ unordered ዝርዝር ፈጥረዋል. ይህ 3 ዋና ዋና ነጥቦች ያካትታል:

- ፎቶዎችን;

- ፊልሞች;

- መጻሕፍት.

እያንዳንዱ ንጥል ጥቂት አንቀጾች አሉት. # የት, እናንተ አገናኞችን ማከል ይኖርብዎታል. አሁን ቅጥ ለመግለፅ በጣም አስፈላጊ ነው. ይህ ሁሉ የኢንተርኔት ሀብት መልክ ላይ የተመካ ነው. በውስጡ ንድፍ ወደ ስምም ለማዋሃድ አለበት ጣቢያ አቀባዊ ምናሌ.

CSS-ኮድ

ቅጦች ጋር አስቸጋሪ መሆን የለበትም. በዚህ ምሳሌ ውስጥ አንድ ቅልመት የሙሌት ይጠቀማል ብቻ መሆኑን ልብ ይበሉ. እዚህ ላይ CSS-ኮድ ነው:

ቀለም የ CSS-ፋይል ውስጥ በተጠቀሰው ነው, መጠን ማርከሮች በግራ ላይ ያለውን ዝርዝር ውስጥ ያሉትን ነገሮች ይወገዳሉ. እርስዎ ላዩ ላይ ሲያንዣብቡ እያንዳንዱ ንጥል እና ንዑስ ምናሌ ውስጥ ጠባይ እንዴት ደርሰንበታል. ለምሳሌ ያህል:

# E1fee2 - ይህ ሐመር አረንጓዴ ቀለም ንዑስ.

# C4f0f7 አንተም በእነርሱ ላይ ሲያንዣብቡ -golubovaty ጥላ ንዑስ.

ማሳያ ንብረት አስፈላጊውን ድብዳብ እና መጠን ለማስተካከል የማገጃ ዋጋ መጠየቅ. ቀለም, መጠን, ቅርጸ-ቁምፊ አይነት, አካባቢ - ሁሉም ነገር እንደ የሲ ፋይል ውስጥ መግለጽ ነው. accordionmenu_my1.css, ለምሳሌ, ይደውሉ.

jQuery ምናሌ ማሻሻያዎች በማገናኘት ላይ

እንደምታስታውሱት ዘንድ እንደ ግባችን - አንድ ቋሚ ምናሌ jQuery ለመፍጠር. በዚህ ቴክኖሎጂ ጋር በደንብ የማናውቃቸው ከሆነ, አትጨነቅ. እኛ የ Google ማከማቻ መጠቀም እና JQuery ስክሪፕት ይገናኙ. ይህም ይበልጥ ማራኪ ምናሌ ያደርጋል. jQuery HyperText Markup ኤች ቲ ኤም ኤል እና ጃቫስክሪፕት ያለውን መስተጋብር መሰረት ጃቫስክሪፕት ቤተ መጻሕፍት ነው. jQuery እናንተ ንጥረ ነገሮች ይዘት እና ባህሪያት ለመድረስ ያስችልዎታል.

ስለዚህ, ኤች ቲ ኤም ኤል-ፋይል አካል ውስጥ አስፈላጊውን ስክሪፕት እንዲገናኙ እና በፈረስ እሽቅድምድም ክፍሎች በስተቀር, 2 ተለዋዋጮች ማከማቻ ደንቦችን ማዘጋጀት. መዳፊት ጠቅታ አለ የሆነውን ላይ ሰው ደጃፍ ላይ ሌሎች ትሮችን ከዘጉ, ኮድ ያበርክቱ. እዚህ ይመስላል እንዴት:

ሁሉም ለውጦች አስቀምጥ ይህን አሳሹ ምናሌ ውስጥ ምን እንደሚመስል ይመልከቱ. ይህ አንድ የጋራ ውጤት ነው: በዚህም ምክንያት, እኛ ሁልጊዜ ያላቸውን ምርጫዎች ላይ የሚወሰን, መለወጥ የሚችል ማራኪ ምናሌ መጥተዋል. እና jQuery, የሲ መስክ ላይ አዲስ እውቀት በማዳበር, አንተ ችሎታቸውን ለማሻሻል, ወደ ጣቢያው የመጀመሪያ ልዩ ክፍሎች ይፈጥራል.