תוֹכֶן
להבין את הדרך הטובה ביותר לייעל את הניווט למכשירים ניידים הוא מאתגר לחלוטין. הקהילה שלנו העלתה המון גישות שונות לטיפול בנושא זה, כל אחת עם מערכת היתרונות והחסרונות שלה.
בעבר דגלתי לעתים קרובות בהמרת ניווט מבוסס רשימה מסורתית ל- בחר לנייד (ראה דוגמה למטה). זה מושג פשוט וקל ליישום ואני אוהב את האלגנטיות של הגישה, אבל העובדה שאתה צריך להסתמך על JavaScript כדי שיהיה שמיש אף פעם לא ממש ישבה איתי טוב. בהיותי תומך נלהב בשיפור פרוגרסיבי, ידעתי שחייבת להיות דרך טובה יותר.
תמיד התאהבתי בירידות נפילות של CSS טהור, אך באופן מסורתי הם סמכו על כך :לְרַחֵף. ורחף, כידוע, לא רלוונטי בתרחישים מבוססי מגע, כך שזה נראה כמו מבוי סתום. אבל אז עלה בדעתי: :יַעַד הייתה התשובה לתפילותיי.
כפי שאתה בוודאי יודע, בורר המטרה של פסאודו היעד (:יַעַד) מאפשר לך להחיל סגנונות על אלמנטים המוזכרים במזהה השבר של כתובת אתר. לדוגמה:
http: //website.tld/my-page/#content
בכתובת אתר זו, מזהה השבר הוא "תוכן", מה שיגרום לדפדפן לגלול כדי להביא אלמנט עם תְעוּדַת זֶהוּת של "תוכן" לתצוגה. קלי קלות. לאחר מכן נוכל להחיל סגנונות על אלמנט זה כאשר הוא ממוקד באמצעות :יַעַד:
: יעד {רקע: # F6FD86;}
כשמכללת ניקולס פנתה לחברה שלי בנושא עיצוב מחדש של מיקרו-אתר סטודנטים פוטנציאלי שלהם, הפרויקט הציג את ההזדמנות המושלמת לבדוק את התיאוריה שלי אודות :יַעַד.
העיצוב
המיקרו-אתר הוא למעשה רק שני עמודים - טופס לאיסוף מידע על סטודנט פוטנציאלי ודף תודה המרכיב מידע רלוונטי על התוכניות של מכללת ניקולס על סמך תגובותיה - אך הוא כולל שפע של קישורי ניווט שיעזרו לה לעשות דברים כמו לוח זמנים. ביקור, התחל בתהליך הגשת הבקשה או קבל הנחיות לבית הספר. בנוסף לאותם קטעי ניווט קריטיים, האתר כולל גם אוסף של קישורי ניווט המספקים גישה ליותר ממה שהייתי מכנה "טעם" על בית הספר.
זה היה הרבה ללהטט, אבל התחלנו עם התוכן, באופן טבעי, ארגנו את הדף כך שלמשתמשים הייתה גישה מיידית לדברים שהם באמת היו שם לקרוא ו / או לעסוק בהם לפני שהציגו להם ניווט כלשהו:
- באנר לאתר
- תוֹכֶן
- קריאות לפעולה
- מנגנוני קשר
- קישורים לדפי בית ספר ספציפיים
- רשתות חברתיות
- לחפש
- זכויות יוצרים וכו '.
גישה זו משתלבת בצורה מושלמת עם המנטרה "הניידת הראשונה" של לוק ורובלסקי ורעיון להציג תוכן מלפנים ואז לאפשר למשתמש להסתובב משם. גישה ראשונה של תוכן זו הובילה לפריסת הבסיס שלנו ללא שאילתת מדיה, המכוונת לטלפונים.
כפי שכולנו מודעים מדי, במכשירים עם מסך קטן, הנדל"ן הוא בעלות גבוהה, ולכן חיפשנו כל הזמן הזדמנויות לייעל את החוויה עבור המשתמשים שלנו. מכיוון שסמארטפונים נוטים לקבל תמיכה טובה יותר ב- CSS מאשר טלפונים פונקציונליים, החלטנו לתחוב את הקישורים הפחות חשובים מאחורי סמל התפריט, ולחשוף אותם רק כאשר לחצו עליו, ממש כמו הנפילות הוותיקות של CSS. זה דפוס עיצוב נפוץ ברשת הסלולרית, אך כל יישום שראיתי עד כה דרש JavaScript. רציתי לבדוק אם אוכל ליצור חוויה מקבילה באמצעות CSS בלבד (ומבלי לנקוט בפריצות הכרוכות בבקרת צורה נסתרת).
אעבור על ה- CSS, אך ראשית עלי לציין כי הסגנונות הבאים הונחו בגיליון סגנון המיועד למכשירים ברוחב בינוני, החל מ -19.375 הרגל. רוב הכללים הללו הוחבאו בשאילתת מדיה נוספת בתוך גיליון הסגנון הזה, שהגבילה את יישומם לרוחב של פחות מ 46 ש '(שהיה רחב מספיק כדי לתמוך בפריסה חלופית עבור ה- Nav המסוים הזה). טכניקת בידוד זו מבטיחה שהכללים אינם "מדממים" שלא לצורך בפריסות חלופיות.
קישור rel = "גיליון סגנונות" href = "/ c / medium.css" media = "screen ו- (min-width: 19.375em)" /> @ media media ו- (max-width: 46em) {/ * הכללים הולכים לכאן * /}
בואו נחפור פנימה
השלב הראשון היה יישום הסגנונות למיקום מחדש של הניווט בראש הדף:
#nav {margin: 0; עמדה: מוחלט; למעלה: 0; מימין: 0; משמאל: 0; z-index: 1000;}
הערה: הסרתי סגנונות לא רלוונטיים כדי שתוכלו להתמקד בחלקים החשובים.
לאחר מכן הגדרתי את הקישורים שייראו מכווצים, למעט במקרה שהניווט היה היעד הנוכחי:
#nav a {border-bottom-width: 0; הצפה: מוסתרת; גובה: 0; קו גובה: 0; ריפוד: 0 1em;} # nav: מיקוד ל- {border-bottom-width: 1px; קו גובה: 3em; גובה: 3em;}
עם הכללים האלו, יכולתי לתפעל ידנית את כתובת האתר כדי להחליף את התפריט פתוח וסגור, אך זו אינה דרישה סבירה בתרחיש של העולם האמיתי. הייתי צריך ליצור קישור שממקד לרשימת הניווט, אך רציתי לעשות זאת מבלי להוסיף עוד מסמך למסמך. אחרי הכל, אין טעם שאלמנט יהיה בדף אם זה שימושי רק בתרחיש אחד. למרבה המזל, המתנה ישנה התאימה לחלוטין למשימה.
"דלג אל" החילוץ
בימים הראשונים של האינטרנט השתמשנו לעתים קרובות בקישורי "דלג לתוכן" כאמצעי לאפשר למשתמשים שלנו לדלג מעל הניווט באתר ולהגיע לבשר העמוד. בגישה ראשונה של תוכן, קישור "דלג לניווט" שימושי באותה מידה כדי לתת למשתמשים גישה ישירה לניווט מבלי שיהיה עליהם להציב את הכל בראש הדף. הדבר הנהדר בקישורי "דלג אל" הוא שהם עובדים על ידי מניפולציה במזהה השבר של כתובת האתר, ובכך מאפשרים לנו להשתמש :יַעַד. וואלה!
ראשית, הוספתי קישור "דלג אל" קרוב לראש הדף:
כותרת עליונה> - לוגו -> a id = "jump" href = "# nav"> ניווט באתר / a> / header>
ואז עיצבתי את זה כך שייראה כמו כפתור התפריט הקטן בפינה הימנית העליונה של העיצוב שלנו:
#jump {רקע: # 000 url (/c/i/nav.png) 50% 50% ללא חזרה; גבול: 1px מוצק # 8b8b8b; רוחב הגבול: 0 0 1px 1px; סמן: מצביע; בלוק תצוגה; ריפוד: 0; גובה: 53 פיקסלים; רוחב: 53 פיקסלים; כניסה לטקסט: -999em; עמדה: מוחלט; מימין: 0; למעלה: 0;}
ראוי לציין שהקישור הזה אפילו שימושי לטלפונים פיצ'רים מכיוון שהוא מאפשר להם לקפוץ ישר לניווט. (אתה יכול לראות גישה פשוטה זו המופעלת על ידי מגזין התוכן ובגצ'ק. למען היתרונות והחסרונות, עיין בתכנית הניווט הסלולרית של בראד פרוסט).
עם כפתור ההחלפה במקום, הייתה לי דרך נוחה לגרום להופעת הניווט, אבל אין דרך לגרום לו להיעלם שוב.
לאחר שהרהרתי בבעיה זו זמן מה עלה בי הפיתרון הפשוט עד לגיחוך: כלול קישור "חזרה לתוכן" בסוף רשימת הניווט. לחיצה על קישור זה תגרום # נאב כבר לא היעד, והרשימה תקרוס.
ul id = "nav" tabindex = "0">! - פריטי Nav -> li id = "back"> a href = "# top"> חזרה למעלה / a> / li> / ul>
מספיק קל, אבל זה רק פתר חלק מהבעיה. אנחנו לא רוצים שמשתמש יצטרך לצוד דרך רשימה כדי למצוא קישור שמאפשר לו לסגור את התפריט הנפתח; במקום זאת אנו רוצים שהוא יתנהג כפי שמשתמש מצפה: הקשה או לחיצה מחוץ לאזור הנפתח צריכה לכווץ את הניווט שוב. למרבה המזל, עם קצת אינדקס z להטוטנות ונגיעה של מיקום חכם אפשר למקם את הקישור מתחת לשאר פריטי הניווט ולהרחיב אותו כדי למלא את שארית המסך (באופן בלתי נראה, כמובן). הנה דוגמה של כללי הסגנון הרלוונטיים:
#jump {/ * וודא שלחצן התפריט נמצא למעלה * / z-index: 1001;} # nav {/ * ה- nav יושב מאחורי כפתור התפריט * / z-index: 1000;} # nav: יעד {/ * אלא אם כן מוצג * / z-index: 1001;} # nav: target a {/ * הפוך את קישורי ה- nav לשבת למעלה * / position: relative; z-index: 1;} # back {/ * קבע הקשר מיקום קרוב יותר * / position: relative; } #back a {/ * הפוך את הקישור לרוח רפאים * / רקע: שקוף; גבול: 0; כניסה לטקסט: -999em; / * לגרום לו למלא את המסך * / מיקום: מוחלט; למעלה: -101em; תחתון: -101em; משמאל: 0; מימין: 0; / * ודא שהוא יושב מאחורי הקישורים האחרים * / z-index: 0;}
עם זה במקום, התפריט היה פונקציונלי לחלוטין. זה פשוט היה זקוק לעידון קטן.
משק בית
על מנת לבהיר את מראה הממשק, בחרתי להוסיף מעבר פשוט לקישורים, ומאפשר להם לצמוח אנכית כאשר ממוקדים הניווט:
#nav: מקד למעבר {-moz: גובה .25s, גובה קו .25s; -ms-מעבר: גובה .25s, גובה קו .25s; -מעבר: גובה .25s, גובה קו .25s; -Webkit-מעבר: גובה .25s, גובה קו .25s; מעבר: .25s גובה, .25s גובה קו;}
בתוספת המעבר הקטן ההוא, הביצועים היו טובים להפליא, אך עדיין הייתי מודאג מעט מדמם פוטנציאלי. בטח, אם דפדפן תומך בשאילתות מדיה, הוא כנראה תומך :יַעַדאך למקרה שבחרתי להקדים כל כלל סגנון רלוונטי גוף: לא (: יעד) (אשר יתאים רק אם הדפדפן תומך בבחירת יעד). הנה דוגמה:
body: not (: target) #nav {/ * סגנונות אלה מוחלים רק אם: target ו-: not מובנים (והגוף לא ממוקד, כמובן) * /}
ויש לך את זה: נפתח פשוט, משופר בהדרגה, מבוסס CSS שעובד נפלא כחלק מעיצוב רספונסיבי. אני מקווה שתמצא גישה זו שימושית כמוני.
