16 קאַסקיידינג מעניוז אין CSS צו באַפרידיקן דיין וועבזייטל

JQuery מעניו

קאַסקאַדינג אָדער דראָפּדאָוון מעניוז זענען יקערדיק פֿאַר כּמעט קיין טיפּ פון וועבזייטל. ספּעציעל יענע וואָס דאַרפֿן די הקדמה פון דאַטן דורך דעם גאַסט, ווי עפּעס ווי פּשוט ווי טשוזינג די דזשענדער אָדער סעלעקטירן וואָס קאָליר איז די העמד וואָס איר וועט קויפן אין אונדזער eCommerce.

די קאַסקיידינג מעניוז זענען אנדערע עלעמענטן וואָס מיר קענען דערהייַנטיקן אויף אונדזער וועבזייטל צו נאָכפאָלגן די קראַנט סטאַנדאַרדס פֿאַר וועב פּלאַן. אַז פאַרבינדן און די סאַטאַלטי וואָס וועט געבן מער קוואַליטעט צו די גאנצע וועב סוויווע וואָס מיר האָבן צוגעגרייט פֿאַר אונדזער וועבזייטל. דו ינטראָודוסינג 16 קאַסקיידינג מעניוז אין CSS וואָס וועט זיין נוציק צו באַנייַען דיין וועבזייטל. מיר געדענקען אַז עטלעכע וועט אויך האָבן אַ ביסל דזשאַוואַסקריפּט און אָן פאָרגעטטינג די נויטיק HTML.

וואַסערפאַל מעניו

מנהג וואַסערפאַל מעניו

דעם וואַסערפאַל אָדער דראָפּדאָוון מעניו באשטייט פון HTML, CSS און JavaScript. כאָטש די דזשאַוואַסקריפּט קאָד איז זייער קורץ. לויט דעם קראַנט מאַטעריאַל דיזיין סטאַנדאַרט ווי אַ פּלאַן שפּראַך, עס ינקאָרפּערייץ אַ פּשוט און סטרייטפאָרווערד וואַסערפאַל אַנאַמיישאַן מיט אויג קאַטשינג בייַזייַן. ווען עפן די פאַרשידענע מעניו אָפּציעס, עס איז אַ גראַפיק כאַווער ווירקונג ווען מיר לאָזן די מויז טייַטל איבער זיי.

דראָפּדאָוון מעניו מיט דזשקווערי

JQuery מעניו

די וואַסערפאַל מעניו איז שיין גלייך, אָבער עס איז זייער עלעגאַנט אין פּלאַן. עס איז אויך כאַווערינג צו אַקאַמאַדייט די בלוי כיו פון יעדער מעניו און אַ קאַסקיידינג אַנאַמיישאַן אָן פיל פאַנפער. עס איז געמאכט מיט HTML, CSS און JavaScript (jQuery).

נוסח וואַסערפאַל מעניו

פּאַס מעניו

די דראָפּדאָוון מעניו איז HTML, CSS און JavaScript ינספּייערד דורך איינער פון די בעסטער דיזיינד וועבסיטעס: סטרייפּ (די דיגיטאַל קאָרט דינסט). עס איז קיין כאַווער איבער די מעניוז, אָבער אַ ויסגעצייכנט דיזיינד אַנאַמיישאַן צו קלאָר אונדזער ינטענטשאַנז וועגן דעם פּלאַן פון אונדזער וועבזייטל. עס איז יקערדיק פֿאַר די קוואַליטעט און איז גאנץ צו באַנייַען די מעניוז פון דיין וועבזייטל.

אַנימאַטעד וואַסערפאַל מעניו

אַנאַמיישאַן פאַרהאַלטן מעניו

דעם דראָפּדאָוון מעניו פרוווט צו ווייַזן די נוצן פון די דילייד אַנאַמיישאַן פון יעדער פון די עלעמענטן וואָס דערשייַנען ווען איר לאָזן די מויז טייַטל אין יעדער מעניו. מיט אַ ביסל טענטס פון פאַרהאַלטן, די פאַרהאַלטן ווירקונג איז אַטשיווד וואָס גיט עס אַ זייער ספּעציעל פאַרבינדן.

