כיצד ליצור תפריט נפתח עם CSS ו- JavaScript

תִכנוּת

במדריך זה תלמד כיצד ליצור תפריט נפתח פשוט עם Javascript וניל, HTML ו- CSS. נעבור בקוד ה- HTML, CSS ו- Javascript, אך נשקיע תשומת לב רבה יותר לתכנות, מכיוון שמדובר בהדרכה של JS. נשתמש ב- JS ו- CSS פשוטים, ללא מסגרות או מעבדים מקדימים. היוצא מן הכלל היחיד (סוג) הוא ייבוא ​​קובץ ה- CSS של Font Awesome מכיוון שנשתמש באחד מהסמלים שלו.

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

צילומי מסך

כך נראית תוצאת הקוד:

מסך ראשוני:

התפריט הנפתח נפתח:

נפתח עם אפשרות שנבחרה:

HTML:

בחלק זה נדון ביישום קוד ה- HTML לדף ההדגמה. כדי להתחיל, בואו נראה את הקוד

      Dropdown Example

זהו בעצם boilerplate עם ראש HTML, למעט linkהתגים הטוענים את שני גליונות הסגנון CSS בהם נשתמש במדריך זה: סגנונות Font Awesome styles.cssוהקובץ, שם נגדיר את סגנונות העמוד הזה.

ואז, יש את שאר קובץ ה- HTML, הגוף:

 Select an option  Option 1 Option 2 Option 3 Option 4 The result is:   ...

ניתן לחלק את החלק הזה לשלושה חלקים עיקריים:

  • ה- .dropdowndiv, בו יוגדר מבנה האלמנט הנפתח.
  • #resultהאלמנט, שיכיל את האפשרות שנבחרה על ידי המשתמש, מהרכיב הנפתח.
  • התסריט שנכתב בתג. יישומו מוסתר כאן מכיוון שפרטיו יוסברו בחלק האחרון של הדרכה זו.

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

resultהאלמנט הוא שם רק כדי להראות לך מה האפשרות שנבחרה.

סגנונות:

למטה תוכל לבדוק את קוד ה- CSS המלא. כפי שאתה יכול לראות אותו עושה שימוש CSS3 transitionו- transformמבנים.

אנא שימו לב .dropdownלהגדרות הכיתות. אלה משמשים להגדרת הפריסה של רכיב המיכל הנפתח, כמו גם את האלמנטים הפנימיים שלו, כגון ה- .titleשלו .optionושלו.

body{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; } .hide { max-height: 0 !important; } .dropdown{ border: 0.1em solid black; width: 10em; margin-bottom: 1em; } .dropdown .title{ margin: .3em .3em .3em .3em; width: 100%; } .dropdown .title .fa-angle-right{ float: right; margin-right: .7em; transition: transform .3s; } .dropdown .menu{ transition: max-height .5s ease-out; max-height: 20em; overflow: hidden; } .dropdown .menu .option{ margin: .3em .3em .3em .3em; margin-top: 0.3em; } .dropdown .menu .option:hover{ background: rgba(0,0,0,0.2); } .pointerCursor:hover{ cursor: pointer; } .rotate-90{ transform: rotate(90deg); }

JavaScript:

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

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

  1. לחיצה על אלמנט הנפתח
  2. בחירה באחת מאפשרויות הנפתח
  3. שינוי האפשרות שנבחרה כעת

ברצוני להבהיר כי אנו משתמשים בפונקציות חץ ( () => {}) constובמילת המפתח, שהם תכונות ES6. אתה כנראה טוב אם אתה משתמש בגרסה עדכנית של הדפדפן שלך, אך זכור זאת.

1. לחיצה על אלמנט הנפתח

function toggleClass(elem,className){ if (elem.className.indexOf(className) !== -1){ elem.className = elem.className.replace(className,''); } else{ elem.className = elem.className.replace(/\s+/g,' ') + ' ' + className; } return elem; } function toggleDisplay(elem){ const curDisplayStyle = elem.style.display; if (curDisplayStyle === 'none' || curDisplayStyle === ''){ elem.style.display = 'block'; } else{ elem.style.display = 'none'; } } function toggleMenuDisplay(e){ const dropdown = e.currentTarget.parentNode; const menu = dropdown.querySelector('.menu'); const icon = dropdown.querySelector('.fa-angle-right'); toggleClass(menu,'hide'); toggleClass(icon,'rotate-90'); }

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

2. בחירת אחת מאפשרויות הנפתח

function handleOptionSelected(e){ toggleClass(e.target.parentNode, 'hide'); const id = e.target.id; const newValue = e.target.textContent + ' '; const titleElem = document.querySelector('.dropdown .title'); const icon = document.querySelector('.dropdown .title .fa'); titleElem.textContent = newValue; titleElem.appendChild(icon); //trigger custom event document.querySelector('.dropdown .title').dispatchEvent(new Event('change')); //setTimeout is used so transition is properly shown setTimeout(() => toggleClass(icon,'rotate-90',0)); }

3. שינוי האפשרות שנבחרה כעת

function handleTitleChange(e){ const result = document.getElementById('result'); result.innerHTML = 'The result is: ' + e.target.textContent; }

הפונקציה handleTitleChangeקשורה changeלאירוע המותאם אישית על .titleהאלמנט, כדי לשנות את #resultתוכן האלמנט בכל פעם שרכיב הכותרת משתנה. הפעלת אירוע זה נעשית בסעיף הקודם.

קוד ראשי

//get elements const dropdownTitle = document.querySelector('.dropdown .title'); const dropdownOptions = document.querySelectorAll('.dropdown .option'); //bind listeners to these elements dropdownTitle.addEventListener('click', toggleMenuDisplay); dropdownOptions.forEach(option => option.addEventListener('click',handleOptionSelected)); document.querySelector('.dropdown .title').addEventListener('change',handleTitleChange);

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

הַדגָמָה

הקוד וההדגמה המלאים של יישום זה נמצאים כאן.

עוד מידע

  • מבוא ל- ES6
  • פונקציות חץ
  • תן וקונסט