שימוש בקישורים ליצירת תפריטי ניווט אנכיים

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

מתחילים

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

• בית
• מוצרים
• שירותים
• צור קשר

כאשר מסתכלים על ה- HTML, לקישור הבית יש מזהה.

אתה כאן

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

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

• בית
• מוצרים
• שירותים
• צור קשר

זה לא נראה כמו תפריט. עם זאת, עם מספר סגנונות CSS שנוספו לרשימה, תוכלו ליצור תפריט שגורם לכם להיות גאים.

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

• תפריט אנכי מעוצב
• תבנית תפריט אנכית בסיסית
• תפריט אנכי מעוצב עם You Are Here
• תבנית תפריט אנכית בסיסית עם You Are Here

תפריט ניווט אנכי

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

כשאתם מעצבים תפריטים, התחילו מבחוץ ועבדו פנימה. ראשית, עצב את הניווט:

ul # ניווט

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

ul # ניווט {רוחב: 12em; }

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

ul # ניווט li {
סגנון רשימה: אין;
צבע רקע: # 039;
גבול העליון: מוצק 1px # 039;
יישור טקסט: שמאל;
שוליים: 0;
} 

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

UL # ניווט LI A

לאחר מכן, סגנו את הדברים הבאים:

קישור
ת: ביקר
ת: רחף
ת: פעיל

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

קו תחתון, קישוט טקסט: אין; כפי ש

זה גורם לכפתורים להיראות יותר כמו כפתורים. העיצוב שלך עשוי להיות שונה.

ul # ניווט לי א {
בלוק תצוגה;
קישוט טקסט: אין;
ריפוד: .25em;
גבול תחתון: מוצק 1px # 39f;
גבול-ימין: מוצק 1px # 39f;
}

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

a: קישור, a: ביקר {color: #fff; }
a: רחף, a: פעיל {color: # 000; }

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

a: רחף {רקע-צבע: #fff; }

תפריט ניווט אופקי

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

• בית
• מוצרים
• שירותים
• צור קשר

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

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

ul # ניווט {
לצוף: שמאלה;
שוליים: 0;
ריפוד: 0;
רוחב: 100%;
צבע רקע: # 039;
}

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

ul # ניווט li {display: inline; }

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

אתה כאן מידע על מיקום

היבט נוסף של HTML הוא המזהה הזה:

אתה כאן

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

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

אם ברצונך לקבל דוגמאות נוספות לתפריטים אופקיים, חפש באינטרנט את הדברים הבאים:

• תפריט אופקי מעוצב
• תבנית תפריטים אופקית בסיסית
• תפריט אופקי מעוצב עם You Are Here
• תבנית תפריטים אופקית בסיסית עם You Are Here