01 of 06
כיצד ליצור ניווט באמצעות כרטיסיות עם CSS ולא תמונות
ניווט בדפי אינטרנט הוא סוג של רשימה, וניווט עם לשוניות הוא כמו רשימה אופקית. זה די קל ליצור ניווט לשוניות אופקי עם CSS, אבל CSS 3 נותן לנו עוד כמה כלים כדי לגרום להם להיראות אפילו יותר נחמד.
הדרכה זו תעביר אותך דרך HTML ו- CSS הדרושים כדי ליצור תפריט עם כרטיסיות CSS. לחץ על קישור זה כדי לראות כיצד הוא ייראה.
זה לשוניות התפריט אינו משתמש בתמונות , רק HTML ו- CSS 2 ו CSS 3. זה יכול להיות בקלות לערוך כדי להוסיף כרטיסיות נוספות או לשנות את הטקסט בהם.
תמיכה בדפדפן
תפריט כרטיסייה זו יעבוד בכל הדפדפנים העיקריים . Internet Explorer לא יציג את הפינות המעוגלות, אבל חוץ מזה, הוא יציג כרטיסיות בדיוק כמו Firefox, Safari, Opera ו- Chrome.
02 מתוך 06
כתוב את רשימת התפריטים
כל תפריטי הניווט והלשוניות הם רק רשימה לא מסודרת. אז הדבר הראשון שאתה רוצה לעשות זה לכתוב רשימה לא מסודרים של קישורים למקום שבו אתה רוצה את הכרטיסייה לשוניות ללכת.
הדרכה זו היא בהנחה שאתה כותב HTML שלך בעורך טקסט, כי אתה יודע איפה למקם את HTML עבור התפריט שלך בדף האינטרנט שלך.
רשום את הרשימה הלא מסודרת כך:
- class = "tablist">
- CSS 3
- id = "current"> כרטיסיות
- ל
- תפריטים
תבחין שהקוד קורא שני דברים: class = "tablist" ו- id = "current". הראשון נדרש . אם לא תשים את רשימת tablist ברשימה הלא מסודרת, הכרטיסיות לא יפעלו. השני הוא אופציונלי. שים את id = "current" בכרטיסייה שבה תרצה להיות מודגשת בדף זה. אני בדרך כלל משתמש זה כדי להדגיש את הדף שאני על, אבל אתה יכול להשתמש בו כדי להדגיש את הכרטיסייה החשובה ביותר. לחלופין, תוכל להסיר אותו לחלוטין.
03 מתוך 06
התחל לערוך את גיליון הסגנון שלך
ניתן להשתמש בגיליון סגנונות חיצוני או בגיליון סגנונות פנימי . דף התפריט לדוגמה משתמש בגיליון סגנונות פנימי ב
של המסמך.ראשית אנחנו יהיה סגנון 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; }04 מתוך 06
עריכת רשימת פריטים LI
לאחר שתגדיר את רשימת unordered שלך, אתה צריך סגנון תגי LI בתוכו. אחרת, הם יפעלו כמו רשימה רגילה וכל מעבר לשורה הבאה מבלי לשים את הכרטיסיות כראוי.
ראשית, הגדר את סגנונות הסגנון שלך:
.tablist li {}אז אתה רוצה לצוף את הכרטיסיות שלך, כך שהם בשורה על המישור האופקי. צף: משמאל;
ואל תשכח להוסיף קצת מרווח בין הכרטיסיות, כך שהם לא יתמזגו יחד. שוליים-ימין: 0.13em;
סגנונות ה- li שלך אמורים להיראות כך:
.tablist li {float: משמאל; שוליים-ימין: 0.13em; }05 מתוך 06
מה שהופך את הכרטיסיות נראה כמו כרטיסיות עם CSS 3
כדי לבצע את רוב ההרמה הכבדה בגיליון הסגנון הזה, אני ממקד לקישורים בתוך הרשימה הלא מסודרת. דפדפנים מזהים שקישורים עושים יותר בדף אינטרנט מאשר תגים אחרים, ולכן קל יותר לגרום לדפדפנים ישנים לעמוד בדברים כמו מצבי מעבר עם צירוף אותם לתג העוגן (קישורים). אז קודם לכתוב את מאפייני הסגנון שלך:
.tablist li a {} .tablist li a: העבר את העכבר {}מכיוון שכרטיסיות אלה צריכות לפעול כמו כרטיסיות ביישום, אתה רוצה שכל האזור של הכרטיסייה יהיה ניתן ללחיצה, ולא רק את הטקסט המקושר. כדי לעשות זאת, אתה צריך להמיר את התג מ זה נורמלי " inline " המדינה לתוך רכיב בלוק . בלוק תצוגה; (אם אתה מעוניין לדעת יותר על ההבדל, קרא בלוק ברמה לעומת אלמנטים מוטבעים ).
לאחר מכן, דרך קלה לאלץ את הכרטיסיות להיות סימטריות אחת עם השנייה, אבל עדיין להגמיש כדי להתאים את רוחב הטקסט היא להפוך את הריפוד הימני והשמאלי אותו. השתמשתי ריפוד נכס קצר כדי להגדיר את החלק העליון והתחתון ל 0 ואת ימין ושמאל עד 1:00. ריפוד: 0 1em;
כמו כן בחרתי להסיר את הקישור מדגיש, כך כרטיסיות להיראות פחות קישורים. אבל אם הקהל שלך עלול להיות מבולבל על ידי זה, לעזוב את הקו הזה. link-decoration: none;
על ידי הצבת גבול דק סביב הכרטיסיות, זה גורם להם להיראות כמו כרטיסיות. השתמשתי הגבול קיצור נכס לשים את הגבול סביב כל ארבעת הצדדים הגבול: 0.06em מוצק # 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 הכלל הם: -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 דפדפנים תואמים. הדף הבא נותן לך אפשרות אחת נוספת אתה יכול להשתמש בו כדי להתלבש זה אפילו יותר.
06 מתוך 06
סמן את הכרטיסייה הנוכחית
ב- HTML שיצרתי, ל- UL היה רכיב רשימה אחד עם מזהה. זה מאפשר לך לתת LI אחד בסגנון שונה משאר. המצב הנפוץ ביותר הוא להפוך את הכרטיסייה הנוכחית להתבלט בדרך כלשהי. דרך נוספת לחשוב על זה היא שאתה רוצה אפור את הכרטיסיות כי הם לא חיים. לאחר מכן אתה משנה היכן הוא מזהה את הדפים השונים.
אני בסגנון הן #current A תג וכן את #current A: לרחף sta כך ששניהם שונים במקצת. ניתן לשנות את הצבע, צבע הרקע, אפילו גובה, רוחב וריפוד של אלמנט זה. הפוך את השינויים מה הגיוני בתכנון שלך.
.tablist li # current a {background-color: # 777; צבע: #fff; } .tablist li # current a: hover {background: # 39C; }וסיימת! יצרת רק תפריט עם לשוניות עבור אתר האינטרנט שלך.