אם ברצוננו ליצור סרגל ניווט ב-Html, עלינו לבצע את השלבים המפורטים להלן. באמצעות השלבים הללו, נוכל ליצור בקלות את סרגל הניווט.
שלב 1: ראשית, עלינו להקליד את קוד ה-Html בכל עורך טקסט או לפתוח את קובץ ה-Html הקיים בעורך הטקסט בו אנו רוצים ליצור סרגל ניווט.
Make a Navigation Bar
שלב 2: כעת, עלינו להגדיר את התג בתג היכן אנו רוצים ליצור את הסרגל.
You are at JavaTpoint Site.....
שלב 3: לאחר מכן, עלינו להגדיר את
- תג , המשמש להצגת הרשימה הלא מסודרת. ואז עלינו להגדיר את פריטי הרשימה ב-
- תָג. עלינו להגדיר את הפריטים אותם אנו רוצים להציג בסרגל הניווט.
<ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site.....
שלב 4: לאחר מכן, עלינו למקם את הסמן בנקודה שלאחר סגירת תג הכותרת. ואז, עלינו להגדיר את התג . שלב 4: לאחר מכן, עלינו למקם את הסמן בחלק ממש לאחר סגירת תג הכותרת. ואז, עלינו להגדיר את התג.
Make a Navigation Bar
שלב 5: כעת, עלינו לציין תכונות מזהות שונות המשמשות להגדרת המיקום, הצבע של סרגל הניווט. לכן, עלינו להשתמש בקוד הבא בתג head. אנו יכולים גם לשנות את ערך הנכסים בהתאם לדרישות שלנו.
body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } שלב 6: לאחר מכן, עלינו להקליד את התג ממש לפני תג הפתיחה. ואנחנו צריכים גם לסגור את התג הזה. ולבסוף, עלינו לשמור את קובץ ה-Html ולאחר מכן להפעיל את הקובץ בדפדפן .
Make a Navigation Bar body { height: 125vh; margin-top: 80px; padding: 30px; background-size: cover; font-family: sans-serif; } header { background-color: orange; position: fixed; left: 0; right: 0; top: 5px; height: 30px; display: flex; align-items: center; box-shadow: 0 0 25px 0 black; } header * { display: inline; } header li { margin: 20px; } header li a { color: blue; text-decoration: none; } <ul> <li> <a href="#"> Home </a> </li> <li> <a href="#"> About </a> </li> <li> <a href="#"> Contact </a> </li> <li> <a href="#"> Terms of use </a> </li> <li> <a href="#"> Join Us </a> </li> </ul> You are at JavaTpoint Site..... בדוק את זה עכשיו הפלט של קוד HTML לעיל מוצג בצילום המסך הבא:
