טיפים שימושיים

תפריט נפתח אופקי ב- CSS HTML

Pin
Send
Share
Send
Send


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

1. סימון HTML וסגנונות בסיסיים לתפריט נפתח ברמת קובץ מצורף יחיד

פריסת HTML של התפריט הנפתח האופקי שונה מהתפריט הרגיל בכך שמתווספת רשימה מקוננת לפריט הרשימה הרצוי

    או.

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

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

ישנן מספר דרכים להסתיר את התפריט הנפתח:
1) תצוגה: אין,
2) נראות: מוסתרת,
3) אטימות: 0,
4) טרנספורמציה: סולם Y (0),
5) שימוש בספריית jQuery.

ראו את Pen MaObbz של אלנה נזרובה (@nazarelen) ב- CodePen.

התפריט הנפתח מוסתר באמצעות .submenu , כאשר ריחוף מוצג עם .topmenu li: רחף. submenu .

התפריט מוסתר באמצעות .submenu מופיע .topmenu li: רחף .submenu .

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

התפריט מוסתר באמצעות .submenu מופיע .topmenu li: רחף .submenu . מכיוון שהשינוי של אלמנט ברירת המחדל מגיע מהמרכז, עליך להוסיף עבור .submenu , כלומר מהפינה השמאלית העליונה.

4. הגדלת התפריט הנפתח

דוגמא נוספת לתפריט נפתח. השפעת הגידול כאשר מופיע התפריט מתממשת על ידי הקטנת הגודל המקורי , על ריחוף, הגודל גדל ל. topmenu> li: רחף. submenu .

ראו את העט aNbGKv של אלנה נזרובה (@nazarelen) ב- CodePen.

2. תפריט נפתח פשוט של CSS3

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

3. התפריט הנפתח עם תיבת החיפוש

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

קוד HTML

לניווט, כתמיד, משתמשים ברשימה לא מסודרת (עם מחלקת ה- nav). פריטי תפריט רגילים הם פריטי רשימה (li) ומכילים קישורים (href) ללא שיעורים ותעודות זהות. יוצא דופן הם 3 אלמנטים מיוחדים בתפריט הנפתח האופקי הזה עם מזהים כאלה:

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

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

CSS לתפריט

1. סגנונות בסיסיים ופריטים בתפריט

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

2. עיצוב קישור

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

לאלמנט זה רוחב קבוע ומורכב מכמה חלקים - שדה קלט (#search_text) עם רקע ירוק וכפתור חיפוש (#search_button). בחלק מהדפדפנים צבע הרקע עשוי להיות אפור.

4. תפריט משנה נפתח

הנגיעה הסופית מאפשרת לנו ליצור תפריט נפתח של CSS שיורה עבור הפריט האחרון #options.

בסגנונות תוכלו למצוא את הכנסת תמונת הרקע של המשולש (triangel.png) כדי לציין את תפריט המשנה - אל תשכחו לציין את הנתיב הנכון לתמונה זו ותמונות אחרות בדוגמה. כאשר מופיעה תפריט משנה, היא מיושמת באמצעות מאפיין האטימות. פתרון סופי ב- codepen:

4. תפריט נפתח של שכבת CSS

באופציה זו משתמשים בעיקר בטכניקות CSS2.1, הפיתרון של מינוס הוא חדש - במרץ 2015. אם חסר לכם תת-רמה אחת בתפריט הנפתח האופקי של האתר, הדוגמה הזו מכילה שלוש בבת אחת. בעזרת הכיתוב הפסאודו-ילד היחיד עבור הפריטים, מתווסף לסמל "+" המציין נוכחות של תפריט משנה.

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

סה"כ

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

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

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

הוסף מחוון נפתח

לפני שנעשה את התפריט הנפתח ב- HTML עד הסוף, נתמודד עם אינדיקטור המציין נוכחות של רשימה נפתחת המצורפת לפריט תפריט מסוים (הסימן "+"):

לשם כך אנו משתמשים במרכיב הבדוי CSS3 (: only-child). במקרה זה, הוא בודק אם ישנם אלמנטים אחרים בתגיות של רכיב האב. אם לא, סימן הפלוס פשוט מוסר מכיוון שברירת המחדל הוא קיים לצד כל הפריטים. רואה + ליד וורדפרס והדרכות?

לסיכום

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

ואיך עשית את התפריט ב- HTML? אנא שתפו זאת בתגובות.

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

שלב 2) הוסף CSS:

/ * כפתור הנפתח * /
.dropbtn <
צבע רקע: # 4CAF50,
צבע: לבן,
ריפוד: 16px,
גודל גופן: 16px,
גבול: אף אחד,
>

- נחוץ כדי למקם את התוכן הנפתח * /
.דרופ -downdown <
מיקום: קרוב משפחה,
תצוגה: inline-block,
>

/ * תוכן נפתח (מוסתר כברירת מחדל) * /
.dropdown-content <
תצוגה: אין,
מיקום: מוחלט,
צבע רקע: # f1f1f1,
רוחב דקה: 160 פיקסלים,
תיבת צל: 0px 8px 16px 0px rgba (0,0,0,0.2),
אינדקס z: 1,
>

/ * קישורים בתפריט הנפתח * /
.dropdown-content a <
צבע: שחור,
ריפוד: 12px 16px,
קישוט טקסט: אין,
תצוגה: חסום,
>

/ * שינוי צבע הקישורים הנפתחים בריחוף * /
.dropdown-content א: רחף

/ * הצג את התפריט הנפתח במרחף * /
.dropdown: לרחף עם .dropdown-content

/ * שנה את צבע הרקע של כפתור התפריט כאשר התוכן הנפתח מוצג * /
.dropdown: לרחף .dropbtn

דוגמא לאיך זה עובד

השתמש בכל פריט כדי לפתוח תפריט נפתח, למשל, או

השתמש ברכיב מיכל (למשל

שלב 2) הוסף CSS:

/ * כפתור הנפתח * /
.dropbtn <
צבע רקע: # 4CAF50,
צבע: לבן,
ריפוד: 16px,
גודל גופן: 16px,
גבול: אף אחד,
>

- נחוץ כדי למקם את התוכן הנפתח * /
.דרופ -downdown <
מיקום: קרוב משפחה,
תצוגה: inline-block,
>

/ * תוכן נפתח (מוסתר כברירת מחדל) * /
.dropdown-content <
תצוגה: אין,
מיקום: מוחלט,
צבע רקע: # f1f1f1,
רוחב דקה: 160 פיקסלים,
תיבת צל: 0px 8px 16px 0px rgba (0,0,0,0.2),
אינדקס z: 1,
>

/ * קישורים בתפריט הנפתח * /
.dropdown-content a <
צבע: שחור,
ריפוד: 12px 16px,
קישוט טקסט: אין,
תצוגה: חסום,
>

/ * שינוי צבע הקישורים הנפתחים בריחוף * /
.dropdown-content א: רחף

/ * הצג את התפריט הנפתח במרחף * /
.dropdown: לרחף עם .dropdown-content

/ * שנה את צבע הרקע של כפתור התפריט כאשר התוכן הנפתח מוצג * /
.dropdown: לרחף .dropbtn

דוגמא לאיך זה עובד

יצרנו סגנון כפתור נפתח עם צבע רקע, ריפוד וכו '.

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

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

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

: בורר ריחוף משמש להצגת תפריט נפתח כאשר המשתמש מעביר את העכבר מעל לחצן הנפתח.

Pin
Send
Share
Send
Send