א שריט-דורך-שריט פירער
צי דיין נאַוויגאַציע מעניו איז אַ האָריזאָנטאַל רודערן אַריבער די שפּיץ אָדער אַ ווערטיקאַל רודערן אַראָפּ די זייַט, עס איז נאָך נאָר אַ רשימה. ווען דיזיינינג וועב נאַוויגאַציע, עס איז אָפט גרינג צו פאַרגעסן אַז אַ נאַוויגאַציע מעניו איז נאָר אַ געלויבט גרופּע פון לינקס. אבער אויב איר פּראָגראַם דיין נאַוויגאַציע ניצן קסהטמל + קסס, איר קענען שאַפֿן אַ מעניו וואָס איז קליין צו אָפּלאָדירן (די קסהטמל) און גרינג צו קאַסטאַמייז (די קסס).
געטינג סטאַרטעד
צו אָנהייבן דיזיינינג אַ רשימה פֿאַר נאַוויגאַציע, איר דאַרפֿן צו נוצן אַ רשימה.
עס קען זיין אַ נאָרמאַל ונאָרדערעד רשימה וואָס איז געווען יידענאַפייד ווי די נאַוויגאַציע:
<נאַוו>
- היים
<לי> <אַו פּראָדוקץ
<לי> באַדינונגס
<לי> קאָנטאַקט אונדז
אויב איר קוק ענג אין די HTML, איר וועט באַמערקן אַז דער "היים" לינק אויך האט אַ שייַן פון אירע אָרט. דאס וועט לאָזן איר צו שאַפֿן אַ מעניו אַז די קראַנט אָרט פֿאַר דיין לייענער. אפילו אויב איר טאָן ניט פּלאַן אויף דעם טיפּ פון וויסואַל קיו אויף דיין פּלאַץ, איר קענען אַרייַננעמען די אינפֿאָרמאַציע. אויב איר באַשליסן צו לייגן די קיו שפּעטער, איר וועט האָבן ווייניקער קאָודינג צו צוגרייטן דיין פּלאַץ.
אָן קיין CSS סטילינג , דעם קסהטמל מעניו קוקט ווי אַ נאָרמאַל ונאָרדערעד רשימה. עס זענען בולאַץ און די רשימה זאכן זענען אַ ביסל ינדענטיד. ווייַל איך בין ניצן אָרטהאָלדער לינקס , רובֿ בראַוזערז וועט נישט אַרויסווייַזן די לינקס ווי קליקקאַבלע (אַנדערליינד און אין בלוי). אויב איר פּאַפּ אין די אויבן HTML אין אַ וועב בלאַט, דיין נאַוויגאַציע וועט קוקן ווי דאָס:
- היים
- פּראָדוקטן
- באַדינונגען
- רוף אונז
דאס איז שיין נודנע און טוט נישט קוקן פיל ווי אַ מעניו. אבער מיט בלויז אַ ביסל CSS סטיילז צו די רשימה, איר קענען שאַפֿן אַ מעניו אַז מאכט איר שטאָלץ.
ווערטיקאַל נאַוויגאַציע מעניו
א ווערטיקאַל נאַוויגאַציע מעניו איז זייער גרינג צו שרייַבן ווייַל עס דיספּלייז אין די זעלבע וועג ווי אַ נאָרמאַל רשימה: אַרויף און אַראָפּ.
די רשימה זאכן ווייַזן ווערטיקלי אַראָפּ די בלאַט.
ווען איך בין סטילינג מעניוז, איך ווי צו אָנהייבן אין די אַרויס און ארבעטן ין דורך דעם, איך מיינען אַז איך ערשטער נוסח די אַל # נאַוויגאַציע און דאַן מאַך צו די עלעמענט עלעמענץ און דאַן די לינקס, אאז"וו אזוי פֿאַר דעם מעניו, ערשטער איר באַשליסן די ברייט פון די מעניו. דעם וועט ענשור אַז אפילו אויב די מעניו זאכן זענען לאַנג, זיי וועלן נישט שטופּן די רעשט פון די אויסלייג איבער אָדער גרונט האָריזאָנטאַל סקראָללינג.
די # נאַוויגאַציע {ברייט: 12em; }
אַמאָל איך האָבן די ברייט שטעלן, איך קענען שפּילן מיט די רשימה זאכן. דאָס אַלאַוז מיר צו שטעלן זאכן ווי (צו באַקומען באַפרייַען פון די בולאַץ), הינטערגרונט פארבן, געמארקן, טעקסט אַליינמאַנט, און מאַרדזשאַנז.
די # נאַוויגאַציע לי {
רשימה-סטיל: קיין;
הינטערגרונט-קאָליר: # 039;
גרענעץ-שפּיץ: האַרט 1 פּקס # 039;
טעקסט-ייַנרייען: לינקס;
גרענעץ: 0;
}אַמאָל איר האָבן באַשטימט די באַסיקס פֿאַר די רשימה זאכן איר קענען אָנהייבן פּלייינג מיט ווי די מעניו קוקט אין די לינקס געגנט. ערשטער נוסח די ול # נאַוויגאַציע לי א און דאַן די א: לינק, א: באזוכט, א: האָווער און א: אַקטיוו (אויב איר ווילן זיי). פֿאַר די לינקס, איך ווי צו מאַכן די לינקס אַ בלאָק עלעמענט (אלא ווי די פעליקייַט אין-שורה). דאס פאָרסעס זיי צו נעמען די גאנצע פּלאַץ פון די לי-און זיי שפּילן מער ווי אַ פּאַראַגראַף, וואָס מאכט זיי גרינגער צו סטיל ווי מעניו קנעפּלעך.די אנדערע זאַך איך שטענדיק טאָן איז באַזייַטיקן די אַנדערליין (טעקסט-באַפּוצונג: גאָרניט;), ווי דאָס מאכט די קנעפּלעך קוק מער ווי קנעפּלעך צו מיר.
אָבער פון קורס, דיין פּלאַן זאל זיין אַנדערש.
די # נאַוויגאַציע איז אַ {
ווייַז: בלאָק;
טעקסט-באַפּוצונג: קיין;
padding: .25em;
border-bottom: solid 1px # 39f;
border-right: solid 1px # 39f;
}באַמערקונג אַז מיט די אַרויסווייַזן: בלאָק; שטעלן אויף די לינקס, די גאנצע קעסטל פון די מעניו נומער איז קליקקאַבלע, נישט נאָר די אותיות. דאָס איז אויך גוט פֿאַר וסאַביליטי. מאַכן זיכער צו שטעלן די לינק פארבן (לינק, באזוכט, כאַווער און אַקטיוו) אויב איר ווילן זיי צו זיין אַנדערש פון די פעליקייַט בלוי, רויט און לילאַ.
אַ: לינק, אַ: באזוכט {קאָלירן: # עפף; }
אַ: האָווער, אַ: אַקטיוו {קאָליר: # 000; }איך אויך ווי צו געבן די האָווער שטאַט אַ ביסל מער ופמערקזאַמקייַט דורך טשאַנגינג די הינטערגרונט פֿאַרב.
a: hover {background-color: #fff; }
אויב איר'ד ווי מער ביישפילן פון ווערטיקאַל מעניוז, באַראַטנ זיך די רשימה ונטער.
- א סטיילד ווערטיקאַל מעניו
- א באַסיק ווערטיקאַל מעניו טעמפּלאַטע
- א סטיילד ווערטיקאַל מעניו מיט איר דאָ
- א באַסיק ווערטיקאַל מעניו מוסטער מיט איר דאָ
האָריזאָנטאַל נאַוויגאַציע מעניו
שאפן האָריזאָנטאַל נאַוויגאַציע מעניוז זענען אַ ביסל מער שווער ווי ווערטיקאַל נאַוויגאַציע מעניוז, ווייַל איר האָבן צו אָפראָולפן דעם פאַקט אַז HTML רשימות בעסער צו אַרויסווייַזן ווערטיקלי. ווי מיט די האָריזאָנטאַל מעניו, ערשטער שאַפֿן דיין נאַוויגאַציע מעניו רשימה :
<נאַוו>
- היים
<לי> <אַו פּראָדוקץ
<לי> באַדינונגס
<לי> קאָנטאַקט אונדז
צו מאַכן אַ האָריזאָנטאַל מעניו, אַרבעט די זעלבע ווי איר האט מיט די ווערטיקאַל מעניו. אָנהייבן מיט דעם אַרויס און אַרבעט ין זינט איך ווילן מיין נאַוויגאַציע צו אָנהייבן אין די לינקס ווינקל, איך שטעלן עס מיט 0 לינקס גרענעץ און וואַטן, און איך פלאָוט עס צו די לינקס. איר זאָל אויך באַקומען אין די מידע פון באַשטעטיקן די ברייט אַזוי אַז דיין מעניו טוט נישט נעמען אַרויף מער אָדער ווייניקער אָרט ווי איר אויסן. פֿאַר האָריזאָנטאַל מעניוז, דאָס איז יוזשאַוואַלי די ברייט ברייט פון די פּלאַן. איך אויך לייגן אַ הינטערגרונט פֿאַרב צו די גאנצע רשימה צו מאַכן עס גרינגער צו לייענען.
די # נאַוויגאַציע {
פלאָוט: לינקס;
גרענעץ: 0;
וואַטן: 0;
ברייט: 100%;
הינטערגרונט-קאָליר: # 039;
}אבער דער סוד צו די האָריזאָנטאַל נאַוויגאַציע מעניו איז אין די רשימה זאכן. ליסטע זאכן זענען נאָרמאַלי פאַרשפּאַרן עלעמענטן, וואָס מיטל אַז זיי האָבן אַ נעוולינע געשטעלט פריער און נאָך יעדער. דורך באַשטימען די אַרויסווייַזן פון בלאָק צו ינלינע, איר קראַפט די רשימה עלעמענטן צו שורה אַרויף ווייַטער צו איין אנדערן כאָריזאַנטאַלי.
די # נאַוויגאַציע לי {אַרויסווייַזן: ינלינע; }
איך באהאנדלט די לינקס פּונקט ווי איך באהאנדלט זיי אין די ווערטיקאַל נאַוויגאַציע מעניו, מיט די זעלבע פארבן און טעקסט באַפּוצונג. איך לייגן אַ שפּיץ גרענעץ צו דילייט די קנעפּלעך ווען זיי זענען כייערד איבער. דער בלויז זאַך איך אַוועקגענומען איז די אַרויסווייַזן: בלאָק; ווי אַז וועט שטעלן די נעוולינעס צוריק אין און צעשטערן די האָריזאָנטאַל מעניו.
די # נאַוויגאַציע איז אַ {
טעקסט-באַפּוצונג: קיין;
padding: .25em 1em;
border-bottom: solid 1px # 39f;
גרענעץ-שפּיץ: האַרט 1 פּקס # 39 פ;
border-right: solid 1px # 39f;
}
אַ: לינק, אַ: באזוכט {קאָלירן: # עפף; }
די # נאַוויגאַציע זוכן צו: hover {
background-color: #fff;
קאָליר: # 000;
}איר זענט דאָ אָרט אינפֿאָרמאַציע
אן אנדער אַספּעקט פון HTML איז די יאָורעערע ידענטיפיער. אויב איר ווילן צו מאָדיפיצירן דיין מעניו צו אָנווייַזן דעם קראַנט אָרט פון דיין ניצערס, פשוט נוצן דעם שייַן צו דעפינירן אַ אַנדערש הינטערגרונט פֿאַרב אָדער אנדערע סטיל. מאַך אַז שייַן אַטריביוט צו די ריכטיק מעניו נומער אויף אנדערע בלעטער אַזוי אַז די קראַנט בלאַט איז שטענדיק כיילייטיד.
די # נאַוויגאַציע לי # איראַרעע אַ {background-color: # 09f; }
אויב איר שטעלן די סטיילז צוזאַמען אויף דיין בלאַט, איר קענען שאַפֿן אַ האָריזאָנטאַל אָדער ווערטיקאַל מעניו באַר וואָס אַרבעט מיט דיין פּלאַץ, אָבער איז שנעל צו אָפּלאָדירן און זייער גרינג צו דערהייַנטיקן אין דער צוקונפֿט. ניצן קסהטמל + קסס טורנס דיין רשימות אין אַ זייער שטאַרק געצייַג פֿאַר פּלאַן.
אויב איר ווילט מער ביישפילן פון האָריזאָנטאַל מעניוז, נאָכגיין די פאלגענדע.
- א סטיילד האָריזאָנטאַל מעניו
- א באַסיק האָריזאָנטאַל מעניו טעמפּלאַטע
- א סטיילד האָריזאָנטאַל מעניו מיט איר דאָ
- א באַסיק האָריזאָנטאַל מעניו מוסטער מיט איר דאָ