קידוד תפריט ניווט Breadcrumb חינני ב- CSS3
תפריטי ניווט וקישורים הם אולי רכיבי הממשק החשובים ביותר לפריסת אינטרנט. אלה הם שקעים רק עבור המשתמשים נסיעה בין דפים ולפעול עם כל התוכן שיצרת. Breadcrumb מציע פונקציונליות דומה עם יתרון נוסף של מעקב אחר המיקום הנוכחי שלך. תוכל לעשות זאת להציג את כל נתיבי הקישור הקודם כאשר המשתמש חוצה את היררכיית האתר שלך.
במדריך זה אנחנו נהיה יצירת תפריט ניווט מבריק עם כמה אפקטים CSS3. זה נבדק לעבוד בכל הדפדפנים העיקריים תואמי CSS3, אפילו דפדפנים ישנים יותר אשר אינם תומכים ב- CSS3 עדיין יעבדו אותו כראוי ברוב המקרים.
לפני שאנחנו לצלול לתוך קוד נדבר קצת על הפונקציונליות של הליקוי שלנו, הדרכה מלאה בקפיצה!
מציע את שביל
מסלול שביל אינו מורכב יותר מכל תפריט אחר. הסגנונות שלנו ישתמשו בתכונות CSS מורכבות הרבה יותר מרוב הדוגמאות, אך התבנית החשופה שלנו עדיין נמצאת במקום כדי להדריך משתמשים מדף אחד לאחר.
בדוגמה זו אנו נבצע מחדש סגנון דומה כתפריט התמיכה של Google. תוכל להציג את התפריט שלהם בדף התמיכה של Gmail כדי לקבל מושג לאן מועדות פנינו. בסופו של דבר אנחנו רוצים לספק את חוויית המשתמש הטובה ביותר שלנו עבור כל המשתמשים, ללא קשר למערכת ההפעלה שלהם או תוכנת הדפדפן, ולכן אני בנוי 2 דוגמאות קוד שונות כדי לתמוך השפלה חיננית בין דפדפנים ישנים.
הראשון נבנה באמצעות תמונות רקע מותאמות אישית ו יישור CSS תקין. כל האירועים לרחף ואירועים פעילים בנויים מראש עם רק כמה סגנונות CSS, אבל משתמשים שיש להם תמונות כבוי לא יוכלו לחוות את ההשפעות האלה! זו הסיבה שבניתי גם תפריט נראה דומה עם gradients CSS, פינות מעוגלות, ואת הצללים תיבת.
אם אתה מתוח על תמיכה בשני סגנונות אתה יכול לבחור בין אותם עבור האתר שלך. רוב המבקרים ישתמשו בתמונות כברירת מחדל, אך חפשו בכלי ניתוח האתרים שלכם אם אתם רוצים נתוני מבקרים מדויקים יותר.
מספיק מילים, בואו לקפוץ לתוך הפרויקט! נתחיל על ידי בניית מסגרת HTML בסיסית ולעבור לתוך אפקטים שונים בסגנון. ראשית כל אתה צריך להוריד את התמונה הנדרשת עבור הפרויקט.
Bare-Bones HTML
אני מתחיל את המסמך שלי עם תבנית דף HTML5 סטנדרטית. זה כולל את סוג ברירת המחדל, את CSS המקושר ואת כל האלמנטים הבסיסיים. הוספתי את הקוד הבא אם אתה רוצה להתחיל מסמך משלך בדרך זו. לידיעתך, אין היא אמורה להשפיע על אופן הצגת תמונת המסך שלך, לכן אל תהסס להשתמש בתבנית הדף שלך, אם תרצה בכך.
דף ברירת מחדל
אני לפצל את הקוד לשני בלוקים שונים. הבלוק הראשון עם תמונות בנוי בצורה קצת שונה, ואחריו התפריט שלנו ללא תמונות. כל קבוצה ניתנת משלה תעודת זהות כך שנוכל לזהות את התוכן הרבה יותר קל. אם אתה גם אוהד של jQuery אתה יכול להשתמש #ID selector כדי לתפעל את כל האלמנטים הפנימיים של DOM.
ראשית יש לנו div המכיל עם מזהה “פירורי לחם“. בקובץ ההדגמה השתמשתי זה כדי להפריד את הקוד שלנו ולהעביר אותו על פני הדף עם כמה שולי הוסיף. תוכל להסיר את ה- div החיצוני הזה, אך תצטרך לשנות את הסגנון מחדש כך שיתאים לתבנית החדשה. זה באמת לא מזיק לעזוב מכולה מאז תוכל לשלוט על המיקום הרבה יותר קל.
פנימי אני כבר בנוי את הלחם באמצעות רשימת unordered. יש כל כך הרבה דרכים ייחודיות כדי להתאים אישית רשימות HTML מנוסח, ו breadcrumbs הם רק אחד מהם. ייתכן שתבחין שנתתי את פריט הרשימה הראשונית א מעמד of “ראשון“. זה נחוץ עבור חלק ריפוד נוסף כדי לשמור על פריטי התפריט בתוך שורת. בנוסף קטן בלוקים נוסף כך יש לנו גבול שמאל ימין אשר אינו חופף את תמונת הרקע.
בנוסף כל קישור עוגן נטוע עם מספר יורד עבור z-index נכס. באמצעות תמונות נצטרך יש כל אחד מהקישורים שלנו חופפים כדי להציג את חץ הלחיצה כראוי. הדרך הקלה ביותר להשיג זאת היא התאמת Z- אינדקס אז כל קישור שכבות הבא. התחלתי עם 9 ועבד משם, אבל אם יש לך יותר קישורים בתפריט שלך רק להתחיל עם מספר שלם גבוה יותר.
תפריט ללא תמונות
ל מחליקים בחן את הליקוי שלנו אנו זקוקים לערכה משנית של פריטי רשימה של HTML. אם אתה מנסה לחזור על ניווט אחד אתה יכול להשתמש jQuery לזהות את סוכן הדפדפן ולהחיל מזהה בהתאם. לצערנו, זה לא תמיד אמין (עבור משתמשים ניידים מסוימים, למשל). פתרון נוסף הוא כוללים גיליון סגנונות IE ספציפי ו להסתיר או להציג את התפריט המתאים ביותר - אבל כמובן, אפשרות זו היא עבור Internet Explorer בלבד.
breadcrumb2 הוא מזהה החדש שלנו המשמש למקד את התפריט ללא תמונות. שמירה על דפוס זה השתמשתי פירורים כמעמד של הרשימה הלא מסודרת. שים לב כי הסיבה שאנחנו משתמשים שיעורים J שלה פשטות לשכפל תפריטים אלה, אז כאשר אתה רוצה כמה breadcrumbs שונים על הדף שלך, עם שיעורים אלה לא פעם להפוך לבעיה.
שמרנו על .ראשון אך נוספה גם תוספת .אחרוןבכיתה על הפריט האחרון ברשימה. ללא תמונות אנחנו לא יכולים לשכפל את החצים עבור כל פריט בתפריט הניווט, ולכן השתמשתי כמה פינות מעוגלות כדי לתבל את התפריט המשני. .ראשון בכיתה ו .אחרון לתפעל את רדיוס הגבול על הקצוות מאוד של התפריט שלנו כדי ליצור ממש מגניב אינטרנט 2.0 בסגנון נראה.
CSS הזזה רקע תמונות
עבור חלק מההשפעות הפשוטות יותר, הצמדתי את שתי הפירמות יחד עם בניית המאפיינים. זה שימושי כמו שזה לא רק חוסך קצת מקום, אבל כאשר חוזר לערוך סגנונות זה קל יותר להתאים אישית המראה שלך.
לשניהם #breadcrumb ו # breadcrumb2 אני קבעתי style-style: none; כך שלכל הפריטים הפנימיים לא יהיו סמנים. אתה יכול להשאיר את אלה אם אתה אוהב את האפקט, אבל מצאתי HTML הופך מייגע לעבוד מסביב וזה הרבה יותר קל ליצור סמלים חדשים. אז בואו נתחיל עם שלנו .פירורים מעמד.
.פירורים Display: Block; .crumbs li display: inline; crumbs li.first padding-left: 8px; .crumbs li a, .crumbs li a: link, .crumbs li a: מבקר color: # 666; בלוק תצוגה; צף: משמאל; font-size: 12px; שוליים-שמאל: -13 פיקסלים; ריפוד: 7px 17px 11px 25px; מקומות קרובים text-decoration: none; . crumbs li a background-image: url ('... /img/bg-crumbs.png'); רקע-לחזור: לא לחזור; מיקום רקע: 100% 0; מקומות קרובים . crumbs li a: hover color: # 333; background-position: 100% -48px; הסמן: מצביע; .crumbs li a: פעיל color: # 333; background-position: 100% -96px; crumbs li.first a span height: 29px; רוחב: 3px; border-left: 1px solid # d9d9d9; תפקיד מוחלט top: 0px; משמאל: 0px; אנחנו הגדר את הרשימה הלא מסודרת שלנו בלוק אז שום דבר אחר זוחל מסביב לאזור. שימו לב לפריטי הרשימה מוצג בשורה בעוד כל קישור עוגן ניתנת הרבה יותר מקום להתפשט. אנחנו רוצים שכל החלל בתפריט שלנו יהיה ניתן ללחיצה כך שזה דורש בניית העוגנים שלנו כאלמנטים בלוק.
השתמשתי בתמונה שנקראה bg-crumbs.png על הרקע. זה נקרא גיליון ספרייט פשוט ב- CSS, או לחילופין א דלתות הזזה טכניקה. כלומר, כאשר המשתמש מרחף או לוחץ על קישור אנחנו מעבירים את מיקום הרקע כדי להציג את הסגנון המעודכן. תמונה אחת זו מכילה את כל שלושת העיצובים שאנו זקוקים להם כדי ליצור את הרקע של הלחיצה במיקומים שונים, כך שנוכל להשתמש ב- מיקום הרקע רכוש כדי למקם מחדש על סמך אינטראקציה עם המשתמש.
אפקטים מותאמים אישית עם CSS3
עיצוב המקלדת המקורי הוא הרבה יותר פשוט ליצור. זה ניכר כי הרבה תכונות CSS הם בסיסיים יותר ממה שאתה יכול לדמיין, אבל עכשיו אנחנו מתחילים להתמקד duplicating אלה עם תופעות רק CSS3!
סגנונות בודדים תופסים הרבה מקום אז אני אשבור אותם לתוך 2 בלוקים קוד.
.style view13 (התצוגה: גוש; margin-left: 27px; ריפוד: 0; padding-top: 10px; .crumbs2 li display: inline; .crumbs2 li a, .crumbs2 li a: link, .crumbs2 li a: מבקר color: # 666; בלוק תצוגה; צף: משמאל; font-size: 12px; ריפוד: 7px 16px 7px 19px; מקומות קרובים text-decoration: none; border: 1px solid # d9d9d9; border-right-width: 0px; .crumbs2 li a background-image: -webkit-gradient (ליניארי, שמאל תחתון, שמאל למעלה, צבע-עצירה (0.45, rgb (241,241,241)), צבע (0.73, rgb (245,245,245)); תמונת רקע: -Moz-linear-gradient (מרכז תחתית, rgb (241,241,241) 45%, rgb (245,245,245) 73%); / * עבור Internet Explorer 5.5 - 7 * / מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5); / * עבור Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f1f1f1, endColorstr = # f5f5f5)"; .crumbs2 li.first a border-top-left-radius: 5px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; .crumbs2 li.last a border-right-width: 1px; border-bottom-right-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px;
ה .פירורים התפריט משתמש מעברי CSS לשכפל את אפקטי הרקע. אם אתה לא מכיר את אלה אני ממליץ מאוד CSS טריקים 'מדריך על CSS3 Gradients אשר אמור להביא אותך עד שימוש gradients CSS3 ביעילות. הם כללו תכונות נוספות עבור דפדפני Microsoft ו- Opera, אך אלה אינם נתמכים במלואם בכל המקרים. אני לא כללה אותם בקוד הדגמה כאן - אבל זה טוב כדי להבין את כל האפשרויות.
-webkit-gradient ו -moz-linear- שיפוע הם פתרונות הליבה אשר עושים את רוב העבודה. כללתי קוד ישן לגירסאות ישנות יותר של Internet Explorer, אבל זה לא מובטחת כדי להציג כראוי כל הזמן (אנחנו משתמשים בטכניקות עיבוד תמונה חזקה, אחרי הכל). שימו לב שהגדרתם שני קודי צבע RGB ו- hex בין מאפייני הרקע. אתה יכול לדבוק בשיטה אחת או אחרת אם אתה יותר נוח.
ה רדיוס הגבול הקוד מוחל רק על הניווט שלנו בלחיצה משנית. זה נותן אפקט מסודר בצד שמאל למעלה והתחתון של התפריט כולו breadcrumb שלנו. הבר נראה כמעט פופ את הדף - באמת אפקט פנטסטי על דפדפנים התומכים סגנונות, אבל אלה רק לכסות מדינות ברירת המחדל עבור הקישורים שלנו. עכשיו, בואו לבנות אפקטים מרחפים דומים לתמונות השתמשנו לעיל.
גבולות וצללים
בכל פעם שמישהו מרחף מעל קישור שאנחנו רוצים לעדכן כמה דברים. תחילה עלינו להכהות את צבעי הגבול על החלק העליון והתחתון של האלמנט הפעיל שלנו. זה יכול לראות את התמונות גם עבור שניהם לרחף ומצבים פעילים.
.crumbs2 li a: רחף border-top-color: # c4c4c4; color-bottom-color: # c4c4c4; תמונת רקע: -Webkit- שיפוע (ליניארי, שמאל למטה, שמאל למעלה, צבע (0.45, rgb (241,241,241)), צבע (0.73, rgb (248,248,248)); תמונת רקע: -Moz-linear-gradient (מרכז תחתית, rgb (241,241,241) 45%, rgb (248,248,248) 73%); / * עבור Internet Explorer 5.5 - 7 * / מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1); / * עבור Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # f8f8f8, endColorstr = # f1f1f1)"; צבע: # 333; -moz-box-shadow: 0px 2px 2px # e8e8e8; -webkit-box-shadow: 0px 2px 2px # e8e8e8; box-shadow: 0px 2px 2px # e8e8e8; .crumbs2 li a: פעיל border-top-color: # c4c4c4; color-bottom-color: # c4c4c4; תמונת רקע: -Webkit-gradient (ליניארי, תחתון שמאל, שמאל למעלה, צבע-עצירה (0.45, rgb (224,224,224)), צבע (0.73, rgb (235,235,235)); תמונת רקע: -Moz-linear-gradient (מרכז תחתית, rgb (224,224,224) 45%, rgb (235,235,235) 73%); / * עבור Internet Explorer 5.5 - 7 * / מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0); / * עבור Internet Explorer 8 * / -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = # ebebeb, endColorstr = # e0e0e0)"; box-shadow: -1px 1px 1px 0px #dadada inset; -webkit-box-shadow: -1px 1px 1px 0px #dadada inset; -moz-box-shadow: -1px 1px 1px 0px #dadada inset; צבע: # 333;
אני משתמש באותו קוד מדוייק כמו שהשתמשנו לעיל, אבל הפעם הצבעים הם שונים מאוד אם אתה שם לב לערכים RGB שלנו. כל אחת מהמדינות תהפוך את צבע הטקסט לכהה יותר # 333, אך מתארים אחרים השתנו במקצת כדי להתאים לפקודות המשתמש.
ב'רחף 'תראה א אפקט מבריק מבריק אשר יחד עם גבולות כהים נותן את סגנונות הדף מוקפץ. אם תלחץ והחזק תקבל את המצב הפעיל שבו תכונות רקע צבע כהה. אפקט זה גורם לחצנים להיראות הם למעשה “לחוץ” בדף.
אנחנו גם החלים צל קופסא מאפיינים מן מפרט CSS3 חדש. -WebKit, -moz, ואת סגנונות ברירת המחדל משמשים עם אותן הגדרות. ריחוק מציג א צל קל יוצא מהחלק התחתון של הקישור שנבחר. כאשר הפעיל הצל ייווצר על הגב העליון, הימני והתחתון. אפקט זה נוצר עם הַבלָעָה מילת מפתח שנוספה לסוף כל שורה של מאפיין צל. שוב טריקים CSS הוא החבר הכי טוב שלך כאן עם מאמר מדהים על תיבת צל, כפי שהוא מדבר על התחביר ואת השימוש הנכון שלה CSS3.
בונוס: סגנונות נוספים
בנוסף קוד הדרכה כללתי תמונות רקע נוספות עם ערכות צבעים מותאמים. אני sampled מן הרקע המקורי ומשמש Adobe Photoshop כדי ליצור כמה וריאציות אשר ניתן להחיל לתוך אתר האינטרנט שלך.
אלה קובצי בונוס כלולים בקובץ המקור אשר ניתן להוריד בפורמט. zip ארכיון בסעיף להלן.
אתה יכול לבדוק את התמונה לעיל כדי לקבל מושג על מה אני מדבר. אם אתה צריך ערכת צבעים ספציפית פופ פתוח פוטושופ> תמונה> התאמות> גוון / רוויה כדי לשנות את ערכת הצבעים כדי להתאים את התבנית שלך, זוכר בדוק את האפשרות Colorize בחלונית גוון / רוויה אם הצבע לא השתנה כלל.
סיכום
הדרכה זו צריכה להיות gotten אתה מכיר כמה טכניקות CSS3 חדש. יצרנו שני תפריטי לחם מדהימים בסגנון מנוסח בצורה דומה ובנו את זה בצורה שבה זה יכול להשפיל בחינניות בדפדפנים ישנים. בנוסף אני כבר הציע קוד הדגמה שלי וכמה תמונות בונוס לך לשחק עם.
האם אתה אוהב במיוחד את הסגנונות שבנינו כאן? או אולי יש לך שאלות או רעיונות כיצד לשפר את קוד הדרכה? בבקשה לחלוק את המחשבות שלך איתנו באזור הדיון להלן, ואל תשכח להוריד את קבצי המקור, כך שתוכל לשחק עם ההדגמה!
עוד CSS3 הדרכות
השתוקקות ל CSS3 יותר? להלן המאמרים שלנו כדי שתוכל להבין CSS3 באופן תיאורטי ומעשי!
- CSS3: יצירת עדכון RSS
- CSS3: יצירת שדה חיפוש
- CSS3: יצירת טופס יצירת AJAX
- CSS3: בניית דפי HTML5 / CSS3
