Ako želimo napraviti navigacijsku traku u Html-u, tada moramo slijediti korake koji su navedeni u nastavku. Pomoću ovih koraka možemo jednostavno stvoriti navigacijsku traku.
Korak 1: Prvo moramo utipkati Html kod u bilo kojem uređivaču teksta ili otvoriti postojeću Html datoteku u uređivaču teksta u kojem želimo napraviti navigacijsku traku.
Make a Navigation Bar
Korak 2: Sada moramo definirati oznaku u oznaci gdje želimo napraviti traku.
You are at JavaTpoint Site.....
Korak 3: Nakon toga, moramo definirati
- oznaku koja se koristi za prikaz nesređenog popisa. Zatim moramo definirati stavke popisa u
- označiti. Moramo definirati one stavke koje želimo prikazati u navigacijskoj traci.
<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.....
Korak 4: Nakon toga, moramo postaviti kursor odmah nakon zatvaranja oznake naslova. Zatim, moramo definirati oznaku. Korak 4: Nakon toga, moramo postaviti kursor odmah nakon zatvaranja oznake naslova. Zatim, moramo definirati oznaku.
Make a Navigation Bar
Korak 5: Sada moramo odrediti različite id atribute koji se koriste za postavljanje položaja, boje navigacijske trake. Dakle, moramo koristiti sljedeći kod u oznaci head. Također možemo promijeniti vrijednost nekretnina prema našim zahtjevima.
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; } Korak 6: Nakon toga moramo upisati oznaku neposredno prije početne oznake. I moramo također zatvoriti ovu oznaku. I, na kraju, moramo spremiti Html datoteku i potom pokrenuti datoteku u pregledniku.
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..... Testirajte sada Izlaz gornjeg Html koda prikazan je na sljedećoj snimci zaslona:
