Ако желимо да направимо траку за навигацију у ХТМЛ-у, онда морамо да следимо кораке који су дати у наставку. Користећи ове кораке, лако можемо да креирамо траку за навигацију.
Корак 1: Прво, морамо да откуцамо Хтмл код у било ком уређивачу текста или да отворимо постојећу Хтмл датотеку у уређивачу текста у којем желимо да направимо траку за навигацију.
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. корак: Сада морамо да наведемо различите ид атрибуте који се користе за постављање позиције, боје траке за навигацију. Дакле, морамо да користимо следећи код у хеад таг-у. Такође можемо променити вредност некретнина према нашим захтевима.
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: Након тога, морамо да откуцамо ознаку непосредно пре почетне ознаке. И морамо такође затворити ову ознаку. И, коначно, морамо да сачувамо Хтмл датотеку, а затим да покренемо датотеку у претраживачу.
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..... Тестирајте одмах Излаз горњег Хтмл кода је приказан на следећем снимку екрана:
