ווי צו שאַפֿן טאַבבעד נאַוויגאַציע מיט קסס און קיין בילדער

01 פון 06

ווי צו שאַפֿן טאַבבעד נאַוויגאַציע מיט קסס און קיין בילדער

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

דעם טוטאָריאַל וועט נעמען איר דורך די HTML און CSS דארף צו שאַפֿן אַ קסס טאַבבעד מעניו. דריקט אויף דעם לינק צו זען ווי עס וועט קוקן.

דעם טאַבבעד מעניו ניצט קיין בילדער , נאָר HTML און קסס 2 און CSS 3. עס קענען זיין לייכט עדיטיד צו לייגן מער טאַבס אָדער טוישן די טעקסט אין זיי.

בראַוזער סופּפּאָרט

דעם קוויטל מעניו וועט אַרבעטן אין אַלע הויפּט בראַוזערז . Internet Explorer וועט ניט ווייַזן די ראַונדיד עקן, אָבער אַנדערש, עס וועט ווייַזן טאַבס נאָר ווי פירעפאָקס, סאַפאַרי, אָפּעראַ, און קראָום.

02 פון 06

שרייב דיין מעניו רשימה

אַלע נאַוויגאַציע מעניוז און טאַבס זענען טאַקע נאָר אַ ונאָרדערעד רשימה. אַזוי דער ערשטער זאַך וואָס איר ווילן צו טאָן איז שרייַבן אַן אַנאָרדערד רשימה פון לינקס צו ווו איר ווילן דיין טאַבבעד נאַוויגאַציע צו גיין.

דעם טוטאָריאַל איז אנגענומען אַז איר שרייַבן דיין HTML אין אַ טעקסט רעדאַקטאָר און איר וויסן ווו צו שטעלן דעם HTML פֿאַר דיין מעניו אויף דיין וועב בלאַט.

שרייב דיין ונאָרדערעד רשימה ווי דאָס:

• class = "tablist">
  • CSS 3
  • id = "current"> Tabs
  • פֿאַר
  • מעניו

  איר וועט באַמערקן אַז די קאָד רופט אויס צוויי זאכן: קלאַס = "טאַבליסט" און שייַן = "קראַנט". דער ערשטער איז פארלאנגט . אויב איר טאָן ניט שטעלן די טאַבליסט קלאַס אויף דיין ונאָרדערעד רשימה, די טאַבס וועט נישט אַרבעטן. די רגע איז אַפּשאַנאַל. שטעלן די שייַן = "קראַנט" אויף וועלכער קוויטל איר'ד ווי צו כיילייטיד אויף דעם בלאַט. איך יוזשאַוואַלי נוצן דעם צו הויכפּונקט די בלאַט וואָס איך בין אויף, אָבער איר קענען נוצן עס צו הויכפּונקט די מערסט וויכטיק קוויטל. אָדער איר קענען אַראָפּנעמען עס גאָר.

03 פון 06

אָנהייב רעדאַגירן דיין סטייל שיט

איר קענען נוצן אָדער אַ פונדרויסנדיק נוסח בויגן אָדער אַן אינערלעכער נוסח בויגן . דער מוסטער מעניו בלאַט ניצט אַ ינערלעך נוסח בויגן אין די <קאָפּ> פון די דאָקומענט.

ערשטער מיר וועט סטייל די אַל זיך

דאס איז ווו מיר נוצן די סאָרט טאַבליש. אין די HTML. אלא ווי סטילינג די אַל קוויטל, וואָס וואָלט נוסח אַלע ונאָרדערעד רשימות אויף דיין בלאַט, איר זאָל סטיל בלויז די אַל קלאַס. tablist אַזוי דער ערשטער פּאָזיציע אין דיין קסס זאָל זיין:

. טאַבליסט {}

איך ווי צו שטעלן אין דער סאָף געגרייַזלט בראַסע ()) פאָרויס פון צייַט, אַזוי איך טאָן ניט פאַרגעסן עס שפּעטער.