דראָפּדאָוון מעניו יפעקס

ריין קסס מעניו

ווי אויב אַ סעריע קאַרדס פֿון אַ דעקדי אַנאַמיישאַן פון דעם וואַסערפאַל מעניו איז זייער ספּעציעל פֿאַר אים. אַ ויסגעצייכנט וואַסערפאַל ווירקונג וואָס איז ריין קסס. איר שוין וויסן וואָס איר האָבן צו טאָן צו ינסטרומענט עס אויף דיין פּלאַץ.

וואַסערפאַל אַנאַמיישאַן אין מעניו

אַנימאַטיאָן וואַסערפאַל מעניו

א דראָפּדאָוון מעניו סטרייקינג דורך אַנאַמיישאַנז און פֿאַר די בלוי פֿאַרב וואָס שטייט אויס. די אַנאַמיישאַן אַז די פאַרשידענע סעקשאַנז פון די מעניו איז געוויזן. געמאכט אין HTML, CSS און JavaScript.

מיט אַ ביסל דזשקווערי: וואַטערפאַלל מעניו

דראָפּדאָוון מעניו

א פערזענליכען און זייער קאַנסייס דראָפּדאָוון מעניו צו וואָס עס קען נישט פעלן קיין טיפּ פון דעטאַל. טאָמער די פּאַשטעס איז די בעסטער און ערגסט פונט. עס וועט אָפענגען אויף וואָס איר דאַרפֿן פֿאַר דיין וועבזייטל און דיין אַספּיריישאַנז. א פּלאַץ פון קסס און אַ ביסל דזשאַוואַסקריפּט.

עלעגאַנט וואַסערפאַל מעניו

קאַסקאַדאַ

אויב אין די פריערדיקע, מיר פאַרפירן אַנאַמיישאַן און אַ בעסער פּלאַן, דעם דראָפּדאָוון מעניו האט אַלץ צו זיין געמאכט אין קסס און דזשאַוואַסקריפּט. די אַנאַמיישאַן און דער מאַראַנץ שיידינג ווירקונג זענען סטרייקינג יעדער מאָל ווען מיר לאָזן די מויז טייַטל איבער יעדער פון די סעקשאַנז. איינער פון די בעסטער אויף דער רשימה.

דראָפּדאָוון מעניו אין CSS

CSS מעניו

Un מינימאַליסט וואַסערפאַל מעניו און אַז עס איז דיזיינד ריין אין CSS. פּשוט אַנאַמיישאַן, אָבער געזונט געטאן צו נישט שטיין אויס. א מעניו וואָס איז אַננאָוטיסט און נאָכגיין די קראַנט סטאַנדאַרדס.

דראָפּדאָוון מעניו

ריין CSS דראָפּדאָוון מעניו

דער ריין CSS קאַסקייד מעניו איז אנדערן געזונט אונטערשיידן דורך אַנאַמיישאַן וואָס אַקערז יעדער מאָל ווען מיר גיט אַ מעניו. די אַנאַמיישאַן סליידז די פֿענצטער פון די רעכט זייַט מיט אַ גאנץ טיימינג. אן אנדער פון די מערסט טשיקאַווע אויף די גאנצע רשימה.

פּשוט וואַסערפאַל מעניו

פּשוט וואַסערפאַל מעניו

די מעניו איז אָריגינעל פּשוט און באשטייט פון HTML און CSS. עס איז אן אנדער פון די מעניוז וואָס לאָזן אונדז דערהייַנטיקן דעם וויכטיק עלעמענט פון אונדזער וועבזייטל טאָן ניט געבן פיל קאַנטע. איך טראַכטן עס איז גוט פארשטאנען וואָס מיר מיינען דערמיט.

האָריזאָנטאַל מעניו נאַוויגאַציע

האָריזאָנטאַל מעניו

כאָטש עס איז שוין צו מקיים זיין 4 יאר, דעם וואַסערפאַל מעניו אָוווערלייז די רעכט לעבן עס אויף אַ שיין שעפעריש וועג. אויב איר זוכט פֿאַר עפּעס אַנדערש, עס איז אַן אנדערע וואָס איר קענען אויסקלייַבן פֿון דער רשימה.

