בין אם תפריט הניווט שלך הוא שורה אופקית בחלק העליון או שורה אנכית בצד, זה עדיין רק רשימה. בעת עיצוב ניווט באינטרנט, זה לעתים קרובות קל לשכוח כי תפריט ניווט הוא רק קבוצה מפוארת של קישורים. אבל אם התוכנית שלך ניווט באמצעות XHTML + CSS, אתה יכול ליצור תפריט קטן להוריד (XHTML) וקל להתאמה אישית (CSS).
מתחילים
כדי להתחיל לעצב רשימה לניווט, עליך להשתמש ברשימה. זה יכול להיות רשימה סטנדרטית unordered שזוהה כמו ניווט:
אם תסתכל מקרוב על ה- HTML, תבחין שלקישור "דף הבית" יש גם מזהה
אתה כאן. פעולה זו תאפשר לך ליצור תפריט שמזהה את המיקום הנוכחי עבור הקוראים שלך. גם אם אתה לא מתכוון על זה שיש סוג זה של רמז חזותי באתר שלך עכשיו, אתה יכול לכלול את המידע הזה. אם תחליט להוסיף את האות מאוחר יותר, יהיה לך פחות קידוד כדי להכין את האתר שלך.
ללא סגנון CSS, תפריט XHTML זה נראה כמו רשימה סטנדרטית לא מסודרת. יש כדורים ופריטי הרשימה מוכתמים מעט. מכיוון שאני משתמש בקישורים של מצייני מיקום, רוב הדפדפנים לא יציגו את הקישורים כקשורים (מודגשים בקו תחתון וכחול). אם תדביק את HTML למעלה לדף אינטרנט, הניווט שלך ייראה כך:
- בית
- מוצרים
- שירותים
- תיצור איתנו קשר
זה די משעמם ולא נראה כמו תפריט. אבל עם רק כמה סגנונות CSS הוסיף לרשימה, אתה יכול ליצור תפריט שגורם לך גאה.
תפריט ניווט אנכי
תפריט ניווט אנכי קל מאוד לכתיבה משום שהוא מוצג באותו אופן כמו רשימה רגילה: למעלה ולמטה. פריטי הרשימה מוצגים אנכית לאורך הדף.
כאשר אני מעצב תפריטים, אני אוהב להתחיל בחוץ ולעבוד בו. לפי זה, אני מתכוון כי אני הראשון בסגנון
ניווט # ul ולאחר מכן לעבור אל
li אלמנטים ולאחר מכן את הקישורים, וכו 'אז עבור תפריט זה, תחילה אתה מגדיר את רוחב התפריט. זה יבטיח כי גם אם פריטי התפריט הם ארוכים, הם לא ידחפו את שאר הפריסה מעל או לגרום גלילה אופקית.
ניווט # ul {width: 12em; }
ברגע שיש לי את רוחב להגדיר, אני יכול לשחק עם רשימת פריטים. זה מאפשר לי להגדיר דברים כמו (להיפטר הכדורים), צבעי רקע, גבולות, יישור טקסט, ואת השוליים.
ניווט # ul # {style-style: none;צבע רקע: # 039;border-top: solid 1px # 039;יישור טקסט: משמאל;שוליים: 0;} לאחר שתגדיר את היסודות לפריטי הרשימה תוכל להתחיל לשחק עם האופן שבו התפריט נראה באזור הקישורים. סגנון ראשון UL # ניווט LI Aולאחר מכן קישור, A youism מת, A: רחף, ו ת: פעיל (אם אתה רוצה אותם). עבור הקישורים, אני רוצה להפוך את הקישורים אלמנט בלוק (ולא ברירת המחדל בשורה). זה מאלץ אותם לקחת את כל השטח של LIוהם פועלים יותר כמו פסקה, מה שהופך אותם קל יותר לסגנון כמו לחצני התפריט. דבר אחר אני תמיד לעשות הוא להסיר את קו תחתון ( text-decoration: none;), כמו זה עושה את הכפתורים נראים יותר כמו לחצנים לי. אבל כמובן, העיצוב שלך עשוי להיות שונה. ניווט # 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 הוא המזהה אתה כאן. אם ברצונך לשנות את התפריט שלך כדי לציין את המיקום הנוכחי של המשתמשים שלך, פשוט השתמש באפשרות זו מזהה כדי להגדיר צבע רקע שונה או סגנון אחר. העבר תכונה זו מזהה לפריט התפריט הנכון בדפים אחרים, כך שהדף הנוכחי יודגש תמיד. ul # navigation li # youarehere a {background-color: # 09f; } אם אתה שם את הסגנונות האלה יחד על הדף שלך, אתה יכול ליצור שורת תפריטים אופקית או אנכית שעובדת עם האתר שלך, אבל הוא מהיר להורדה קל מאוד לעדכן בעתיד. שימוש ב- XHTML + CSS הופך את הרשימות שלך לכלי רב עוצמה לתכנון. אם ברצונך לקבל דוגמאות נוספות לתפריטים אופקיים, עיין במאמר הבא.
תפריט ניווט אופקי
אתה נמצא כאן מידע מיקום
