כיצד ליצור ניווט תגובה

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

יש למעשה דרכים רבות ליצור תגובה אתר אינטרנט תגובה ואפילו כמה plugins jQuery זמינים לעשות את זה בשנייה.

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

אז בואו נתחיל.

• הדגמה
• הורד מקור

HTML

קודם כל, בואו להוסיף את meta Viewport בתוך ראש תג. זה מטא תג נדרש עבור הדף שלנו כדי להיקבע כהלכה בכל גודל מסך, במיוחד ב- viewport הנייד.

... ולאחר מכן להוסיף את קטע הקוד הבא בתור סימון הניווט בתוך הגוף תג.

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

לקריאה נוספת: אל תשכח את המטא תג Viewport.

סגנונות

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

 גוף background-color: # ece8e5;  

ה nav תג המגדיר את הניווט יהיה 100% רוחב מלא של חלון הדפדפן, בעוד ul שבו הוא מכיל קישורים הראשי שלנו בתפריט יהיה 600px עבור רוחב.

 nav height: 40px; רוחב: 100%; רקע: # 455868; font-size: 11pt; font-family: 'PT Sans', Arial, sans-serif; מודגש; מקומות קרובים border-bottom: 2px solid # 283744;  nav ul ריפוד: 0; שוליים: 0 אוטומטי; רוחב: 600px; גובה: 40px;  

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

 nav li display: inline; צף: משמאל;  

אם הבחנת בסימון HTML לעיל, כבר הוספנו מסנן בתוך ה מעמד תכונה עבור שניהם nav ו ul כדי לנקות את הדברים מסביב כאשר אנו לצוף את היסודות בתוכו באמצעות גרזן CSS clearfix. לכן, בואו נוסיף את כללי הסגנון הבאים בגיליון הסגנון.

 .clearfix: before, .carfix: אחרי content: ""; התצוגה: Table;  .clearfix: אחרי ברור: שניהם;  .carfix * zoom: 1;  

מאז יש לנו שישה תפריט קישורים ואנחנו גם ציינו את המיכל עבור 600px, כל תפריט קישורים יהיה 100px עבור רוחב.

 ניווט color: #fff; הצג: inline-block; רוחב: 100px; text-align: center; text-decoration: none; line-height: 40px; טקסט בצל: 1px 1px 0px # 283744;  

קישורים התפריט יופרדו עם 1px ימין, למעט האחרון. זכור את הפוסט הקודם שלנו על מודל התיבה, רוחב התפריט יורחב עבור 1px עושה את זה 101px כמו תוספת הגבול, אז הנה אנחנו משנים את גודל תיבת המודל post גבול הגבול על מנת לשמור על התפריט נשאר 100px.

 nav li a border-right: 1px solid # 576979; box-sizing: border-box; -Moz-box-sizing: border-box; -webkit-box-sizing: border-box;  nav li: last-child a border-right: 0;  

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

 ניווט ב: רחף, נווט: פעיל background-color: # 8c99a4;  

... ולבסוף, הקישור הנוסף יהיה מוסתר (על מסך שולחן העבודה).

 ניווט # משוך display: none;  

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

לקריאה נוספת: CSS3 Box- שינוי גודל (Hongkiat.com)

שאילתות מדיה

שאילתות המדיה של CSS3 משמשות להגדרת האופן שבו הסגנונות יעברו בכמה נקודות עצירה מסוימות או במיוחד בגדלי מסך המכשיר.

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

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

 @media screen ו- (max-width: 600px) nav height: auto;  nav ul width: 100%; בלוק תצוגה; גובה: אוטומטי;  nav li width: 50%; צף: משמאל; מקומות קרובים  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  ניווט ב text-align: left; רוחב: 100%; text-indent: 25px;  

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

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

 @media מסך בלבד ו- (max-width: 480px) nav border-bottom: 0;  nav ul display: none; גובה: אוטומטי;  נווט # pull display: block; צבע רקע: # 283744; רוחב: 100%; מקומות קרובים  ניווט # pull: after content: ""; רקע: url ('nav-icon.png') ללא חזרה; width: 30px; גובה: 30px; הצג: inline-block; תפקיד מוחלט right: 15px; top: 10px;  

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

 @media only screen ו- (max-width: 320px) nav li display: block; צף: אף אחד; רוחב: 100%;  nav li a border-bottom: 1px solid # 576979;  

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

לקריאה נוספת: שאילתות מדיה עבור התקנים סטנדרטיים.

מציג את התפריט

בשלב זה, התפריט עדיין יהיה מוסתר ויהיה גלוי רק כאשר הוא נחוץ על ידי הקשה על או לחיצה על “תפריט” הקישור ואנחנו יכולים להשיג את האפקט באמצעות jQuery slideToggle ().

 ($) (function) (var = = $ ('# pull'), menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull). ('click', function (e) e.preventDefault (); menu.slideToggle (););); 

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

לכן, אנחנו צריכים להסיר את הסגנון הזה על גודל החלון, כדלקמן:

 $ (חלון) .התאמה (פונקציה () (var: w = $ (window) .width (), אם (w> 320 && menu.is (': hidden')) menu.removeAttr ('style'); ); 

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

• הדגמה
• הורד מקור

בונוס: דרך אלטרנטיבית

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

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

אחד היתרונות שאני אוהב על תרגול זה הוא שאנחנו לא צריכים לדאוג על סגנון הניווט כמו

התפריט יעשה שימוש בממשק המשתמש המקורי מהמכשיר עצמו.

אנא, עיין בתיעוד הרשמי ליישום נוסף.

סיכום

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