דראָפּדאָוון מעניו אין CSS

וואַטערפאַללס מעניו

אן אנדער מעניו איז ריין אין CSS עס איז גאַנץ פאַרביק, לפּחות אין די קוסטאָמיזאַטיאָן געגעבן אין דעם בייַשפּיל. די אַנאַמיישאַן אַנטדעקן אַ ראָולינג לאָדן ווירקונג מיט פלאַך פארבן וואָס דראַפּס די פאַרשידן סעקשאַנז פון די אויסדערוויילטע מעניו. אן אנדער פון די טשיקאַווע וואַסערפאַל מעניוז אויף דער רשימה מיט אַ געזונט-אויסדערוויילטע טעמע.

וואַסערפאַל מעניו מיט קליין דזשס

קסס דראָפּדאָוון מעניו

דעם דראָפּדאָוון מעניו ניצט זייער קליין דזשאַוואַסקריפּט, גענוג צו אויטאָמאַטיש פאַרמאַכן די מעניו ווען מיר גיין צו עפּעס אַנדערש. איז טיימינג געזונט אַטשיווד אין דער ווירקונג פון אַנאַמיישאַן צו ווערן איינער פון די בעסטער אין דעם אַכטונג.

אן אנדער ריין CSS קאַסקיידינג מעניו

דראָפּדאָוון צובינד מעניו

א קאַסקיידינג מעניו מיט אַנאַמיישאַנז אין וואָס עס איז קוים אַ פאַרהאַלטן פון טויזנט סעקונדע. אַזוי עס טראגט די ווירקונג פון יממעדיאַטי אויף דער גאַסט. האָווער ווירקונג און אַ טשיקאַווע דראָפּדאָוון מעניו אָן פיל פאַנפער אין אַלגעמיין.

קאַסקייד מעניו זיג זאַג באַגריף

זיג זאַג מעניו

אויב איר זוכט פֿאַר אַ מעניו אַנדערש ווי די גאנצע רשימה אין דעם פּאָסטן, דעם דראָפּדאָוון מעניו האט אַלץ איר קענען זוכן פֿאַר. די אַנאַמייטיד געשאפן איז זיגזאַג צו פאָרשלאָגן אן אנדער טיפּ פון דערפאַרונג אַ ביסל יקספּערמענאַל. עס קען זיין בישליימעס פּאַסיק אין אַ ווידעא שפּיל טעמע, אַזוי אויב איר האָט אַ טיפּ פון קאַסטאַמערז וואָס איר זוכט פֿאַר עפּעס אַנדערש, עס איז שורלי די מערסט פּאַסיק פון די גאנצע רשימה. זיין אַבליק שאַפּעס און שנעל אַנאַמיישאַן זאָגן אַלץ.

מיר לאָזן איר מיט די סעריע פון ​​CSS מעניוז פֿאַר דיין וועבזייטל וואָס האט אַ גרויס נומער פון זיי.


דער אינהאַלט פון דעם אַרטיקל אַדכיר צו אונדזער פּרינציפּן פון לייט עטיקס. צו מעלדונג אַ טעות גיט דאָ.

זייט דער ערשטער צו באַמערקן

לאָזן דיין באַמערקונג

אייער בליצפּאָסט אַדרעס וועט נישט זייַן ארויס. Required fields זענען אנגעצייכנט מיט *

*

*

  1. פאַראַנטוואָרטלעך פֿאַר די דאַטן: Miguel Ángel Gatón
  2. ציל פון די דאַטן: קאָנטראָל ספּאַם, קאָמענטאַר פאַרוואַלטונג.
  3. לעגיטימאַטיאָן: דיין צושטימען
  4. קאָמוניקאַציע פון ​​די דאַטן: די דאַטן וועט נישט זיין קאַמיונאַקייטיד צו דריט פּאַרטיעס אַחוץ דורך לעגאַל פליכט.
  5. דאַטן סטאָרידזש: דאַטאַבייס כאָוסטיד דורך Occentus Networks (EU)
  6. רעכט: צו קיין צייט איר קענט באַגרענעצן, צוריקקריגן און ויסמעקן דיין אינפֿאָרמאַציע.