תפריט CSS אנכי: עושה זאת בעצמך

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

שלבים בסיסיים

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

1. ראשית, לקבוע רשימה של קישורים (באמצעות HTML קוד), אשר התפריט יהיה. תן להם שם, למשל, הם כדלקמן:

1. בית.
2. ההיסטוריה שלנו.
3. מדריך.
4. שירותים.
5. מגעים.

ואז 2. סטיילינג קישורים כרצונך בעזרת CSS.

אנחנו כותבים את קוד HTML, לשמור בקובץ my_Vmenu.html ולראות איך זה ייראה בדפדפן:

זהו הבסיס (שלד) של התפריט שלנו. # 1, # 2, וכו ' צריך להיות מוחלף על ידי הפניה. ראה כיצד זה נראה בדפדפן. התמונה לא תאהב. עכשיו אנחנו חייבים להתחיל לתאר את האלמנטים של סגנון, לעשות תפריטי CSS אנכיים שלמים.

סגנונות תיאור

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

סגנונות תיאור מפורט בשימוש

עכשיו רואים את הפרטים של התפריט האנכי CSS שלנו:

רשימה בסגנון סוגים מאפשרים לך להסיר את הרשימה של סמנים. על ידי הגדרת "0" אל margin ו- padding להסיר את ריפוד נוסף ברשימה. כפי שניתן לראות מן קוד HTML, התפריט שלנו היא רשימה, ואת סגנונות מוגדרים באמצעות CSS.

ul # my_Vmenu - הסגנון הכללי של הרשימה כולה.

ul # my_Vmenu סוללת Li - קישורי סגנון בין li התג.

ul # my_Vmenu סוללת Li: רחף - תיאור של סוג תחת שיקול של פריטים בתפריט בזמן אחד מרחף מעל אנשים.

ul # my_Vmenu li טווח - תיאור הטקסט (תפריט הכותרת).

זכור שהקבצים my_Vmenu.css my_Vmenu.html וחייב להישמר באותה ספרייה. עם זאת, הם עשויים להימצא בתיקיות שונות, אבל אז זה חשוב לרשום נתיב הקובץ my_Vmenu.html כדי my_Vmenu.css. תיזהר, כי המצטרפים החדשים לבעיה זו לעתים קרובות.

סגנון חייב להיות מחובר בין תגי ה- head ב html-קובץ. menu_1.png ו menu_2.png - זוהי התמונה כדי לעבור לתפריט תמונת המדינה לרחף הנורמליות.

עדיף לשמור את התמונות בתיקייה נפרדת עבור תמונות, שם זה my_images, אבל אז כוון את קוד ה- CSS. כתוב שם תמונות אלה נראים לעין, הם נמצאים בספריה זו: url (my_images / menu_1.png) וכן url (my_images / menu_2.png).

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

התפריט האנכי שלנו

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