עיצוב קישורים בתפריט הראשי באתר - ריאקט

תמלול ההרצאה: עיצוב קישורים בתפריט הראשי באתר - ריאקט

הטקסט המלא של הדקות הראשונות בהרצאה «עיצוב קישורים בתפריט הראשי באתר - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:02

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

2. 00:25

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

3. 00:37

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

4. 01:16

   שיטה ראשונה בואו נמציא איזשהו שם של קלאס משלנו ובואו נניח שאנחנו רוצים לבנות עיצוב עבור ה-Home לינק ונקרא לזה אולי Current לא, נקרא לזה Home if בואו נעשה את זה יותר פשוט, Active Home בצורה כזאת. זה פחות משנה מה השם, אנחנו יכולים להמציא את השם שבאנו.

5. 01:51

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

6. 02:08

   נניח שאנחנו רוצים Red עבור הפרודקטס ובואו ניצמד ל-RGB ויש לנו פה עבור support blue ועבור האחרון שהיה contact us אנחנו רוצים בוא נניח yellow כל מה שאנחנו צריכים לעשות עכשיו זה לגשת לתפריט עצמו אני אולי אשים את זה side by side ולתת כאן את הproperty את הattribute letter יותר דיוק Active Class

7. 02:51

   Name שווה מה ה-Class Name שאנחנו רוצים לתת עבור ה-Home. בואו ניקח את זה, נשים כאן וכאן וכאן וכאן יש לנו את המילה Products וכאן יש לנו Support ו-Contact Us את זה אנחנו עושים אם אנחנו רוצים עיצוב שונה לכל אחד מהלינקים שלנו.

8. 03:30

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

9. 04:04

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

10. 04:29

    לתת לכולם את אותו עיצוב אז יש משהו יותר פשוט בואו רגע נשים את כל זה אולי וכל מה שאנחנו צריכים לעשות זה להגיד שאנחנו רוצים קלאס אחת ויחידה אבל בשם ספציפי והשם זה אקטיב אם אנחנו נותנים את השם אקטיב בואו ניתן פה color dark cyan נניח ניתן font-weight bold ניתן text

11. 05:04

    דקוריישן נאן, נניח אין לנו קו תחתון,