תפריט אנכי עבור האתר בצורת אקורדיון עם jQuery

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

צור "אקורדיון" תפריט התחל-

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

קוד HTML

לכן, כדי ליצור התפריט האנכי שלנו, תחילה עליך לחייג את קוד ה- HTML, אשר תכיל את השורות הבאות:

שמור את הקוד הזה בתוך קובץ שנקרא Accord_menu.html.

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

- תמונות;

- סרטים;

- ספרים.

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

CSS-קוד

עם סגנונות אתה לא אמור להיות קשה. נציין רק כי בדוגמה זו משתמשת מילוי מדרג. הנה-קוד CSS:

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

# E1fee2 - זה צבע ירוק חיוור משנה.

# C4f0f7 תת גוון -golubovaty כאשר תרחף מעליהם.

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

חיבור שיפורים בתפריט jQuery

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

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

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