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

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

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

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

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

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

נתחיל עם HTML:

  
  
  
 Mobile Navigation Menu  
  
  
  
     
  
  
  
  
  
     
  
  Home   
  About   
  Contact

CSS:

/*This section demarcation is solely for the purpose of the tutorial*/  
 section{  
 width: 800px;  
 height: 600px;  
 margin-top: 50px;  
 margin-left: 250px;  
 border: solid black 1px;  
 background: #e6e3dc;  
 }  
  /*position the divs container in your DOM*/   
 #toggle-container{  
 display: grid;  
 width: fit-content;  
 margin-left: 720px;  
 margin-top: 10px;  
 }  
  /*Stack the three divs above each other. Then set a height and width for them.*/   
 #one, #two, #three{  
 background: black;  
 width: 30px;  
 height: 3px;  
 margin-top: 5px;  
 }  
 .toggle-content{  
 display: none;  
 margin-left: 700px;  
 margin-top: 20px;  
 }  
 .toggle-content a{  
 display: block;  
 text-decoration: none;  
 color: black;  
 font-size: 30px;  
 }  
 .toggle-content a:hover{  
 color: blue;  
 }  
  /*Display the class instance created by JavaScript in block*/   
 .displayed{  
 display: block;  
 }

הוסף JavaScript:

נשללה ממך הרשאה לגשת לתיקיה זו

var toggler = document.getElementById('toggle-container');  
var toggleContents = document.getElementById('toggle-content');  
document.addEventListener('click', function(){  
  //Apply a class intance to each navigation and set display to toggle:   
 toggleContents.classList.toggle('displayed');  
});

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

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

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

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

  //Add a click event to your webpage:   
window.onclick = function(event) {  
  //Target the click event on the menu bar to allow the webpage body to track it:   
 if (!event.target.matches('#toggle-container')) {  
 var dropdowns = document.getElementsByClassName('toggle-content');  
  //Hide the navigations by looping through each of them:   
 for (var i = 0; i  var dropped = dropdowns[i];  
 if (dropped.classList.contains('display')) {  
 dropped.classList.remove('display');  
 }  
 }  
 }  
}

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

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

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

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

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

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

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

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

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל 15 פקודות שורת הפקודה של Windows (CMD) שאתה חייב לדעת

שורת הפקודה היא עדיין כלי רב עוצמה של Windows. להלן פקודות CMD השימושיות ביותר שכל משתמש Windows צריך לדעת.

קרא הבא נושאים קשורים

תִכנוּת
HTML
CSS
JavaScript
טיפים לקידוד

על הסופר אידיסו אומיסולה(פורסמו 94 מאמרים)

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

עוד מאת Idowu Omisola

הירשם לניוזלטר שלנו

הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!

לחצו כאן להרשמה

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

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

הירשם לניוזלטר שלנו