ראשיאודותטיוליםצילוםfull Stack
Yosefus FlaviusYosefus Flavius

Yosefus flavius

אני בעצמי

קישורים מהירים

  • דף הבית
  • אודות
  • בלוג
logo

© 2025 Yosefus Flavius WebDeveloper

 תפריט מובייל נפתח ב-CSS בלבד — בלי טיפת JavaScript - מדריך מקיף עם טיפים ומידע שימושי

תפריט מובייל נפתח ב-CSS בלבד — בלי טיפת JavaScript

  1. בית
  2. >
  3. Full Stack
5 ביוני 2024• זמן קריאה: 1 דקות

רעיון מגניב: תפריט נפתח רק בעזרת CSS! שילוב של checkbox, label ו-+ סלקטור בשביל תנועת toggle בלי JS בכלל. פתרון מהיר, מפתיע, ופותח את הראש לעוד אינטראקציות אינטראקטיביות.

טריגר css ⚠ 🤓 איך לעשות menu נפתח למובייל ללא js בכלל? 👨‍👩‍👧‍👦 למה שוב css? ומה עשינו לך רע? 🤓 הפעם בסדרת css מגניב אך לא שמיש (כמו קרניים על דוכיפת או זימים על פיל), אכתוב רעיון שכשנחשפתי אליו הופתעתי כאילו הוציאו הרגע התנצלות פומבית על קראנצ' קורנפלקס (טפיי). הקוד המלא יהיה בתגובות למטה - ועיקרן תחילה: 🗨 ההמבורגר 🍔 (ככה קוראים לזה לא אני המצאתי - לצערי) נמצא בתוך label כדי שבלחיצה הוא יפעיל את הcheckbox שבתוכו. ישנו checkbox שמתחבא בתוך ההמבורגר בין העלים הכמושים של החסה שמלאה במיונז (אנשים אתם דוחים עם הרוטב הלבנבן והדלוח הזה). וישנו את הul שמכיל את הלינקים שאנחנו מעלימים אותו במצב הדיפולטיבי. 🤓 והטריק? 👨‍👩‍👧‍👦 בעזרת "+" אתם תופסים את הul שהוא "אח" של הcheckbox רק מתי שהוא על מצב :checked וגורמים לו להופיע. ועכשיו? כל לחיצה על ההמבורגר תעשה toggle (מה המילה של זה בעברית לכל הרוחות?) על הchckbox והul יופיע ויתחבא בהתאמה. * מאמין שהcrawler של המנועי חיפוש יצטרך פסיכולוג אחרי שהוא יחשף לתועבת הסמנטיקה הזו אז אין לי שום אחריות על זה. * העיקרון פותח את הראש להמון אופציות של עיצוב אינטראקטיבי ללא js . * תנו לי עוד רעיונות מוזרים כאלו - אני במצב רוח.

linkedin
whatsapp
facebook
x
Y

Yosefus Flavius

כותב הבלוג

כתבות קשורות

כתבות דומות

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע
27 באפריל 2025
Full Stack>>פרונט אנד

CSS Mix-blend-mode: איך לשלב תוכן עם הרקע

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

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון
27 באפריל 2025
Full Stack>>פרונט אנד

@apply ב־Tailwind: מה זה ואיך להשתמש בזה נכון

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

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️
27 באפריל 2025
Full Stack>>פרונט אנד

כל מה שצריך לדעת על צבעים ב־Tailwind CSS: טיפים, טריקים ואינטואיציה ️

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