מנהלי אתרים מסוימים לא רוצים לבזבז זמן עלאת הפיתוח מאפס של אלמנטים פשוטים שכבר קיימים. הם מאמינים שזה לא הגיוני לבזבז את הזמן על מה שהיה שם זמן רב. למעשה, עבור מי רק לומדים HTML ו- CSS, חשוב לעשות דברים רבים כדי להבין את עבודתם היטב. זה חל על התפריט. צור תפריט CSS אנכי. זה יהיה מבוסס רק ב- HTML ו- CSS, ללא שימוש ב- Javascript ו- JQuery. כל תפריט הוא רשימה של קישורים שמובילים לדפי האתר.
צעדים בסיסיים
כדי ליצור תפריט CSS פשוט אנכי, אתה צריך את רצף הצעדים הבאים:
1. ראשית, לקבוע את רשימת הקישורים (באמצעות קוד HTML) שממנו התפריט יהיה מורכב. תן להם שמות, למשל, כגון:
- בית.
- ההיסטוריה שלנו.
- מנהיגות.
- שירותים.
- מגעים
2. אז נוכל לסגנן את הקישורים לפי הרצוי על ידי CSS.
נכתוב את קוד ה- HTML, נשמור אותו ב- my_Vmenu.html ואראה כיצד הוא ייראה בדפדפן:
זהו הבסיס (השלד) של התפריט שלנו. # 1, # 2 וכו 'חייב להיות מוחלף על ידי קישורים. תראו איך הדברים נראים בדפדפן. אתה לא אוהב את התמונה. עכשיו אנחנו צריכים להתחיל לתאר את הסגנונות של האלמנטים כדי להפוך תפריט CSS אנכי מלא.
תיאור הסגנונות
צור קובץ בשם my_Vmenu.css, שבו אתה שואל כל מה שאתה רוצה לשפר את המראה של אלמנט חשוב כל כך של האתר. להלן קוד, יישום אשר יהיה להחיות את תפריט CSS אנכי. כתוב אותו בקובץ שנוצר, ולאחר מכן נסתכל מקרוב על מה הקווים העיקריים מתכוון כאן.
תיאור מפורט של סגנונות משומשים
עכשיו שקול בפירוט התפריט האנכי CSS שלנו:
ul # my_Vmenu - הסגנון הכללי של הרשימה כולה.
ul # my_Vmenu li a - סגנון הקישור בין תגי li.
ul # my_Vmenu li a: רחף הוא תיאור של סוג הפריטים בתפריט הנדון כרגע, כאשר אדם מעביר את הסמן מעל אחד מהם.
ul # my_Vmenu li span - תיאור של הטקסט (שמות התפריטים).
זכור כי הקבצים my_Vmenu.css ו my_Vmenu.HTML חייב להישמר בספריה אחת. עם זאת, הם יכולים להיות ממוקמים בתיקיות שונות, אבל אז חשוב לכתוב את הנתיב אל my_Vmenu.css בקובץ my_Vmenu.html. היזהר, כמו למתחילים לעתים קרובות יש בעיות עם זה.
הסגנון חייב להיות מחובר בין תגי הראש בקובץ ה- HTML. menu_1.png ו- menu_2.png הן התמונות עבור התמונה של פריט התפריט במצב הרגיל וכאשר אתה מעביר את הסמן.
עדיף לשמור את התמונות בתיקיה נפרדת עבורתמונות, שם it_images שלה, אבל אז לתקן את קוד ה- CSS. כתוב היכן התמונות האלה מופיעות, שהן נמצאות בספריה זו: כתובת אתר (my_images / menu_1.png) וכתובת אתר (my_images / menu_2.png).
בנכסים הנותרים המתוארים בקוד CSS,קל להבנה. הם קובעים את המראה של התפריט שלנו. קל לראות כי רוחב הגובה של הנקודות מוגדרים זהים לנקודות במצב הרגיל וכאשר אתה מעביר עליהן העכבר. גודל גופן 18px, ריפוד מגדיר ריפוד בצדדים שונים של שמות הפריטים. מאפיין התצוגה מאפשר לך לציין את התצוגה בלוקים כדי לציין את הרוחב והכניסה.
התפריט האנכי שלנו
כפי שאתה יכול לראות, קל ליצור תפריטי CSS אנכיים.בהתבסס על מאגר המידע, אתה יכול להפוך אותו ליפה ואטרקטיבי עבור המבקרים במשאב המקוון שלך! השתמש בדמיון שלך ואז תפריט מסוגנן יקשט את האתר שלך.