בשעת מיר'רע ניצן אַן אַנאַדערד רשימה קוויטל פֿאַר די קוויטל מעניו רשימה, אָבער מיר טאָן נישט וועלן קיין בולאַץ אָדער נומערן קריפּינג ין אַזוי דער ערשטער נוסח איר זאָל לייגן איז. רשימה-סטיל: קיין; דאָס דערציילט דעם בלעטערער אַז בשעת עס איז אַ רשימה, עס איז אַ רשימה מיט קיין פּרעדעסטעד סטיילז (ווי בולאַץ אָדער נומערן).

דערנאך, איר קענען שטעלן די הייך פון דיין רשימה צו גלייַכן די פּלאַץ איר ווילן עס צו פּלאָמבירן. איך אויסדערוויילט 2 עם פֿאַר מיין הייך, ווי דאָס איז טאָפּל די סטאַנדאַרט שריפֿט גרייס, און גיט וועגן האַלב אַן עם אויבן און ונטער דער טעקסט פון די קוויטל. height: 2em; אָבער איר קענען שטעלן דיין ברייט צו וועלכער גרייס איר'ד ווי. UL טאַגס וועט אויטאָמאַטיש נעמען 100% פון די ברייט, אַזוי אויב איר ווילן צו זיין קלענערער ווי די קראַנט קאַנטיינער, איר קענען לאָזן די ברייט אויס.

צום סוף, אויב דיין בעל נוסח בלאַט טוט נישט האָבן פּרעסעץ פֿאַר אַל און אָל טאַגס, איר וועט וועלן צו שטעלן זיי אין. דעם מיטל אַז איר זאָל קער אַוועק די געמארקן, מאַרדזשאַנז, און פּאָלינגז אויף דיין אַל. וואַטן: 0; גרענעץ: 0; גרענעץ: קיין; אויב איר האָבן שוין באַשטעטיק די ול צעטל, איר קענען טוישן די מאַרדזשאַנז, וואַטן, אָדער ברעג צו עפּעס אַז פיץ מיט דיין פּלאַן.

דיין לעצט טאַבליסט קלאַס זאָל קוקן ווי דאָס:

. טאַבליסט {רשימה-סטיל: קיין; height: 2em; וואַטן: 0; גרענעץ: 0; גרענעץ: קיין; }

04 פון 06

רעדאַגירן די לי רשימות יטעמס

אַמאָל איר ווע סטיילד דיין ונאָרדערעד רשימה, איר דאַרפֿן צו סטיל די לי טאַגס ין עס. אַנדערש, זיי וועלן שפּילן ווי אַ נאָרמאַל רשימה און יעדער מאַך צו די ווייַטער שורה אָן פּלייסינג דיין טאַבס ריכטיק.

ערשטער, שטעלן אַרויף דיין נוסח פאַרמאָג:

. טאַבליסט לי {}

דערנאך איר ווילן צו פלאָוט דיין טאַבס אַזוי זיי שורה אַרויף אויף די האָריזאָנטאַל פלאַך. פלאָוט: לינקס;

און טאָן ניט פאַרגעסן צו לייגן עטלעכע גרענעץ צווישן די טאַבס, אַזוי זיי טאָן ניט צונויפגיסן צוזאַמען. גרענעץ-רעכט: 0.13em;

דיין לי סטיילז זאָל קוקן ווי דאָס:

. טאַבליסץ {פלאָוט: לינקס; גרענעץ-רעכט: 0.13em; }

05 פון 06

מאַכן די טאַבס קוקן ווי טאַבס מיט קסס 3

