מחשבים, תוכנה
כיצד ליצור תפריטים נפתחים CSS
היום נשקול את השאלה "איך אני יוצר תפריטים הנפתחים CSS?". זה צריך לומר מיד כי פריט זה ייעשה ללא חיבור כלשהו כספים נוספים. כלומר, בתפריט ייוצר רק עם CSS ו- HTML.
אימון
כדי להבין מה הוא אותו המאמר, אתה צריך קצת להכיר חומר תיאורטי. אבל אם אתה מכיר-כיתות פסאודו, אתה יכול לדלג פסקה זו. לכן, כדי ליצור תפריטים אנכיים הנפתחים CSS, אנחנו צריכים אלמנט כפי «: לרחף». הדמויות המדומות «: לרחף» ניתן להקצות לכל תג HTML. זה מאפשר לך להגדיר את הרגע שבו פריט עבר העכבר. לדוגמה, מינינו נכס: «a: hover {color: red;}». כניסה משמעות הדבר היא כי כאשר עוברים עם העכבר זה הופך לאדום על התוכן של כל תג. ראוי לציין כי פסאודו-יסוד זה הוא גם מובטל. אגב, «: לרחף» יש הקשורים אלמנטים דומים. אבל מן זו ניצור התפריט הנפתח CSS פסאודו.
הוראה
ראשית, בואו להבין מה הוא תפריט נפתח. תחת הגדרה זו מקבלת המון שיטות שונות בניית פריסות שונות. במקרה זה, אנו מנתחים מבנה מורכב מכמה פריטים גלויים כל זמן וכמה נוספים (מוסתר). בואו נגמור עם התאוריה ולהתחיל להתאמן.
- אנו יוצרים את הפריסה של התפריט שלנו. כדי לעשות זאת, תיוג HTML-קוד. צור רשימה מקוננת:
-
- < / ul>. משהו כמו זה אמור להיראות התפריט הנפתח שלך. CSS להתערב מאוחר. במקרה זה ברשימה הראשית מורכבת משלושה תחומים עיקריים ושתי סגורים.
- הסתר בתפריט המשנה. לשם כך אנו משתמשים סגנונות, להגדיר את התכונות הבאות: ul ul {display: none;} זו תסיר את האלמנטים של הרשימה השנייה מהמסך.
- צור CSS תפריט, הנפתח מהרשימה הראשית. גיליונות סגנון מדורגים לכתוב את הכלל הבא: li ul: לרחף ul {display: block;}. כניסת משמעות הדבר היא כי כאשר סמן העכבר נמצא מעל האלמנט li, הנמצא ברשימת ul מופיע על מסך ul (מצורפת). במבט הראשון, תכנית כזו אולי נראית מסובכת ומבלבלת. אבל למעשה, הכל פשוט מאוד.
- להשתמש בפריסה זו עצמך על ידי הוספת התגים
- התוכן שלך. אתה יכול לשנות את מספר אלמנטי רשימה.
שינויים דקורטיביים
ברגע פריסת התפריט הראשי היא מוכנה, אתה יכול להרשמה. כנראה, רבים מלכתחילה מוכן להיפטר סמנים המעידים על פריט ברשימה. הדבר נעשה באמצעות CSS נכס בודד, כלומר רשימה בסגנון הסוג. אתה צריך להוסיף את הערך הבא: li {רשימה בסגנון מסוג: none;}. אז אתה יכול להכניס את המסגרת ולעשות ברקע. הגבול והרקע לעזור לך עם זה. אולי קצת לא יאהבו את התפריט הנפתח יופיע רשימה נוספת, דוחף באותו אלמנטים בסיסיים. כדי לתקן זאת, אתה יכול למקם אותו. כדי לעשות זאת, גיליונות סגנון מדורגים לכתוב את הערך הבא: ul ul {position: absolute; משמאל: 15px; מימין: 15px; העליון: 15px; בתחתית: 15px;}. כמובן, את הערכים ישתמשו משלך. תלוי איפה אתה רוצה לראות את התפריטים הנפתחים, CSS מציע תכונות רבות יותר שיכול להוסיף אפקטים שונים ולקשט את הרשימות שלנו.
מסקנה
שוב ראוי לציין בניית פריסת התפריט. כדי להקצות את כללי CSS המשמשים ערך גלום במקרה זה, למשל, ul ul. אם אתה במסמך לפגוש מבנה דומה אחר, ייתכנו בעיות גדולות. במצבים כאלה, אתה צריך להשתמש למטרה מסוימת, למשל, סלקטורים או id-ID. פריסת מאמר מעל התפריט הנפתח נועד להכיר את העיצוב הכללי. שאר העבודה מוטל על כתפיך.
Similar articles
Trending Now