ניווט בדפי אינטרנט הוא סוג של רשימה, וניווט עם לשוניות הוא כמו רשימה אופקית. זה די קל ליצור ניווט לשוניות אופקי עם CSS, אבל CSS 3 נותן לנו עוד כמה כלים כדי לגרום להם להיראות אפילו יותר נחמד.
הדרכה זו תעביר אותך דרך HTML ו- CSS הדרושים כדי ליצור תפריט עם כרטיסיות CSS. לחץ על קישור זה כדי לראות כיצד הוא ייראה.
תפריט לשוניות זה משתמשאין תמונות, רק HTML ו- CSS 2 ו CSS 3. זה יכול להיות ערוך בקלות להוסיף כרטיסיות או לשנות את הטקסט בהם.
תמיכה בדפדפן
תפריט כרטיסייה זו יפעלכל הדפדפנים העיקריים. Internet Explorer לא יציג את הפינות המעוגלות, אבל אחרת הוא יציג כרטיסיות בדיוק כמו Firefox, Safari, Opera ו- Chrome.
כתוב את רשימת התפריטים
כל תפריטי הניווט והלשוניות הם רק רשימה לא מסודרת. אז הדבר הראשון שאתה רוצה לעשות זה לכתוב רשימה לא מסודרים של קישורים למקום שבו אתה רוצה את הכרטיסייה לשוניות ללכת.
הדרכה זו היא בהנחה שאתה כותב HTML שלך בעורך טקסט, כי אתה יודע איפה למקם את HTML עבור התפריט שלך בדף האינטרנט שלך.
רשום את הרשימה הלא מסודרת כך:
class = "tablist">CSS 3id = "current"> כרטיסיותלתפריטים
class = "tablist"וid = "current".הראשון הוא נדרש. אם אתה לא שם אתtablistבכיתה על רשימת unordered שלך, הכרטיסיות לא יעבוד. השני הוא אופציונלי. שים אתid = "current"בכרטיסייה שבה תרצה להדגיש בדף זה. בדרך כלל אנו משתמשים בזה כדי להדגיש את הדף שבו אנו נמצאים, אך תוכל להשתמש בו כדי להדגיש את הכרטיסייה החשובה ביותר. לחלופין, תוכל להסיר אותו לחלוטין.
התחל לערוך את גיליון הסגנון שלך
ניתן להשתמש בגיליון סגנונות חיצוני או בגיליון סגנונות פנימי. דף התפריט לדוגמה משתמש בגיליון סגנונות פנימי
של המסמך.ראשית אנחנו יהיה סגנון UL עצמה
זה המקום שבו אנו משתמשים בכיתהtablist ב- HTML. במקום לעצב את התג UL, אשר היה סגנון כל רשימות unordered בדף שלך, אתה צריך סגנון רק בכיתה UL.tablist אז הערך הראשון ב- CSS שלך צריך להיות:
.tablist {}
אנחנו אוהבים לשים את הסוף מתולתל הסוף (}) מראש, אז אנחנו לא שוכחים את זה מאוחר יותר.
למרות שאנו משתמשים בתג רשימה לא מסודרת עבור רשימת תפריטי הכרטיסייה, אבל אנחנו לא רוצים שכל תבליטים או מספרים יתחילו לזחול. אז הסגנון הראשון שאתה צריך להוסיף הוא.style-style: none; זה אומר לדפדפן כי למרות שזה רשימה, זה רשימה ללא סגנונות שנקבעו מראש (כמו כדורים או מספרים).
לאחר מכן, תוכל להגדיר את גובה הרשימה כך שיתאים למרחב הרצוי. בחרנו 2em לגובה שלנו, כי זה כפול בגודל הגופן הסטנדרטי, והוא נותן בערך חצי מהם מעל ומתחת לטקסט של הכרטיסייה.גובה: 2em; אבל אתה יכול להגדיר את הרוחב שלך לגודל הרצוי. תגי UL ייקח באופן אוטומטי 100% מהרוחב, כך שאם לא תרצה שהוא יהיה קטן יותר מהמכל הנוכחי, תוכל להשאיר את הרוחב.
לבסוף, אם גיליון הסגנון הראשי שלך אינו כולל הגדרות קבועות מראש עבור תגי UL ו- OL, מומלץ לשים אותן. משמעות הדבר היא שעליך לכבות את הגבולות, השוליים והריפוד ב- UL. ריפוד: 0; שוליים: 0; גבול: none; אם כבר איפסת את תג UL, תוכל לשנות את השוליים, הריפוד או הגבול למשהו שמתאים לעיצוב שלך.
הכיתוב הסופי .tablist שלך אמור להיראות כך:
.tablist {list-style: none; גובה: 2em; ריפוד: 0; שוליים: 0; גבול: none; }
עריכת רשימת פריטים LI
לאחר שתגדיר את רשימת unordered שלך, אתה צריך סגנון תגי LI בתוכו. אחרת, הם יפעלו כמו רשימה רגילה וכל מעבר לשורה הבאה מבלי לשים את הכרטיסיות כראוי.
ראשית, הגדר את סגנונות הסגנון שלך:
.tablist li {}
אז אתה רוצה לצוף את הכרטיסיות שלך, כך שהם בשורה על המישור האופקי. צף: משמאל;
ואל תשכח להוסיף קצת מרווח בין הכרטיסיות, כך שהם לא יתמזגו יחד. שוליים-ימין: 0.13em;
סגנונות ה- li שלך אמורים להיראות כך:
.tablist li {float: משמאל; שוליים-ימין: 0.13em; }
מה שהופך את הכרטיסיות נראה כמו כרטיסיות עם CSS 3
כדי לבצע את רוב ההרמה הכבדה בגיליון הסגנונות הזה, אנו ממקדים את הקישורים בתוך הרשימה הלא מסודרת. דפדפנים מזהים שקישורים עושים יותר בדף אינטרנט מאשר תגים אחרים, ולכן קל יותר לגרום לדפדפנים ישנים לעמוד בדברים כמו מצבי מעבר עם צירוף אותם לתג העוגן (קישורים). אז קודם לכתוב את מאפייני הסגנון שלך:
.tablist li a {} .tablist li a: העבר את העכבר {}
מכיוון שכרטיסיות אלה צריכות לפעול כמו כרטיסיות ביישום, אתה רוצה שכל האזור של הכרטיסייה יהיה ניתן ללחיצה, ולא רק את הטקסט המקושר. כדי לעשות זאת, אתה צריך להמיר את התג מ זה נורמלי "inline" המדינה לתוך רכיב בלוק. בלוק תצוגה; (אם אתה מעוניין לדעת יותר על ההבדל, קרא בלוק ברמה לעומת אלמנטים מוטבעים).
לאחר מכן, דרך קלה לאלץ את הכרטיסיות להיות סימטריות אחת עם השנייה, אבל עדיין להגמיש כדי להתאים את רוחב הטקסט היא להפוך את הריפוד הימני והשמאלי אותו. השתמשנו המאפיין קצר ריפוד כדי להגדיר את החלק העליון והתחתון ל 0 ואת ימין ושמאל עד 1:00. ריפוד: 0 1em;
בנוסף, בחרנו להסיר את הקישור, כך שהכרטיסיות ייראו פחות כמו קישורים.אבל אם הקהל שלך עלול להיות מבולבל על ידי זה, לעזוב את הקו הזה. link-decoration: none;
על ידי הצבת גבול דק סביב הכרטיסיות, זה גורם להם להיראות כמו כרטיסיות. השתמשנו בנכס קצרנות הגבול כדי לשים את הגבול סביב כל ארבעת הצדדים border: 0.06em solid # 000; ואז השתמשו במאפיין הגבול התחתון כדי להסיר אותו מלמטה. border-bottom: 0;
לאחר מכן ערכנו כמה התאמות לגופן, צבע וצבע הרקע של הכרטיסיות. הגדר אותם לסגנונות התואמים את האתר שלך. font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; צבע: # 000; צבע רקע: #ccc;
כל הסגנונות הנ"ל צריך ללכת בורר.tablist li a, את הכלל כך שהם משפיעים על תגי עוגן באופן כללי. לאחר מכן, כדי להפוך את הכרטיסיות ללחיצות יותר, עליך להוסיף מספר חוקי מדינה.tablist li a: רחף.
אנחנו אוהבים לשנות את צבע הטקסט והרקע כדי להפוך את הכרטיסייה פופ כאשר אתה העכבר מעל זה. רקע: # 3cf; צבע: #fff;
וכללנו תזכורת נוספת לדפדפנים שאנחנו רוצים שהקישור יישאר ללא קו תחתון. text-decoration: none; שיטה נפוצה נוספת היא להפעיל את קו תחתון בחזרה בעת העכבר מעל הכרטיסייה. אם אתה רוצה לעשות את זה, לשנות את זה טקסט-קישוט: קו תחתון;
אבל איפה CSS 3?
אם אתה כבר שם לב, אתה כנראה שם לב כי לא היו כל CSS 3 סגנונות המשמשים את הסגנון גיליון. זה יש את היתרון של עבודה בכל דפדפן מודרני, כולל Internet Explorer. אבל זה לא עושה את הכרטיסיות נראה כמו יותר תיבות מרובע. על ידי הוספת רדיוס של רדיוס גבול 3 בסגנון CSS (והוא משויך לשיחות ספציפיות לדפדפן), אתה יכול להפוך את הקצוות מעוגלים, כדי להיראות יותר כמו כרטיסיות בתיקייה מנילה.
סגנונות אתה צריך להוסיף את .tablist li a הכלל you -webitit-border-top-right-radius: 0.50em; -webitit-border-top-left-radius: 0.50em; -Moz-border-radius-topright: 0.50em; -Moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em;
אלה הם כללי הסגנון הסופי שכתבנו:
.tablist li a התצוגה: block; ריפוד: 0 1em; text-decoration: none; border: 0.06em solid # 000; border-bottom: 0; font: bold 0.88em / 2em arial, geneva, helvetica, sans-serif; צבע: # 000; צבע רקע: #ccc; / * CSS 3 אלמנטים * / webkit-border-top-right-radius: 0.50em; -webitit-border-top-left-radius: 0.50em; -Moz-border-radius-topright: 0.50em; -Moz-border-radius-topleft: 0.50em; border-top-right-radius: 0.50em; border-top-left-radius: 0.50em; } .tablist li a: העבר בריחוף {background: # 3cf; צבע: #fff; text-decoration: none; }
עם סגנונות אלה, יש לך תפריט עם כרטיסיות שעובד בכל הדפדפנים העיקריים ונראה כמו כרטיסיות מודפסות נחמד CSS 3 דפדפנים תואמים. הדף הבא נותן לך אפשרות אחת נוספת אתה יכול להשתמש בו כדי להתלבש זה אפילו יותר.
סמן את הכרטיסייה הנוכחית
ב- HTML שיצרנו, ל- UL היה רכיב רשימה אחד עם מזהה. זה מאפשר לך לתת LI אחד בסגנון שונה משאר. המצב הנפוץ ביותר הוא להפוך את הכרטיסייה הנוכחית להתבלט בדרך כלשהי. דרך נוספת לחשוב על זה היא שאתה רוצה אפור את הכרטיסיות כי הם לא חיים. לאחר מכן אתה משנה היכן הוא מזהה את הדפים השונים.
אנחנו בסגנון הן #current A תג וכן את #current A: לרחף sta כך ששניהם מעט שונה. ניתן לשנות את הצבע, צבע הרקע, אפילו גובה, רוחב וריפוד של אלמנט זה. הפוך את השינויים מה הגיוני בתכנון שלך.
.tablist li # current a {background-color: # 777; צבע: #fff; } .tablist li # current a: hover {background: # 39C; }
וסיימת! יצרת רק תפריט עם לשוניות עבור אתר האינטרנט שלך.
