כיצד ליצור שורת תפריטים בנייד באמצעות HTML, CSS ו- JavaScript

אין ספק שאתה יכול ליצור תפריט נייד הניתן להחלפה באמצעות מסגרות CSS כמו TailWind או BootStrap.

אבל מה הרעיון שעומד מאחורי זה? ואיך אתה יכול להכין אחת מההתחלה מבלי להיות תלוי במסגרות CSS האלה?

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

כיצד ליצור את תפריט הנייד Togglable שלך

אם עדיין לא עשית זאת, פתח את תיקיית הפרוייקט וצור את קובצי הפרויקט שלך (HTML, CSS ו- JavaScript).

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

נתחיל עם HTML:

 צור שלוש divs כדי לייצג את שורת התפריטים הנפתחת בת שלוש השורות 








 הוסף את הניווט שלך כאן 


בית
על אודות
איש קשר

CSS:

/*תיחום קטע זה נועד אך ורק לצורך ההדרכה*/
סָעִיף{ 
רוחב: 800 פיקסלים;
גובה: 600 פיקסלים;
שוליים למעלה: 50 פיקסלים;
שוליים-שמאל: 250 פיקסלים;
גבול: 1px שחור מלא;
רקע: #e6e3dc;
}
/*מקם את מיכל divs ב- DOM שלך*/
#toggle-container {
תצוגה: רשת;
רוחב: fit-content;
שוליים-שמאל: 720 פיקסלים;





instagram viewer


שוליים למעלה: 10 פיקסלים;
}
/*ערמו את שלושת הדיביים זו מעל זו. לאחר מכן הגדר להם גובה ורוחב.*/
#אחת שתיים שלוש{
רקע: שחור;
רוחב: 30 פיקסלים;
גובה: 3 פיקסלים;
שוליים למעלה: 5 פיקסלים;
} 
.toggle-content {
אל תציג דבר;
שוליים-שמאל: 700 פיקסלים;
שוליים למעלה: 20 פיקסלים;
}
.toggle-content a {
בלוק תצוגה;
טקסט-קישוט: אין;
צבע שחור;
גודל גופן: 30 פיקסלים;
}
.toggle-content a: רחף {
צבע כחול;
}
/*הצג את מופע הכיתה שנוצר על ידי JavaScript בבלוק*/
.מוצגת{
בלוק תצוגה;
}

הוסף JavaScript:

var toggler = document.getElementById ("toggle-container");
var toggleContents = document.getElementById ("החלפת תוכן");
document.addEventListener ("קליק", פונקציה () {
// החלת אינטנסיביות כיתתית על כל ניווט והגדרת תצוגה למעבר בין:
toggleContents.classList.toggle ("מוצג");
});

כך נראה פלט עבודה בעת לחיצה על שורת התפריטים:

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

קָשׁוּר: סגנון אלמנטים לאתר עם שיפוע רקע CSS

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

// הוסף אירוע קליק לדף האינטרנט שלך:
window.onclick = function (event) {
// מקד לאירוע הקלקות בשורת התפריטים כדי לאפשר לגוף דף האינטרנט לעקוב אחריו:
if (! event.target.matches ('#toggle-container')) {
var dropdowns = document.getElementsByClassName ("toggle-content");
// הסתר את הניווט על ידי עיון בכל אחד מהם:
עבור (var i = 0; i var ירד = נפילות [i];
if (drops.classList.contains ('display')) {
drops.classList.remove ('תצוגה');
}
}
}
}

אז הנה סיכום של מה שעשית הרגע: יצרת שלוש שורות באמצעות div תג HTML. התאמת את הגובה והרוחב שלהם והצבת אותם ב- DOM שלך. לאחר מכן נתת לאירוע קליק באמצעות JavaScript.

קָשׁוּר: אופן בניית אתר אינטרנט: למתחילים

הגדרת את התצוגה הראשונית של הניווט שלך ל אף אחד להסתיר אותם כשהדף נטען. אז ה נְקִישָׁה אירוע בשלוש השורות מחליף ניווט זה בהתבסס על מחלקה מיידית של JavaScript (מוצגת). לבסוף, השתמשת בכיתה חדשה זו כדי להציג את הניווט באמצעות CSS ו- JavaScript toggleContents שיטה.

קָשׁוּר: מגמות עיצוב ניאומורפי ב- HTML, CSS ו- JavaScript

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

נהיה יצירתיים יותר כשאתה בונה את האתר שלך

יצירת אתר מושך ויזואלית דורשת קצת יצירתיות. סביר יותר שאתר ידידותי למשתמש יעשה המרה של הקהל שלך מאשר קהל תפל.

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

כיצד להשתמש מחדש בחומרה הישנה שלך כמו מקצוען

יש לכם הרבה טכנולוגיות ישנות שמטרידות את הבית שלכם? גלה מה לעשות עם זה במדריך המיחזור הטכנולוגי הזה!

קרא הבא

על הסופר