Om vi ​​vill skapa ett navigeringsfält i HTML, måste vi följa stegen som ges nedan. Med dessa steg kan vi enkelt skapa navigeringsfältet.

Steg 1: Först måste vi skriva HTML-koden i valfri textredigerare eller öppna den befintliga HTML-filen i textredigeraren där vi vill skapa en navigeringsfält.

 Make a Navigation Bar 

Steg 2: Nu måste vi definiera taggen i taggen där vi vill göra stapeln.

 You are at JavaTpoint Site..... 

Steg 3: Efter det måste vi definiera

tag , som används för att visa den oordnade listan. Och då måste vi definiera listobjekten i
• märka. Vi måste definiera de objekt som vi vill visa i navigeringsfältet.

 <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..... 

Steg 4: Därefter måste vi placera markören i strax efter stängningen av titeltaggen. Och sedan måste vi definiera taggen . Steg 4: Därefter måste vi placera markören i strax efter stängningen av titeltaggen. Och sedan måste vi definiera taggen.

 Make a Navigation Bar 

Steg 5: Nu måste vi specificera olika id-attribut som används för att ställa in position, färg på navigeringsfältet. Så vi måste använda följande kod i head-taggen. Vi kan även ändra värdet på fastigheter efter våra krav.

 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; } 

Steg 6: Efter det måste vi skriva taggen precis före starttaggen. Och vi måste också stänga den här taggen. Och äntligen måste vi spara HTML-filen och sedan köra filen i webbläsaren .

 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..... 

Utdata från ovanstående HTML-kod visas i följande skärmdump: