Ha HTML-ben szeretnénk navigációs sávot készíteni, akkor az alábbi lépéseket kell követnünk. Ezekkel a lépésekkel könnyen létrehozhatjuk a Navigációs sávot.

1. lépés: Először is be kell írnunk a HTML kódot bármelyik szövegszerkesztőbe, vagy meg kell nyitnunk a meglévő HTML-fájlt a szövegszerkesztőben, amelyben navigációs sávot szeretnénk létrehozni.

 Make a Navigation Bar 

2. lépés: Most meg kell határoznunk a címkét abban a címkében, ahol a sávot szeretnénk létrehozni.

 You are at JavaTpoint Site..... 

3. lépés: Ezt követően meg kell határoznunk a

címke , amely a rendezetlen lista megjelenítésére szolgál. Ezután meg kell határoznunk a listaelemeket a
• címke. Meg kell határoznunk azokat az elemeket, amelyeket a navigációs sávban szeretnénk megjeleníteni.

 <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. lépés: Ezt követően a kurzort közvetlenül a title tag bezárása utáni helyre kell helyeznünk. Ezután meg kell határoznunk a címkét. 4. lépés: Ezt követően a kurzort közvetlenül a title tag bezárása utáni helyre kell helyeznünk. Ezután meg kell határoznunk a címkét.

 Make a Navigation Bar 

5. lépés: Most különböző azonosító attribútumokat kell megadnunk, amelyek a navigációs sáv pozíciójának, színének beállítására szolgálnak. Tehát a következő kódot kell használnunk a head címkében. Az ingatlanok értékét igényeink szerint változtathatjuk is.

 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. lépés: Ezt követően a címkét közvetlenül a nyitó címke elé kell begépelnünk. És ezt a címkét is be kell zárnunk. És végül el kell mentenünk a HTML-fájlt, majd futtatnunk kell a fájlt a böngészőben.

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

A fenti HTML-kód kimenete a következő képernyőképen látható: