16 תפריטי CSS מדורגים לחידוש האתר שלך

תפריט JQuery

תפריטים מדורגים או נפתחים הם חיוני כמעט לכל סוג אתר. במיוחד אלה הזקוקים להכנסת נתונים על ידי המבקר, כגון דבר פשוט כמו בחירת המין או בחירת איזה צבע תהיה החולצה שאתה עומד לרכוש במסחר האלקטרוני שלנו.

תפריטים מדורגים הם אלמנטים אחרים שנוכל לעדכן באתרנו כדי לעמוד בסטנדרטים העדכניים של עיצוב אתרים. המגע הזה והדקות ההיא שתוסיף איכות גבוהה יותר לכל סביבת האינטרנט שהכנו לאתר שלנו. אתה הצגת 16 תפריטים מדורגים ב- CSS שיהיה שימושי לחידוש האתר שלך. אנו זוכרים שלחלקם יהיה גם קצת JavaScript, ומבלי לשכוח גם את ה- HTML הדרוש.

תפריט מפל

תפריט מפל מותאם אישית

מפל או תפריט נפתח זה מורכב מ- HTML, CSS ו- JavaScript. למרות שקוד ה- JavaScript קצר מאוד. זה עוקב אחר התקן העיצוב החומרי הנוכחי כשפה עיצובית כדי לשלב אנימציית מפל פשוטה וישרה עם נוכחות מושכת את העין. בעת פתיחת אפשרויות התפריט השונות, יש אפקט רחף גרפי כאשר אנו משאירים את מצביע העכבר מעליהם.

תפריט נפתח עם jQuery

תפריט JQuery

תפריט המפל הזה די פשוט, אבל זה מאוד אלגנטי בעיצוב. יש לו גם מרחף להדגשת הגוון הכחול של כל תפריט ואנימציה מדורגת בלי הרבה תרועה. הוא מיוצר עם HTML, CSS ו- JavaScript (jQuery).

תפריט מפל בסגנון

תפריט פס

תפריט נפתח זה ב- HTML, CSS ו- JavaScript הוא בהשראת אחד האתרים המעוצבים הטובים ביותר: Stripe (שירות הכרטיסים הדיגיטליים). אין מרחף מעל התפריטים, אלא אנימציה מעוצבת להפליא כדי להבהיר את כוונותינו לגבי עיצוב אתר האינטרנט שלנו. חיוני לאיכותו ומושלם לחידוש תפריטים באתר האינטרנט שלך.

תפריט מפל אנימציה

תפריט עיכוב אנימציה

תפריט נפתח זה מנסה להראות את השימוש ב- אנימציה מאוחרת מכל אחד מהאלמנטים המופיעים כאשר משאירים את מצביע העכבר בכל תפריט. עם כמה עשיריות של עיכוב, אפקט העיכוב הזה מושג שנותן לו מגע מיוחד מאוד.

אפקטים בתפריט הנפתח

תפריט CSS טהור

כאילו א סדרת קלפים מחפיסה, האנימציה של תפריט מפל זה מאוד מיוחדת בשבילה. אפקט מפל מעולה שהוא CSS טהור. אתה כבר יודע מה עליך לעשות כדי ליישם את זה באתר שלך.

אנימציית מפל בתפריט

תפריט מפל אנימציה

תפריט נפתח מרשים לאנימציות ועל אותו צבע כחול שבולט. עם דהייה פנימה פנימה, האנימציה שגורמת לחלקים השונים בתפריט להופיע. מיוצר ב- HTML, CSS ו- JavaScript.

עם קצת jQuery: תפריט מפל

תפריט נפתח

תפריט נפתח מותאם אישית ותמציתי מאוד אליו לא חסר לו שום סוג של פרט. אולי הפשטות שלה היא הנקודה הטובה והגרועה ביותר שלה. זה יהיה תלוי מה אתה צריך לאתר שלך ושאיפותיך. הרבה CSS וקצת JavaScript.

תפריט מפל אלגנטי

Cascada

אם בקודם אנחנו מתגעגעים לאנימציה ולעיצוב טוב יותר, התפריט הנפתח הזה יש לעשות הכל ב- CSS ו- JavaScript. האנימציה ואפקט ההצללה בולטים בכתום בכל פעם שאנחנו משאירים את מצביע העכבר מעל כל אחד מהקטעים. אחד הטובים ברשימה.

תפריט נפתח ב- CSS

תפריט CSS

Un תפריט מפל מינימליסטי ושהוא מתוכנן אך ורק ב- CSS. אנימציה פשוטה, אבל כל הכבוד כדי לא להתבלט. תפריט שלא נעלם אחריו ועומד בתקני העיצוב הנוכחיים.

תפריט נפתח

תפריט נפתח של CSS טהור

תפריט מפל CSS טהור זה הוא אחר מובחנת היטב על ידי אנימציה המתרחש בכל פעם שאנחנו לוחצים על תפריט. האנימציה מחליקה את החלון מצד ימין בתזמון מושלם. עוד אחד המעניינים ברשימה כולה.

תפריט מפל פשוט

תפריט מפל פשוט

תפריט זה פשוט במקורו ומורכב מ- HTML ו- CSS. זה עוד אחד מאותם תפריטים שמאפשרים לנו לעדכן את אותו מרכיב חשוב באתר שלנו וזה לא נותנים הרבה קנטה. אני חושב שזה מובן היטב למה אנחנו מתכוונים בזה.

ניווט אופטי בתפריט

תפריט אופקי

למרות שזה כבר אמור להתגשם 4 שנים שלו, תפריט מפל זה מכסה את זה שנמצא ממש לידו בצורה יצירתית למדי. אם אתה מחפש משהו אחר, זה עוד אחד שאתה יכול לבחור מהרשימה.

תפריט נפתח ב- CSS

תפריט מפלים

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

תפריט מפל עם JS קטן

תפריט נפתח של CSS

תפריט נפתח זה משתמש במעט מאוד JavaScript, מספיק כדי לסגור את התפריט באופן אוטומטי כשעוברים למשהו אחר. האם כל הכבוד עיתוי בהשפעת האנימציה להיות אחד הטובים ביותר בנושא זה.

עוד תפריט CSS מדורג טהור

תפריט ממשק נפתח

תפריט מדורג עם אנימציות בו אין כמעט עיכוב של אלפי אלפים שְׁנִיָה. אז זה מייצר את ההשפעה של המיידיות על המבקר. אפקט העכבר ותפריט נפתח מעניין ללא תרועה רמה ברמה הכללית.

תפריט זיג זג בתפריט אשד

תפריט זיג זג

אם אתה מחפש תפריט שאינו כל הרשימה בפוסט זה, בתפריט הנפתח הזה יש את כל מה שאתה יכול לחפש. ה האנימציה שהופקה היא זיגזג להציע סוג אחר של חוויה קצת ניסיונית. זה יכול להתאים באופן מושלם לנושא משחקי וידאו, אז אם יש לך איזה לקוח שמחפש משהו אחר, אין ספק שזה המתאים ביותר מכל הרשימה. צורותיו האלכסוניות והאנימציה המהירה אומרות הכל.

אנחנו משאירים אותך עם סדרה זו של תפריטי CSS לאתר שלך שיש לה מספר גדול מהם.


תוכן המאמר עומד בעקרונותינו של אתיקה עריכתית. כדי לדווח על שגיאה לחץ כאן.

היה הראשון להגיב

השאירו את התגובה שלכם

כתובת הדוא"ל שלך לא תפורסם. שדות חובה מסומנים *

*

*

  1. אחראי לנתונים: מיגל אנחל גטון
  2. מטרת הנתונים: בקרת ספאם, ניהול תגובות.
  3. לגיטימציה: הסכמתך
  4. מסירת הנתונים: הנתונים לא יועברו לצדדים שלישיים אלא בהתחייבות חוקית.
  5. אחסון נתונים: מסד נתונים המתארח על ידי Occentus Networks (EU)
  6. זכויות: בכל עת תוכל להגביל, לשחזר ולמחוק את המידע שלך.