Pokud chceme vytvořit navigační lištu v Html, musíme postupovat podle kroků, které jsou uvedeny níže. Pomocí těchto kroků můžeme snadno vytvořit navigační panel.

Krok 1: Nejprve musíme zadat Html kód v libovolném textovém editoru nebo otevřít existující Html soubor v textovém editoru, ve kterém chceme vytvořit Navigační lištu.

 Make a Navigation Bar 

Krok 2: Nyní musíme definovat tag v tagu, kde chceme pruh vytvořit.

 You are at JavaTpoint Site..... 

Krok 3: Poté musíme definovat

tag , který se používá k zobrazení neuspořádaného seznamu. A pak musíme definovat položky seznamu v
• štítek. Musíme definovat ty položky, které chceme zobrazit v navigační liště.

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

Krok 4: Poté musíme umístit kurzor do oblasti těsně za uzavřením značky title. A pak musíme definovat značku . Krok 4: Poté musíme umístit kurzor do oblasti těsně za uzavřením značky title. A pak musíme definovat značku.

 Make a Navigation Bar 

Krok 5: Nyní musíme zadat různé atributy id, které se používají k nastavení pozice, barvy navigační lišty. V tagu head tedy musíme použít následující kód. Můžeme také změnit hodnotu nemovitostí dle našich požadavků.

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

Krok 6: Poté musíme značku napsat těsně před úvodní značku. A tento tag musíme také zavřít. A nakonec musíme uložit soubor Html a poté spustit soubor v prohlížeči.

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

Výstup výše uvedeného Html kódu je zobrazen na následujícím snímku obrazovky: