מדריך צעד אחר צעד
בין אם תפריט הניווט שלך הוא שורה אופקית בחלק העליון או שורה אנכית בצד, זה עדיין רק רשימה. בעת עיצוב ניווט באינטרנט, זה לעתים קרובות קל לשכוח כי תפריט ניווט הוא רק קבוצה מפוארת של קישורים. אבל אם התוכנית שלך ניווט באמצעות XHTML + CSS, אתה יכול ליצור תפריט קטן להוריד (XHTML) וקל להתאמה אישית (CSS).
מתחילים
כדי להתחיל לעצב רשימה לניווט, עליך להשתמש ברשימה.
זה יכול להיות רשימה סטנדרטית unordered שזוהה כמו ניווט:
אם אתה מסתכל מקרוב על HTML, תוכל להבחין כי "דף הבית" הקישור יש גם מזהה של youhere. פעולה זו תאפשר לך ליצור תפריט שמזהה את המיקום הנוכחי עבור הקוראים שלך. גם אם אתה לא מתכוון על זה שיש סוג זה של רמז חזותי באתר שלך עכשיו, אתה יכול לכלול את המידע הזה. אם תחליט להוסיף את האות מאוחר יותר, יהיה לך פחות קידוד כדי להכין את האתר שלך.
ללא סגנון CSS , תפריט XHTML זה נראה כמו רשימה סטנדרטית לא מסודרת. יש כדורים ופריטי הרשימה מוכתמים מעט. מכיוון שאני משתמש בקישורים של מצייני מיקום , רוב הדפדפנים לא יציגו את הקישורים כקשורים (מודגשים בקו תחתון וכחול). אם תדביק את HTML למעלה לדף אינטרנט, הניווט שלך ייראה כך:
- בית
- מוצרים
- שירותים
- תיצור איתנו קשר
זה די משעמם ולא נראה כמו תפריט. אבל עם רק כמה סגנונות CSS הוסיף לרשימה, אתה יכול ליצור תפריט שגורם לך גאה.
תפריט ניווט אנכי
תפריט ניווט אנכי קל מאוד לכתיבה משום שהוא מוצג באותו אופן כמו רשימה רגילה: למעלה ולמטה.
פריטי הרשימה מוצגים אנכית לאורך הדף.
כאשר אני מעצב תפריטים, אני אוהב להתחיל בחוץ ולעבוד פנימה על ידי זה, אני מתכוון כי אני הראשון הסגנון ul # ניווט ולאחר מכן לעבור אלמנטים li ולאחר מכן את הקישורים, וכו 'אז עבור תפריט זה, תחילה אתה מגדיר את רוחב התפריט. זה יבטיח כי גם אם פריטי התפריט הם ארוכים, הם לא ידחפו את שאר הפריסה מעל או לגרום גלילה אופקית.
ניווט # ul {width: 12em; }
ברגע שיש לי את רוחב להגדיר, אני יכול לשחק עם רשימת פריטים. זה מאפשר לי להגדיר דברים כמו (להיפטר הכדורים), צבעי רקע, גבולות, יישור טקסט, ואת השוליים.
ניווט # ul # {
style-style: none;
צבע רקע: # 039;
border-top: solid 1px # 039;
יישור טקסט: משמאל;
שוליים: 0;
}
לאחר שתגדיר את היסודות לפריטי הרשימה תוכל להתחיל לשחק עם האופן שבו התפריט נראה באזור הקישורים. סגנון ראשון UL # ניווט LI ולאחר מכן A: קישור, A: ביקר, A: לרחף, ו- A: פעיל (אם אתה רוצה אותם). עבור הקישורים, אני רוצה להפוך את הקישורים אלמנט בלוק (ולא ברירת המחדל בשורה). זה מאלץ אותם לקחת את כל השטח של LI -and הם פועלים יותר כמו פסקה, מה שהופך אותם קל יותר בסגנון כמו לחצני התפריט. דבר אחר אני תמיד עושה הוא להסיר את קו תחתון (טקסט קישוט: אף אחד), כמו זה עושה את הכפתורים נראים יותר כמו לחצנים לי.
אבל כמובן, העיצוב שלך עשוי להיות שונה.
ניווט # ul # a {
בלוק תצוגה;
text-decoration: none;
ריפוד: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}
שים לב כי עם התצוגה: בלוק; להגדיר על הקישורים, את כל התיבה של הפריט בתפריט ניתן ללחוץ, לא רק את האותיות. זה גם טוב לשימושיות. הקפד להגדיר את צבעי הקישור (קישור, ביקר, רחף ופעילה) אם אתה רוצה שהם יהיו שונים מהכחול, האדום והסגול של ברירת המחדל.
a: link, a: visitor {color: #fff; }
a: רחף, a: פעיל {color: # 000; }
אני גם רוצה לתת את המדינה לרחף קצת יותר תשומת לב על ידי שינוי צבע הרקע.
א: רחף {background-color: #fff; }
אם תרצה דוגמאות נוספות לתפריטים אנכיים, עיין ברשימה שבהמשך.
- תפריט אופנתי מנוסח
- תבנית תפריט אנכי בסיסי
- תפריט אנכי אופנתי עם אתה נמצא כאן
- תבנית תפריט אנכי בסיסי עם אתה נמצא כאן
תפריט ניווט אופקי
יצירת תפריטים ניווט אופקי הם קצת יותר קשה מאשר תפריטים ניווט אנכי כי אתה צריך לקזז את העובדה שרשימות HTML מעדיפים להציג אנכית. כמו בתפריט האופקי, תחילה צור את רשימת תפריטי הניווט :
כדי ליצור תפריט אופקי, עבוד בדיוק כפי שעשית עם התפריט האנכי. להתחיל עם בחוץ ולעבוד בו מאז אני רוצה הניווט שלי להתחיל בפינה השמאלית, אני מגדיר את זה עם 0 השוליים השמאלית ואת הריפוד, ואני צף אותו משמאל. אתה צריך גם לקבל את הרגל של הגדרת רוחב, כך התפריט שלך לא תופסים שטח יותר או פחות ממה שאתה מתכוון. עבור תפריטים אופקיים, זה בדרך כלל רוחב מלא של העיצוב. הוספתי גם צבע רקע לכל הרשימה כדי להקל על הקריאה.
ניווט # ul {
צף: משמאל;
שוליים: 0;
ריפוד: 0;
רוחב: 100%;
צבע רקע: # 039;
}
אבל הסוד לתפריט הניווט האופקי נמצא בפריטי הרשימה. פריטים ברשימה הם בדרך כלל לחסום אלמנטים, כלומר, יהיה להם newline להציב לפני ואחרי כל אחד. על ידי החלפת התצוגה מחסום אל שורה, אתה לאלץ את רשימת האלמנטים בשורה אחד ליד השני אופקית.
ul # nav li {display: inline; }
טיפלתי בקישורים בדיוק כמו שטיפלתי בהם בתפריט הניווט האנכי, עם אותם צבעים ועיצוב טקסט. הוספתי גבול עליון כדי להגדיר את הכפתורים כאשר הם מרחפים מעל. הדבר היחיד שהסרתי היה להציג: בלוק; כמו זה יהיה לשים את newlines בחזרה ולהרוס את התפריט האופקי.
ניווט # ul # a {
text-decoration: none;
ריפוד: .25em 1em;
border-bottom: solid 1px # 39f;
border-top: solid 1px # 39f;
border-right: solid 1px # 39f;
}
a: link, a: visitor {color: #fff; }
ul # navigation li a: העבר את העכבר {
צבע רקע: #fff;
צבע: # 000;
}
אתה נמצא כאן מידע מיקום
היבט נוסף של HTML הוא המזהה youarehere. אם ברצונך לשנות את התפריט שלך כדי לציין את המיקום הנוכחי של המשתמשים שלך, השתמש במזהה זה כדי להגדיר צבע רקע שונה או סגנון אחר. העבר את התכונה ID לפריט התפריט הנכון בדפים אחרים, כך שהדף הנוכחי יודגש תמיד.
ul # navigation li # youarehere a {background-color: # 09f; }
אם אתה שם את הסגנונות האלה יחד על הדף שלך, אתה יכול ליצור שורת תפריטים אופקית או אנכית שעובדת עם האתר שלך, אבל הוא מהיר להורדה קל מאוד לעדכן בעתיד. שימוש ב- XHTML + CSS הופך את הרשימות שלך לכלי רב עוצמה לתכנון.
אם ברצונך לקבל דוגמאות נוספות לתפריטים אופקיים, עיין במאמר הבא.
- תפריט אופקי אופנתי
- תבנית תפריט אופקי בסיסי
- תפריט אופקי אופנתי עם אתה נמצא כאן
- תפריט תפריט אופקי בסיסי עם אתה נמצא כאן