צו טאָן רובֿ פון די שווער ליפטינג אין דעם נוסח בויגן, איך בין טאַרגאַטינג די לינקס ין די ונאָרדערעד רשימה. בראַוזערז דערקענען אַז לינקס טאָן מער אויף אַ וועב בלאַט ווי אנדערע טאַגס, אַזוי עס איז גרינגער צו באַקומען עלטערע בראַוזערז צו נאָכפאָלגן די זאכן ווי האָווער שטאַטן אויב איר צוטשעפּען זיי צו די אַנקער טאַש (לינקס). אַזוי ערשטער שרייַבן דיין נוסח פּראָפּערטיעס:

. טאַבליס אַ {}. טאַבליסט עס: hover {}

ווייַל די טאַבס זאָל שפּילן ווי טאַבס אין אַ אַפּלאַקיישאַן, איר ווילן די גאנצע געגנט פון דער קוויטל קליקטאַבלע, ניט נאָר די לינגקט טעקסט. צו טאָן דעם, איר האָבן צו בייַטן די א צעטל פון עס ס נאָרמאַל " ינלינע " שטאַט אין אַ בלאָק עלעמענט . ווייַז: בלאָק; (אויב איר זענט אינטערעסירט אין וויסן מער וועגן דעם חילוק, לייענען בלאַק-לעוועל ווס. ינלינע עלעמענץ .)

דעריבער, אַ גרינג וועג צו צווינגען דיין טאַבס צו זיין סיממעטריק מיט איין אנדערן, אָבער נאָך פלעקס צו פּאַסיק די ברייט פון די טעקסט איז צו מאַכן די רעכט און לינקס וואַטן דער זעלביקער. איך געוויינט די וואַטן סטרימינג פאַרמאָג צו שטעלן די שפּיץ און דנאָ צו 0 און די רעכט און לינקס צו 1 עם. padding: 0 1em;

איך אויך אויסדערוויילט צו באַזייַטיקן די לינק אַנדערליינז, אַזוי אַז די טאַבס קוקן ווייניקער ווי לינקס. אבער אויב דיין וילעם זאל זיין צעמישט דורך אַז, לאָזן אויס דעם שורה. לינק-באַפּוצונג: קיין;

דורך פּאַטינג אַ דין ברעג אַרום די טאַבס, עס מאכט זיי קוק ווי טאַבס. איך געניצט די ברעג פון די ברעג פון די ברעג צו שטעלן די גרענעץ אַרום אַלע פיר זייטן גרענעץ: 0.06 עור האַרט # 000; און דעריבער געניצט די ברעג-דנאָ פאַרמאָג צו באַזייַטיקן עס פון די דנאָ. border-bottom: 0;

דעמאָלט איך געמאכט עטלעכע אַדזשאַסטמאַנץ צו די שריפֿט, קאָליר, און הינטערגרונט פֿאַרב פון די טאַבס. שטעלן די צו די סטיילז וואָס גלייַכן דיין פּלאַץ. שריפֿט: דרייסט 0.88עם / 2 עם אַריאַל, גענעוואַ, העלוועטיקאַ, סאַנז-סעריף; קאָליר: # 000; background-color: # ccc;

אַלע פון ​​די אויבן סטיילז זאָל גיין אין די סעלעקטאָר. טאַבליסט ל אַ, די הערשן אַזוי אַז זיי ווירקן די אַנקער טאַגס אין אַלגעמיין. דערנאָך צו מאַכן די טאַבס דערשייַנען מער קליקקאַבלע, איר זאָל שטעלן אַ ביסל רעגולער הערשן. טאַבליסט לי אַ: האָווער.

איך ווי צו טוישן די קאָליר פון די טעקסט און הינטערגרונט צו מאַכן די קוויטל קנאַל ווען איר מויז איבער עס. הינטערגרונט: # 3 קף; color: #fff;

און איך אַרייַננעמען אן אנדער דערמאָנונג צו די בראַוזערז וואָס איך ווילן די לינק צו בלייַבן ניט אונטערלאָזן. טעקסט-באַפּוצונג: קיין; אן אנדער פּראָסט אופֿן איז צו ווענדן די אַנדערליין צוריק ווען איר מויז איבער די קוויטל. אויב איר ווילן צו טאָן דאָס, טוישן עס צו טעקסט-באַפּוצונג: אַנדערליין;

