ראשימדינותהטיולים שליטיולים ותרמילאותאודות
YosefusFlavius

Yosefus flavius

אני בעצמי

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

  • דף הבית
  • אודות
  • בלוג
אינסטגרם

©2026 Yosefus Flavius WebDeveloper

 תפריט מובייל נפתח ב-CSS בלבד — בלי טיפת JavaScript
  1. בית
  2. /
  3. פיתוח Full Stack

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

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 . * תנו לי עוד רעיונות מוזרים כאלו - אני במצב רוח.

שתף את המאמר

שתפו:
Yosefus Flavius

נכתב על ידי

Yosefus Flavius

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

עקבו באינסטגרםעוד עליי
הכתבה הקודמתמה זה יחס אלמנט ב-CSS ואיך להשתמש ב-aspect-ratio?הכתבה הבאהמעצבים אות ראשונה ענקית ב-CSS כמו ספרים עתיקים

כתבות דומות

כתבות קשורות

כתבות דומות

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

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

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

27 באפריל 2025
איך להוסיף גלילה חלקה ב-CSS
פיתוח Full Stack/פרונט אנד

איך להוסיף גלילה חלקה ב-CSS

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

27 באפריל 2025
האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0
פיתוח Full Stack/פרונט אנד

האם כדאי להשתמש בספריות UI ב-React? מלחמת בני אור בבני חושך 2.0

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

27 באפריל 2025