כיצד להכין תיבת dropdown ביולוגית עם CSS

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


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

הדוגמה

בדוגמה זו אשתמש בווידג’ט טקסט ב- עשרים עשרה נושא, ברירת המחדל החדשה החל מ- WordPress 3.2.

בעיקרון, ברגע שאתה מרחף מעל ה- div שמכיל את הווידג’ט, יופיע Div “מוסתר” שיהיה התיבה הנפתחת הביולוגית שלנו..

שימו לב בתמונה משמאל, התיבה הביולוגית האפורה לא תופיע אלא אם תרחפו את ה- div המכיל את הכותרת “ריחוף ביולוגי”..

הסלקטור

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

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

למרבה המזל עם וורדפרס, הוא פולט טונות של בוחרי CSS ייחודיים שבהם תוכלו להשתמש. בדוגמה זו, הוא מגרש את # test-3 בו נשתמש מעכשיו והלאה.

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

סימון HTML

בדוגמה זו ניתן להציב את סימון ה- HTML ישירות בתוך יישומון הטקסט של וורדפרס. זה מה שהכנת:

לילנד!

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

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

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

ביו רחף

לילנד!

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

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

דוגמא לחיים האמיתיים: החטיבה הנפתחת ביולוגית נמצאת בתוך תג li בתפריט הניווט שלי.

שתי הקווים הראשונים של CSS

שתי השורות הראשונות באמת הקימו את השאר, אז הכנסתי את זה לקטע משלה.

# text-3 {עמדה: יחסית; }
.נפתח ביולוגי {display: none; }

הסבר

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

פתק: אם אתה לא חובב התצוגה: אף אחד; או לחשוב שזה פוגע ב- SEO או במשהו, אתה יכול גם להשתמש במשהו בקווי המשרה: מוחלט; משמאל: -100000em; שבעצם תעביר אותו כל כך רחוק מהדף, אף אחד לא היה רואה אותו בכל מקרה.

שאר CSS

קוד ה- CSS הבא מטפל במראה ובתחושת התיבה הנפתחת ביולוגית.

# text-3: רחף עם העכבר. נפתח ביו {
בלוק תצוגה; מדד z: 99;
עמדה: מוחלט; למעלה: 25 פיקסלים;
רקע: #ccc; ריפוד: 10px 10px 0 10px;
גודל גופן: 11px; גובה קו: 18px; צבע: # 666;
}

הסבר

כאן אנו משתמשים סוף סוף בבורר # text-3 יחד עם: pseudoclass לרחף כדי לגרום לתיבה הנפתחת ביולוגית להופיע רק כשאתה מרחף מעל יישומון הטקסט.

  • שורה ראשונה: התצוגה: חסום; הופך את התיבה הנפתחת לביולוגית. מדד ה- z: 99; מבטיח שהתיבה תוצג מעל כל דבר אחר, ללא הפרעה.
  • שורה שנייה: זה ממקם את התיבה מתחת לצד כ 25 פיקסלים.
  • שורה שלישית: אלה רק כמה סגנונות קוסמטיים, המגדירים את הרקע לאפור בהיר עם ריפוד הגון.
  • שורה רביעית: כל זה טיפוגרפיה שמסבירה את עצמה.

פתק: לגבי השורה הראשונה, אם אתה משתמש בעמדה: מוחלט; משמאל: -100000em; טכניקה במקום תצוגה: אין; כמו שהסברתי לעיל, שימוש בתצוגה: חסום כאן לא יהיה נחוץ (מכיוון שממילא ההנחות של divs הם כאלמנטים ברמת החסימה). במקום זאת תצטרכו להשתמש בשמאל: 0; כדי להעביר את ה- div בחזרה לדף.

ולגבי התמונה, פשוט ציפה ושוליים ימניים.

.נפתח ביולוגי. תמונה {לצוף: שמאל; שוליים ימניים: 10 פיקסלים; }

שילוב וורדפרס

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

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

סיכום

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

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

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map