אבער ווו איז די קסס 3?

אויב איר האָט שוין באַצאָלן ופמערקזאַמקייַט, איר'ווע מיסטאָמע באמערקט אַז עס איז געווען קיין CSS 3 סטיילז אין די נוסח בלאַט. דעם האט די מייַלע פון ​​ארבעטן אין קיין מאָדערן בלעטערער, ​​אַרייַנגערעכנט Internet Explorer. אבער עס טוט נישט מאַכן די טאַבס קוק ווי עפּעס מער ווי קוואַדראַט באָקסעס. דורך לייגן אַ קסס 3 נוסח רופן גרענעץ-ראַדיוס (און עס ס פארבונדן בלעטערער-ספּעציפיש רופט) איר קענען מאַכן די עדזשאַז ראַונדיד, צו קוקן מער ווי טאַבס אויף אַ מאַנילאַ טעקע.

די סטיילז איר זאָל לייגן צו די. טאַבליסט לי אַ הערשן זענען: -וועבקיט-גרענעץ-שפּיץ-רעכט-ראַדיוס: 0.50em; -webkit-border-top-left-radius: 0.50em; -מאָז-גרענעץ-ראַדיוס-טאַפּרע: 0.50 עם; -moz-border-radius-topleft: 0.50em; ברעג-שפּיץ-רעכט-ראַדיוס: 0.50 עם; border-top-left-radius: 0.50em;

דאס זענען די לעצט נוסח כּללים איך געשריבן:

. טאַבליס אַ {אַרויסווייַזן: בלאָק; padding: 0 1em; טעקסט-באַפּוצונג: קיין; border: 0.06 ער האַרט # 000; border-bottom: 0; שריפֿט: דרייסט 0.88עם / 2 עם אַריאַל, גענעוואַ, העלוועטיקאַ, סאַנז-סעריף; קאָליר: # 000; background-color: # ccc; / * קסס 3 עלעמענטן * / וועבקיט-גרענעץ-שפּיץ-רעכט-ראַדיוס: 0.50em; -webkit-border-top-left-radius: 0.50em; -מאָז-גרענעץ-ראַדיוס-טאַפּרע: 0.50 עם; -moz-border-radius-topleft: 0.50em; ברעג-שפּיץ-רעכט-ראַדיוס: 0.50 עם; border-top-left-radius: 0.50em; } .טאַבליס אַ: hover {background: # 3cf; color: #fff; טעקסט-באַפּוצונג: קיין; }

מיט די סטיילז, איר האָבן אַ טאַבבעד מעניו וואָס אַרבעט אין אַלע הויפּט בראַוזערז און קוקט ווי פייַן דרוקן טאַבס אין קסס 3 געהאָרכיק בראַוזערז. דער ווייַטער בלאַט גיט איר אַן אנדערן אָפּציע וואָס איר קענען נוצן צו אָנטאָן זיך מער.

06 פון 06

הויכפּונקט די קראַנט טאַב

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

איך נוסח ביי די # פאָרן א צעטל ווי געזונט ווי די # קראַך א: כאַווער סטן אַזוי אַז ביידע זענען אַ ביסל אַנדערש. איר קענען טוישן די קאָליר, הינטערגרונט פֿאַרב, אַפֿילו די הייך, ברייט און וואַטן פון דעם עלעמענט. מאַכן וועלכער ענדערונגען מאַכן זינען אין דיין פּלאַן.

. טאַבליסט עס # קראַנט אַ {הינטערגרונט-קאָליר: # 777; color: #fff; } .טללסט צו # קראַנט אַ: hover {background: # 39C; }

און איר טאָן! איר'ווע נאָר באשאפן אַ טאַבבעד מעניו פֿאַר דיין וועבזייַטל.